基於雲開發開發 Web 應用（四）：引入統計及 Crash 收集

體驗 Linux 小程序

小程序端

PC 端

訪問 https://tldr.linux.cn/ 體驗

正文

在完成了產品的基礎開發之後，接下來須要進行一些周邊的工做，這些周邊工具將會幫助下一步優化產品。

爲何要加應用統計和 Crash 收集

很多開發者在開發的時候，不多會意識到須要添加應用統計和 Crash 收集。但對於一個合格的應用來講，這些是必須的。

• 應用統計：應用統計會在後續進行產品迭代的時候給予數據的支持，讓可以明確爲何要更新、要更新什麼以及爲何這麼作。
• Crash收集：人無完人，很難開發出一個完美的應用，就隨時有可能會出現應用報錯的狀況。出現報錯之後因爲用戶的水平不一樣，有效的反饋其實不多。Crash 收集則能夠幫助收集必要的 Crash 信息，從而在後續開發的過程當中，有針對性的修復 Bug。

應該使用哪些工具？

在應用統計領域，可選項很是多，大部分人使用的是 Google Analytics ，不過因爲這個產品的面向用戶主要是國內的用戶，所以我更傾向選擇加載速度更快的產品，最終我選擇的是來自騰訊的移動應用分析（MTA），騰訊的移動應用分析中，提供了 HTML5 產品的接入，所以能夠完成 TLDR 的統計。

在 Crash 收集方面，你們用的比較廣泛的是 Sentry.io ，不過由於 Linux 中國並無足夠多的產品業務須要使用 Sentry 來收集 Crash ，所以，一直使用的是官網的無償使用版本。一樣由於網絡加載速度的緣由，選擇使用了國內的競品 —— FunDebug。

接入工具

騰訊移動應用分析

騰訊移動應用分析的接入並不複雜，首先，你須要登錄其官網，建立一個 HTML5 應用。

並在建立完成後，根據你本身的須要配置相應的能力，這裏我開啓了全部的數據統計，用以支持後續的產品迭代決策。

配置完成後，你會得到具體的統計的代碼，接下來就能夠進行接入。

一個比較簡單的方法是直接將代碼複製，並粘貼到 public/index.html 中，從而實現統計。不過，這樣嵌入會致使若是須要自定義統計時，會沒法經過 ESLint 的規則，所以我選擇了第二種方式，使用 Vue 插件的方式接入。

使用 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 的應用管理後臺獲取。

而下方的配置，則根據你本身的實際需求選擇開啓便可。

對應 COMMIT：https://github.com/LCTT/tldr....

FunDebug

Fundebug 是我以前在開發小程序的時候用過的 Crash 收集應用。此次恰好也用上了。

由於預算的問題，這裏我使用的是免費版本，有幾個 tab 是看不到的，可是基本的 Debug 也是夠用了。

Fundebug 的安裝也很簡單， 訪問 https://www.fundebug.com/ ,註冊帳號， 並建立一個項目，你會得到一個 API Key，後續你可使用這個 API Key 來初始化你的項目。

執行以下命令來安裝依賴

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

對應 COMMIT：https://github.com/LCTT/tldr....

優化

在開發的過程當中常常會出現 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 統計，避免了開發環境的數據干擾。

對應 COMMIT：https://github.com/LCTT/tldr....

總結

在這篇文章中，介紹了兩個服務，分別是用於統計的騰訊移動分析 MTA和用於作 Crash 收集的 fundebug，介紹了應該如何在 Vue 應用中接入這兩種服務。此外，還根據實際的需求，優化了兩個統計的位置，確保產品在開發環境不會工做，從而避免了影響到咱們統計數據的準確性。

這篇文章涉及到的代碼你均可以在 https://github.com/LCTT/tldr.... 看到