今天主要說下兩款前端統計工具的使用，Sentry & Matomo。以下主要是統計代碼接入方式，因此使用前提是你已經在自己的服務器上搭建好了Sentry和Matomo的服務器
Sentry統計使用方法
Sentry是一個比較完善的錯誤統計日志系統，可以純前端調用，在錯誤日志中會記錄報錯內容、用戶客戶端信息以及用戶發生報錯的步驟（這部分功能在部分情況下會有缺失），如
從上圖可以看到，sentry對錯誤信息的統計可以說十分細致了，這對於debug工作來說簡直神器，可能更好更快的復現問題，進而快速解決問題。sentry的使用主要分兩步
1、添加站點，獲取統計代碼
--- 服務器上新增project
--- 獲取追蹤代碼DSN
這個DSN算是一個加密的統計地址吧，直接關聯了具體的項目，每個地址都是唯一的。我們可以使用基於瀏覽器的SDK進行接入，比如raven-js
2、添加統計代碼
以下以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/clients/javascript/
Matomo/piwik統計添加方法
Matomo是類似於百度統計、友盟統計的一個用戶訪問統計站點。主要用於統計用戶訪問日志，分析用戶行為等方面，偏運營型輔助統計，以便於運營人員根據實時的用戶訪問數據來指定更加合適的營銷策略。優勢在於可以把整個統計站點搭建到我們自己的服務器上，避免由於用戶訪問數據存儲在第三方服務器上而帶來的一些安全問題。以下簡要說一下Matomo統計代碼添加的步驟，當然前提是你已經在自己的服務器上搭建好了基礎服務，主要分兩步：
1、在Matomo上創建網站
新建網站：
編輯內容
這個項目網址就是你要統計的目標網址，統計代碼添加后凡以此開頭的都會被記錄到Matomo，添加后就會產生如下網站記錄，注意那個ID后面的統計代碼里面都要用到
2、添加統計代碼
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基礎服務的搭建的內容，如果大家有興趣可以繼續關注以下，心急的同學就先去翻一下官網吧～～