代码统计工具有哪几种_跟我学“Linux”小程序Web版开发(四):引入统计及Crash收集...

73330691c6c68f130ac1276fc71f5766.png

在完成了产品的基础开发以后,接下来需要进行一些周边的工作,这些周边工具将会帮助下一步优化产品。

在完成了产品的基础开发以后,接下来需要进行一些周边的工作,这些周边工具将会帮助下一步优化产品。

为什么要加应用统计和 Crash 收集

不少开发者在开发的时候,很少会意识到需要添加应用统计和 Crash 收集。但对于一个合格的应用来说,这些是必须的。

  • 应用统计:应用统计会在后续进行产品迭代的时候给予数据的支持,让能够明确为什么要更新、要更新什么以及为什么这么做。
  • Crash 收集:人无完人,很难开发出一个完美的应用,就随时有可能会出现应用报错的情况。出现报错以后由于用户的水平不同,有效的反馈其实很少。Crash 收集则可以帮助收集必要的 Crash 信息,从而在后续开发的过程中,有针对性的修复 Bug。

应该使用哪些工具?

在应用统计领域,可选项非常多,大部分人使用的是 Google Analytics ,不过由于这个产品的面向用户主要是国内的用户,因此我更倾向选择加载速度更快的产品,最终我选择的是来自腾讯的 移动应用分析(MTA) ,腾讯的移动应用分析中,提供了 HTML5 产品的接入,因此可以完成 TLDR 的统计。

在 Crash 收集方面,大家用的比较普遍的是 Sentry.io ,不过因为 Linux 中国并没有足够多的产品业务需要使用 Sentry 来收集 Crash ,因此,一直使用的是官网的免费使用版本。同样因为网络加载速度的原因,选择使用了国内的竞品 —— FunDebug 。

接入工具

腾讯移动应用分析

9799bb172ba6cfc01a36c6d0deb509ab.png

腾讯移动应用分析的接入并不复杂,首先,你需要登陆其官网,创建一个 HTML5 应用。

992027afc9c2473284a9000bf3e71f21.png

并在创建完成后,根据你自己的需要配置相应的能力,这里我开启了所有的数据统计,用以支持后续的产品迭代决策。

ce5e74a917a04eedd44816c372cdcb6a.png

配置完成后,你会获得具体的统计的代码,接下来就可以进行接入。

一个比较简单的方法是直接将代码复制,并粘贴到 public/index.html 中,从而实现统计。不过,这样嵌入会导致如果需要自定义统计时,会无法通过 ESLint 的规则,因此我选择了第二种方式,使用 Vue 插件的方式接入。

使用 Vue 插件接入时,需要使用 mars-mta 这个包。

先使用 npm 安装依赖,然后在 main.js 中加入相应的统计代码,就可以实现自动的统计。

import Vue from 'vue'import App from './App.vue'import router from './router'import vuetify from './plugins/vuetify';// 以下为新增代码import Mars from 'mars-mta'Vue.use(Mars, {    open: true, // 开关,若为false,则不会发出上报    config: {      sid: '500710182', // 必填,统计用的appid      cid: '500710183', // 如果开启自定义事件,此项目为必填,否则不填      autoReport: 1, // 是否开启自动上报(1:init完成则上报一次,0:使用pgv方法才上报)      senseHash: 1, // hash锚点是否进入url统计      senseQuery: 1, // url参数是否进入url统计      performanceMonitor: 1, // 是否开启性能监控    }})// 以上为新增代码new Vue({  router,  vuetify,  render: h => h(App),  beforeCreate: async function(){        const auth = this.$tcb.auth({ persistence: 'local' });        await auth.signInAnonymously();  }}).$mount('#app')

在我的代码中,配置了 sid 和 cid ,这些信息你都需要在腾讯 MTA 的应用管理后台获取。

2ecd7b9127be2519cf83196c268bd081.png

而下方的配置,则根据你自己的实际需求选择开启即可。

对应的提交: https://github.com/LCTT/tldr.linux.cn/commit/61821aff4bf75fda3e81d96c6cd34a51efd00773

FunDebug

Fundebug 是我之前在开发小程序的时候用过的 Crash 收集应用。这次刚好也用上了。

因为预算的问题,这里我使用的是免费版本,有几个 tab 是看不到的,但是基本的 Debug 也是够用了。

c43042a64f9649d2c6682a36976a1f8b.png

Fundebug 的安装也很简单, 访问 https://www.fundebug.com/ ,注册账号, 并创建一个项目,你会获得一个 API Key,后续你可以使用这个 API Key 来初始化你的项目。

096e233865dcfeec1c4915105bbc8aef.png

执行如下命令来安装依赖:

npm install fundebug-javascript fundebug-vue --save

并在 main.js 中添加如下代码(将 API-KEY 替换为你自己的 API KEY)并保存,就可以引入 Fundebug 来进行 Crash 收集了。

import * as fundebug from "fundebug-javascript";import fundebugVue from "fundebug-vue";fundebug.init({    apikey: "API-KEY"})fundebugVue(fundebug, Vue);

对应的提交: https://github.com/LCTT/tldr.linux.cn/commit/225ca9d38e80eb55defac6383f5b9c228bdab6fe

优化

在开发的过程中经常会出现 Error,这个是难以避免的。在开启了 Crash 收集以后,这些 ERROR 也会被收集到 Fundebug 上,这样会浪费每个月 3000 条的免费额度,因此,需要一个方法在开发环境不启用这些拓展。类似的,也不希望 MTA 统计本地开发的 Page View ,会影响到后续的数据分析。因此,我使用了一些方法来避开这个问题。

if (process.env.NODE_ENV === 'production') {    Vue.use(Mars, {      open: true, // 开关,若为false,则不会发出上报      config: {        sid: 'xxx', // 必填,统计用的appid      }  })  fundebug.apikey = "xxx"  fundebugVue(fundebug, Vue);}

通过将引用统计的代码包裹在环境的判断代码中,可以实现在渲染的时候,只有生产环境才会渲染出相应的统计代码,从而实现了在开发环境不调用 fundebug 和 mta 统计,避免了开发环境的数据干扰。

对应的提交: https://github.com/LCTT/tldr.linux.cn/commit/62f87b51fabd7c25cd905560157a546fd62babf2

总结

在这篇文章中,介绍了两个服务,分别是用于统计的腾讯移动分析 MTA 和用于做 Crash 收集的 fundebug,介绍了应该如何在 Vue 应用中接入这两种服务。此外,还根据实际的需求,优化了两个统计的位置,确保产品在开发环境不会工作,从而避免了影响到我们统计数据的准确性。

这篇文章涉及到的代码你都可以在 https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js 看到。

点击“了解更多”可访问文内链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/245068.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mmseg java_MMSeg中文分词算法

Java中有一些开源的分词项目,比如:IK、Paoding、MMSEG4J等等。这里主要说的是MMSEG4J中使用的MMSeg算法。它的原文介绍在:http://technology.chtsai.org/mmseg/,是用英文书写的,这是只是它的一个中文笔记。为什么中文要…

python查看文档的软件_Python __doc__属性:查看文档

前面介绍了使用 help() 函数来查看程序单元的帮助信息。比如导入 string 模块之后,即可使用 help() 函数来查看指定程序单元的帮助信息。例如,在交互式解释器中输入如下命令来查看 string 模块下 capwords() 函数的作用:>>> help(st…

python重写和装饰器_python中的装饰器

装饰器的本质:当你在用某个decorator来修饰某个函数func时,如下所示:decoratordef func():pass其解释器会解释成下面这样的语句:funcdecorator(func)本质是把一个函数当作参数传递到另一个函数中,然后再调用。def hell…

python3不等于号_python中的不等于号是什么

python中的不等于号用!表示。Python支持的比较运算符如下图所示比较运算符,也成关系运算符,用于对常量、变量或表达式的结果进行大小、真假等比较,如果比较结果为真,则返回 True;反之,则返回 False。比较运…

java的abstract的意思_java – spring中的abstract =“true”是什么意思?

Spring中的抽象bean有点不同于抽象类。事实上,Spring中的抽象bean甚至不需要映射到任何类。以此为例:和类:public class FooDao {private DataSource dataSource;private SomeHelper someHelper;private FooHelper fooHelper;//setters}publi…

错误:不能继续进行下一步操作 openfire 设置._如何为MacBook或Mac电脑恢复出厂设置...

mac电脑经过长时间的使用后会变得卡顿,或者因为部分操作方式改变以至于给我们在使用过程中造成障碍,此时我们可以进行恢复出厂设置,以此来解决部分问题。那么该如何为MacBook或Mac电脑恢复出厂设置呢?下面跟随小编来一起学习一下吧…

java枚举类型测试_Java枚举类的使用

1、自定义枚举类// 测试类public class enumDemo {public static void main(String[] args) {System.out.println(Season.SPRING);System.out.println(Season.SUMMER);System.out.println(Season.AUTUMN);System.out.println(Season.WINTER);}}// 自定义枚举类class Season {//…

mac显示网速_Mac网络流量监控工具——NetWorker pro

NetWorker pro for Mac是Mac系统上一款轻量级的网速实时监测软件,可以让用户在菜单栏上显示当前的网络上传下载速度,可以在速度和流量两种模式之间切换,也可以选择不同的网络模式来进行监测。此外,networker mac还提供有关当前活动…

南京java架构师工资_java架构师工资一般是多少?怎么提升才能获得高薪?

这几年Java一直以自身的优势霸占榜首,而且其实java架构师工资也是行业比较高的,下面来看看java架构师的工资到底有多少,当然这也是要区分地区的,以及怎样提高自己才能获得高薪呢?当程序员容易,当一个优秀的…

matlab gui学习手记_MATLAB论坛不可错过的30例GUI源代码

​过去的两年中,我经常会在微信公众号和知乎上分享,平时如何通过MATLAB制作GUI,来让自己的工作和生活更加便捷与高效。在分享的同时,有不少朋友会给我留言提问关于MATLAB GUI的问题。而其中的许多问题,其实都是能够在M…

线性回归csv数据集_用mxnet的gluon线性回归训练只有两个特征的数据集

前言自从上次试着用最基础的线性回归训练一个有80个特征的数据集,梯度爆炸之后,今天拿一个简单到不能再简单的数据集试试能不能成功收敛。途中我们又会遇到什么问题?数据集来自吴恩达机器学习课程第二周的课后练习。原本是txt文件&#xff0c…

java中include标签的用法_原 ng-include用法分析以及多标签页面的简单实现方式

在平时的项目开发中,应该会经常遇到上图所示的需求,就是在一个页面中有多个标签,被选中的标签颜色会高亮显示,切换不同标签显示相应的不同内容。如果内容代码过多则写在同一个html文件就会显得特别乱,所以这里我们最好…

Java中如何引用文档对象模型_在JAVA中使用文档对象模型DOM经验小结

文档对象模型 (DOM) 是一个文档标准,对于完备的文档和复杂的应用程序,DOM 提供了大量灵活性。DOM标准是标准的。它很强壮且完整,并且有许多实现。这是许多大型安装的决定因素--特别是对产品应用程序,以避免在API发生改变时进行大量…

禅道项目管理_禅道 11.6.1 版本发布,完善细节,修复 Bug

禅道项目管理软件集产品管理、项目管理、质量管理、文档管理、组织管理和事务管理于一体,是一款功能完备的项目管理软件,完美地覆盖了项目管理的核心流程。禅道官网:www.zentao.net。大家好,禅道项目管理软件11.6.1发布&#xff0…

mendeley引用参考文献不显示_免费文献管理器Mendeley

June 2020有机合成化学文献检索今天小编给大家分享一款免费又好用的文献管理器——Mendeley,另外晶体cif文件下载—Materialsproject和COD数据库可在菜单栏的文献检索[文献管理/资源]中查看Mendeley是什么Mendeley是一款免费的跨平台文献管理软件,同时也…

pgsql vs mysql查询_对比平台--SQL Server Vs PostgreSQL

Microsoft SQL Server是一个数据库管理和分析系统,主要用于电子商务,业务范围和不同的数据仓库解决方案。另一方面,PostgreSQL是高级的对象关系数据库管理系统,它为SQL标准的扩展子集提供支持,包括不同的事务&#xff…

停车场管理系统代码_jsp19109商场商铺停车场服务系统-SSM-Mysql

jsp19109商场商铺停车场服务系统-SSM-Mysql该设计有演示视频    100%能运行买重包换  保密发送  一校一份编号:jsp19109语言数据库:jspMysql论文字数:12032字摘 要随着社会的发展,社会的方方面面都在利用信息化时代的优势。计…

java中compare语句的用法_Java RuleBasedCollator compare()用法及代码示例

java.text.RuleBasedCollat​​or类的compare()方法用于比较两个对象的强度,并且根据结果将返回0,正值和负值作为输出。用法:public int compare(Object o1, Object o2)参数:此方法需要两个对象之间进行比较。返回值:如果第一个对…

qregexp限制数字范围_数字系统实现电压电流控制的必经之路数模转换器

《芯势力》系列接上一篇文章,我们了解到了模数转换器,本文将带你了解数模转换器。看名字就能知道,如果模数转换器实现了模拟信号到数字信号的转换,那么,数模转换器就是模数转换器的逆过程,即把数字信号转换…

java 什么时候依赖注入_玩框架java依赖注入 – 何时使用单例

So I am wondering, should I be using singleton objects as the examples seem to imply? If this is the case, what is the advantage compared to the old static methods approach?依赖注入是一种将应用程序连接在一起的技术.您编写的组件并不直接相互依赖.而是将组件注…