前端統計利器：Sentry & Matomo

今天主要說下兩款前端統計工具的使用，Sentry & Matomo。如下主要是統計代碼接入方式，所以使用前提是你已經在本身的服務器上搭建好了Sentry和Matomo的服務器

Sentry統計使用方法

Sentry是一個比較完善的錯誤統計日誌系統，能夠純前端調用，在錯誤日誌中會記錄報錯內容、用戶客戶端信息以及用戶發生報錯的步驟（這部分功能在部分狀況下會有缺失），如

從上圖能夠看到，sentry對錯誤信息的統計能夠說十分細緻了，這對於debug工做來講簡直神器，可能更好更快的復現問題，進而快速解決問題。sentry的使用主要分兩步

一、添加站點，獲取統計代碼

--- 服務器上新增project


--- 獲取追蹤代碼DSN

這個DSN算是一個加密的統計地址吧，直接關聯了具體的項目，每一個地址都是惟一的。咱們可使用基於瀏覽器的SDK進行接入，好比raven-js

二、添加統計代碼

如下以raven-js爲例

import Raven from 'raven-js'
Raven.config('https://123456@a.test.com/16', {
    whitelistUrls: [/test\.com/, /atest\.com/],
    ignoreErrors: [
        /^Script error\.?$/,
        /undefined is not an object$/,
        /undefined is not a function$/,
        'null is not an object evaluating \'document',
        'TypeError: [object HTMLCollection] is not iterable!'
    ]
}).install()

其中核心就是Raven.config(url).install()了，而在config對象中，除了url，Raven還提供了一系列的參數來增強統計功能的實現，好比咱們使用的白名單和錯誤過濾名單等等。有興趣的同窗能夠去翻一下sentry官網內容，https://docs.sentry.io/client...

---

Matomo/piwik統計添加方法

Matomo是相似於百度統計、友盟統計的一個用戶訪問統計站點。主要用於統計用戶訪問日誌，分析用戶行爲等方面，偏運營型輔助統計，以便於運營人員根據實時的用戶訪問數據來指定更加合適的營銷策略。優點在於能夠把整個統計站點搭建到咱們本身的服務器上，避免因爲用戶訪問數據存儲在第三方服務器上而帶來的一些安全問題。如下簡要說一下Matomo統計代碼添加的步驟，固然前提是你已經在本身的服務器上搭建好了基礎服務，主要分兩步：

一、在Matomo上建立網站

新建網站：

編輯內容

這個項目網址就是你要統計的目標網址，統計代碼添加後凡以此開頭的都會被記錄到Matomo，添加後就會產生以下網站記錄，注意那個ID後面的統計代碼裏面都要用到

二、添加統計代碼

Vue的方式

import Vue from 'vue'
import VueMatomo from 'vue-matomo'
// matomo用戶統計--相似於友盟
Vue.use(VueMatomo, {
    // 這裏配置你本身的piwik服務器地址和網站ID
    host: 'https://bayes.test.com/piwik',
    siteId: 412,
    // 根據router自動註冊
    router: router,
    // 是否須要在發送追蹤信息以前請求許可
    // 默認false
    requireConsent: false,
    // 是否追蹤初始頁面
    // 默認true
    trackInitialView: true,
    // 最終的追蹤js文件名
    // 默認 'piwik'
    trackerFileName: 'piwik'
})

純Js的方式

<!-- Matomo -->
<script type="text/javascript">
  var _paq = _paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//bayes.test.com/piwik/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '412']); // 注意這裏的setSiteId，後面的數字就是你的網站id，在matomo網站上能夠查到
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->

除此之外，Matomo還提供了不少其它方式，有須要的同窗能夠本身去翻一下官網集成部分的內容：https://matomo.org/integrate/

古語云：工具善其事，必先利其器，一個好的工具對於提升開發效率來講絕對是很是有用的，你們還有什麼工具利器，歡迎交流。

---

今天是一個交流羣的朋友Robin問到有什麼好的工具推薦，才寫了這些東西，後面我會在寫一寫關於sentry和matomo基礎服務的搭建的內容，若是你們有興趣能夠繼續關注如下，心急的同窗就先去翻一下官網吧～～