簡介
新時代的前端系統上線之後，通常會遇到以下幾個問題
前端報錯，用戶使用功能異常，沒有通知開發人員的渠道
瞭解到報錯後，因爲前端做代碼混淆和壓縮，刪除 source map，沒有辦法準確定位錯誤位置
不清楚用戶的操作系統、瀏覽器、請求內容和存儲等信息，無法進行問題復現
上述問題目前有統一的解決方案，就是使用 web bug 埋點追蹤系統，目前開源免費好用的系統，就是今天要介紹的 sentry
sentry 的特性
在使用上，sentry 既可以直接在其網站https://sentry.io/中查看 bug 追蹤信息，也支持企業進行內部搭建
在功能上，sentry 支持
發送錯誤通知
給出客戶端相關信息，包括瀏覽器版本、操作系統和請求內容等
代碼版本（release 版本號）
上傳代碼源文件（source map）
如何使用 sentry
下面將以一個 React 項目爲例，講解如何使用 sentry
1、註冊賬號並創建項目
訪問 sentry 的官網：https://sentry.io/
註冊的時候會創建組織，註冊完成後新建項目，選擇 React 創建即可
創建後會有一個官方指導，該如何使用代碼
按照步驟操作即可，其中要注意 dsn 的添加，這個是每個項目特有的，不要放錯
其中默認界面是英文的，並且時區不是中國的時區，會有 8 個小時的時差，建議更改過來，更改位置在用戶設置的具體項目設置中
2、前端啓動
首先安裝 sentry 的瀏覽器包
$ yarn add @sentry/browser
然後初始化項目並且拋出一個錯誤
import React from 'react';
import ReactDOM from 'react-dom';
import * as Sentry from '@sentry/browser';
import App from './App';
Sentry.init({dsn: "your dsn"});
ReactDOM.render(<App />, document.getElementById('root'));
然後在 App 中加入了一個 button，並且點擊後會出現錯誤代碼，導致程序報錯
<button
onClick={() => {
const a = {}
// 此處同樣會報錯
console.log(a.name.name)
// 拋出錯誤
new Error('拋出錯誤')
}}
>
throw error
</button>
此時啓動該項目，然後點擊 button，查看 console 就可以發現出現了報錯
此時查看 chrome 的 network，就會發現 sentry 已經發了一個請求出去，通知我們的系統了
然後再去我們的系統查看，在問題導航處就會發現一個新的 issue
打開後可以看到詳細信息，其中會發現並不能準確的找到源代碼的錯誤位置，只是會有整個錯誤的路徑和出錯人的操作系統，瀏覽器信息等
如果連續觸發幾次這個錯誤，會發現只要是同一個錯誤，錯誤條數並不會增加，只是在事件和用戶數量上做增加
3、設置發佈項目的 release 版本號
上文提到目前爲止並沒有辦法判斷用戶錯誤出現的具體的源代碼位置，原因就是 source map 沒有上傳 sentry
而設置 release 版本號本質是爲了後續的 source map 上傳做準備，用來區分不同版本的 source map，好進行報錯的代碼映射
通過下述方式指定 release
import * as Sentry from '@sentry/browser'
Sentry.init({
release: 'test004',
dsn: 'https://<key>@sentry.io/<project>'
})
其中test004就是 release 版本號，如果此時點擊 button 觸發異常，查看 sentry 就會看到版本的位置出現了內容，在沒有指定 release 版本號的時候這裏顯示的是n/a
4、source map 上傳
只有在開發環境，我們纔會使用 sourceMap，線上環境如果加載 sourceMap，不僅影響用戶體驗，而且也會暴露源代碼。
下面講一下上傳 sourceMap 到 sentry 上的幾種方式
sentry-cli 命令行上傳
首先安裝 sentry-cli
$ yarn global add sentry-cli
然後修改生成的~/.sentryclirc，必須將 org 和 project 補充上去
[auth]
token=<token>
[defaults]
url=https://sentry.io/
org=mdnice
project=test004
然後將應用進行打包，生成 build 目錄，通過指令將目錄中的.map 文件上傳
$ sentry-cli releases files <release名稱> upload-sourcemaps --url-prefix <線上資源URI> <打包出來的js文件所在目錄>
$ sentry-cli releases files test004 upload-sourcemaps --url-prefix '~/static/js' './build/static/js'
成功後打開 sentry 控制檯的版本即可看到上傳的文件
此時再點擊 button 觸發異常，可以發現已經能夠映射到具體的代碼行位置了，這就是由於上傳 source map 的原因
通過 webpack 插件（@sentry/webpack-plugin）上傳
命令行的方式不夠工程化，官方有 webpack 插件可以使用
首先安裝下面兩個包
$ yarn add @sentry/cli
$ yarn add @sentry/webpack-plugin
然後再 webpack.config.js 代碼中配置如下代碼
const SentryPlugin = require('@sentry/webpack-plugin');
new SentryPlugin({
release: 'test004',
include: './build',
urlPrefix: '~/',
ignore: ['node_modules', 'webpack.config.js'],
})
這樣打包的時候即可直接上傳 sentry，不用再執行單獨的命令去做了
這個插件沒有刪除打包後文件.map 的配置項，如果要刪除需要自行處理
5、sentry 的其他功能
如果上述基礎功能不夠用的話，還有一些其他高級功能
配置 beforeSend，可以彈出對話框，讓用戶進行更詳細的信息反饋
Sentry.init({
dsn: "your dsn",
release: "test004",
beforeSend(event, hint) {
// Check if it is an exception, and if so, show the report dialog
if (event.exception) {
Sentry.showReportDialog({ eventId: event.event_id });
}
return event;
},
});
還有可以自定義 bug 上下文信息
Sentry.setUser({"email": "[email protected]"});
Sentry.setTag('api', 'api/list/get')
Sentry.setLevel('error');
Sentry.setExtra('data', {
req: {a:1},
res: {b:1},
header:headers
})
Sentry.captureException(new Error('throw new api'))
總結
sentry 是個很優秀的 bug 追蹤系統，爲上線應用獲取 bug 信息，隱藏 source map 有着極其重要的貢獻，也歡迎大家使用
覺得文章直擊靈魂，歡迎點擊在看和轉發
我就知道你在看！