前端異常日志監控 - 使用Sentry

背景

現在的前端項目越來越復雜，在不同的客戶端會產生各種在開發人員機器上不會出現的問題。當用戶報告一個問題給開發人員的時候，開發人員無法直接定位問題。在此前，聽過一次鵝廠的前端人員，他們對QQ里面的網頁監控的一個講座，深有感觸。但是鵝廠是自己開發了一系統，從開發到運維到錯誤分析，是一整套的體系。對於我們的項目，我們不可能選擇自己開發，在網上找到一個開源的產品 [ Sentry ]，基本體現了鵝廠的那套思路。

關於 Sentry

Sentry 官網
以下是官網首頁關於Sentry的介紹
Stop hoping your users will report errors
停止期待您的用戶反饋錯誤
Open-source error tracking that helps developers monitor and fix crashes in real time. Iterate continuously. Boost efficiency. Improve user experience
幫助開發人員實時監控和修復錯誤，快速迭代，提高效率。提升用戶體驗。

不過多解釋sentry產品，直接開始接入sentry, 非常簡單。 sentry本身是有雲服務的，可以讓開發者快速體驗，接入。雲服務如果長期使用，是需要收費的，如果是體驗就注冊體驗下即可，如果要項目用，可以自己搭建一個sentry 服務，參考 搭建自己的 sentry 服務。

接入Sentry

本項目是使用webpack打包的工程，如不使用webpack的，參考官方文檔，非常簡單。

1. 安裝sentry的javascript的客戶端npm包 npm install raven-js --save ; 參考 Installation
2. 在JS中調用和配置; 參考Configuration

import Raven from 'raven-js';

Raven
    .config('http://[e-mail]/10')
    .install();


window.onload = function(){
    document.getElementById('container').addEventListener('click',e => {
        console.log(window['aaa'].aaa) //此處window['aaa']為undifine，所以這里一定會報錯
    }, false)
}

Raven.config中的值，叫做dsn(客戶端密匙)，可在項目的設置界面找到。如果看不到項目的設置菜單，可能是你賬號權限不夠。

查看效果

訪問網頁，點擊按鈕后，會產生JS異常，很快會收到來自sentry郵件通知,點開即能看到詳細的錯誤，包括：

1. 客戶IP地址
2. 瀏覽器和操作系統
3. 訪問的地址
4. 錯誤的信息和調用堆棧
   

在上圖中，可以看見錯誤。這個和我們源代碼的異常信息是一致的。但是在下方的JS調用堆棧中，對應的是壓縮后JS文件位置，和我們源代碼無法對應上，無法直接的幫助我們排查和定位問題。
要錯誤對應上我們源代碼的位置，sentry要求我們上傳JS壓縮時的sourcemaps。

上傳 SourceMaps 對錯誤進行定位

如何產生SourceMap, 如果不熟悉的話，可以參考Sentry Generating Source Maps 文檔，有各類框架如何產生source maps.
Sentry 有多種方式上傳SourceMaps，release API、Sentry CLI、sentry-webpack-plugin，詳情參考Uploading Source Maps to Sentry, 我的工程中用的是webpack包，同時打包編譯發布的過程是在CI中完成的，所以首先 sentry-webpack-plugin。

使用 Sentry Webpack Plugin 配合Webpack完成構建時上傳SourceMaps

插件的使用方式，參考官方文檔，以下截取文中內容的步驟：

1. Start by creating a new authentication token under [Account] > API.
2. Ensure you have project:write selected under scopes.
3. Install @sentry/webpack-plugin using npm
4. Create .sentryclirc file with necessary config (see Sentry Webpack Plugin docs below)
5. Update your webpack.config.json

獲取API Token

登錄sentry，在賬號 -> API 中，

1. 

2. 

3. 請確保勾選了 project:write

安裝sentry-webpack-plugin插件

npm install @sentry/webpack-plugin @sentry/cli --dev-save

創建.sentryclirc文件並配置

在項目的根目錄下，創建一個文件.sentryclirc，並配置sentry cli需要的內容，以下是我的配置文件

[defaults]
url = http://sentry.io/
<!-- 此處可以從你的sentry.io的全路徑看出，如：https://sentry.io/此處是你的org/此處是你的project/ -->
org = yunxun
project = qrcode

[auth]
token = cbf0ec5f33fa478184194ad32701b06ccb92451b7c5742d6b1f1c70f95e511d2

更新webpack.config.json

const SentryPlugin = require('@sentry/webpack-plugin');

module.exports = {
    // ... other config above ...
    plugins: [
      new SentryPlugin({
        release: process.env.RELEASE,
        include: './dist',
        ignore: ['node_modules', 'webpack.config.js'],
      })
    ]
};

以上步驟編譯完成后，可以在Sentry的項目里面看到我們上傳的源文件和SourceMap文件

根據上圖可以看到，版本號，這個對於的在webpack插件中的release。也是說，sentry可以幫你管理多個版本的sourceMaps。
同時在這個版本上，可以看到有多少個問題，最后一個問題的時間。

Sourmap 上傳后的錯誤效果

上述步驟完成后，在回到我們的頁面，重現一次錯誤，然后看看在sentry有什么不同。

看圖中比之前多出了幾個功能：

1. 多出版本信息
2. 多出原始、最小化的標簽
3. 這次的錯誤提示，不是壓縮后JS的提示，而是看起來和源代碼一樣

在這種方式下，可以直觀，高效的定位排查問題。

參考

1. Sentry 官網 Javascript 整合
2. 前端錯誤日志監控——Sentry使用教程
3. SPA項目實現前端錯誤監控及定位錯誤
4. vue中如何使用sentry對錯誤日志進行監控
5. 搭建自己的 sentry 服務