在完成了產(chǎn)品的基礎(chǔ)開發(fā)以后，接下來需要進行一些周邊的工作，這些周邊工具將會幫助下一步優(yōu)化產(chǎn)品。

在完成了產(chǎn)品的基礎(chǔ)開發(fā)以后，接下來需要進行一些周邊的工作，這些周邊工具將會幫助下一步優(yōu)化產(chǎn)品。

為什么要加應(yīng)用統(tǒng)計和 Crash 收集

不少開發(fā)者在開發(fā)的時候，很少會意識到需要添加應(yīng)用統(tǒng)計和 Crash 收集。但對于一個合格的應(yīng)用來說，這些是必須的。

• 應(yīng)用統(tǒng)計：應(yīng)用統(tǒng)計會在后續(xù)進行產(chǎn)品迭代的時候給予數(shù)據(jù)的支持，讓能夠明確為什么要更新、要更新什么以及為什么這么做。
• Crash 收集：人無完人，很難開發(fā)出一個完美的應(yīng)用，就隨時有可能會出現(xiàn)應(yīng)用報錯的情況。出現(xiàn)報錯以后由于用戶的水平不同，有效的反饋其實很少。Crash 收集則可以幫助收集必要的 Crash 信息，從而在后續(xù)開發(fā)的過程中，有針對性的修復(fù) Bug。

應(yīng)該使用哪些工具？

在應(yīng)用統(tǒng)計領(lǐng)域，可選項非常多，大部分人使用的是 Google Analytics ，不過由于這個產(chǎn)品的面向用戶主要是國內(nèi)的用戶，因此我更傾向選擇加載速度更快的產(chǎn)品，最終我選擇的是來自騰訊的 移動應(yīng)用分析(MTA) ，騰訊的移動應(yīng)用分析中，提供了 HTML5 產(chǎn)品的接入，因此可以完成 TLDR 的統(tǒng)計。

在 Crash 收集方面，大家用的比較普遍的是 Sentry.io ，不過因為 Linux 中國并沒有足夠多的產(chǎn)品業(yè)務(wù)需要使用 Sentry 來收集 Crash ，因此，一直使用的是官網(wǎng)的免費使用版本。同樣因為網(wǎng)絡(luò)加載速度的原因，選擇使用了國內(nèi)的競品 —— FunDebug 。

接入工具

騰訊移動應(yīng)用分析

騰訊移動應(yīng)用分析的接入并不復(fù)雜，首先，你需要登陸其官網(wǎng)，創(chuàng)建一個 HTML5 應(yīng)用。

并在創(chuàng)建完成后，根據(jù)你自己的需要配置相應(yīng)的能力，這里我開啟了所有的數(shù)據(jù)統(tǒng)計，用以支持后續(xù)的產(chǎn)品迭代決策。

配置完成后，你會獲得具體的統(tǒng)計的代碼，接下來就可以進行接入。

一個比較簡單的方法是直接將代碼復(fù)制，并粘貼到 public/index.html 中，從而實現(xiàn)統(tǒng)計。不過，這樣嵌入會導(dǎo)致如果需要自定義統(tǒng)計時，會無法通過 ESLint 的規(guī)則，因此我選擇了第二種方式，使用 Vue 插件的方式接入。

使用 Vue 插件接入時，需要使用 mars-mta 這個包。

先使用 npm 安裝依賴，然后在 main.js 中加入相應(yīng)的統(tǒng)計代碼，就可以實現(xiàn)自動的統(tǒng)計。

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, // 開關(guān),若為false,則不會發(fā)出上報????config: {??????sid: '500710182', // 必填，統(tǒng)計用的appid??????cid: '500710183', // 如果開啟自定義事件，此項目為必填，否則不填??????autoReport: 1, // 是否開啟自動上報(1:init完成則上報一次,0:使用pgv方法才上報)??????senseHash: 1, // hash錨點是否進入url統(tǒng)計??????senseQuery: 1, // url參數(shù)是否進入url統(tǒng)計??????performanceMonitor: 1, // 是否開啟性能監(jiān)控????}})// 以上為新增代碼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 的應(yīng)用管理后臺獲取。

而下方的配置，則根據(jù)你自己的實際需求選擇開啟即可。

對應(yīng)的提交： https://github.com/LCTT/tldr.linux.cn/commit/61821aff4bf75fda3e81d96c6cd34a51efd00773

FunDebug

Fundebug 是我之前在開發(fā)小程序的時候用過的 Crash 收集應(yīng)用。這次剛好也用上了。

因為預(yù)算的問題，這里我使用的是免費版本，有幾個 tab 是看不到的，但是基本的 Debug 也是夠用了。

Fundebug 的安裝也很簡單， 訪問 https://www.fundebug.com/ ，注冊賬號， 并創(chuàng)建一個項目，你會獲得一個 API Key，后續(xù)你可以使用這個 API Key 來初始化你的項目。

執(zhí)行如下命令來安裝依賴：

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);

對應(yīng)的提交： https://github.com/LCTT/tldr.linux.cn/commit/225ca9d38e80eb55defac6383f5b9c228bdab6fe

優(yōu)化

在開發(fā)的過程中經(jīng)常會出現(xiàn) Error，這個是難以避免的。在開啟了 Crash 收集以后，這些 ERROR 也會被收集到 Fundebug 上，這樣會浪費每個月 3000 條的免費額度，因此，需要一個方法在開發(fā)環(huán)境不啟用這些拓展。類似的，也不希望 MTA 統(tǒng)計本地開發(fā)的 Page View ，會影響到后續(xù)的數(shù)據(jù)分析。因此，我使用了一些方法來避開這個問題。

if (process.env.NODE_ENV === 'production') {????Vue.use(Mars, {??????open: true, // 開關(guān),若為false,則不會發(fā)出上報??????config: {????????sid: 'xxx', // 必填，統(tǒng)計用的appid??????}??})??fundebug.apikey = "xxx"??fundebugVue(fundebug, Vue);}

通過將引用統(tǒng)計的代碼包裹在環(huán)境的判斷代碼中，可以實現(xiàn)在渲染的時候，只有生產(chǎn)環(huán)境才會渲染出相應(yīng)的統(tǒng)計代碼，從而實現(xiàn)了在開發(fā)環(huán)境不調(diào)用 fundebug 和 mta 統(tǒng)計，避免了開發(fā)環(huán)境的數(shù)據(jù)干擾。

對應(yīng)的提交： https://github.com/LCTT/tldr.linux.cn/commit/62f87b51fabd7c25cd905560157a546fd62babf2

總結(jié)

在這篇文章中，介紹了兩個服務(wù)，分別是用于統(tǒng)計的騰訊移動分析 MTA 和用于做 Crash 收集的 fundebug，介紹了應(yīng)該如何在 Vue 應(yīng)用中接入這兩種服務(wù)。此外，還根據(jù)實際的需求，優(yōu)化了兩個統(tǒng)計的位置，確保產(chǎn)品在開發(fā)環(huán)境不會工作，從而避免了影響到我們統(tǒng)計數(shù)據(jù)的準(zhǔn)確性。

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

點擊“了解更多”可訪問文內(nèi)鏈接

總結(jié)

以上是生活随笔為你收集整理的代码统计工具有哪几种_跟我学“Linux”小程序Web版开发（四）：引入统计及Crash收集...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。