新時代的前端系統(tǒng)上線之后，通常會遇到以下幾個問題前端報錯，用戶使用功能異常，沒有通知開發(fā)人員的渠道
了解到報錯后，因為前端做代碼混淆和壓縮，刪除 source map，沒有辦法準確定位錯誤位置不清楚用戶的操作系統(tǒng)、瀏覽器、請求內(nèi)容和存儲等信息，無法進行問題復(fù)現(xiàn)
上述問題目前有統(tǒng)一的解決方案，就是使用 web bug 埋點追蹤系統(tǒng)，目前開源免費好用的系統(tǒng)，就是今天要介紹的 sentry
sentry 的特性
在使用上，sentry 既可以直接在其網(wǎng)站https://sentry.io/中查看 bug 追蹤信息，也支持企業(yè)進行內(nèi)部搭建
在功能上，sentry 支持發(fā)送錯誤通知給出客戶端相關(guān)信息，包括瀏覽器版本、操作系統(tǒng)和請求內(nèi)容等代碼版本（release 版本號）上傳代碼源文件（source map）
如何使用 sentry
下面將以一個 React 項目為例，講解如何使用 sentry
1、注冊賬號并創(chuàng)建項目
訪問 sentry 的官網(wǎng)：https://sentry.io/
注冊的時候會創(chuàng)建組織，注冊完成后新建項目，選擇 React 創(chuàng)建即可
創(chuàng)建后會有一個官方指導(dǎo)，該如何使用代碼
按照步驟操作即可，其中要注意 dsn 的添加，這個是每個項目特有的，不要放錯
其中默認界面是英文的，并且時區(qū)不是中國的時區(qū)，會有 8 個小時的時差，建議更改過來，更改位置在用戶設(shè)置的具體項目設(shè)置中
2、前端啟動
首先安裝 sentry 的瀏覽器包
$ yarn add @sentry/browser
然后初始化項目并且拋出一個錯誤
importReactfrom'react';
importReactDOMfrom'react-dom';
import*asSentryfrom'@sentry/browser';
importAppfrom'./App';
Sentry.init({dsn:"your dsn"});
ReactDOM.render(, document.getElementById('root'));
然后在 App 中加入了一個 button，并且點擊后會出現(xiàn)錯誤代碼，導(dǎo)致程序報錯
<button
onClick={() => {
const a = {}
// 此處同樣會報錯
console.log(a.name.name)
// 拋出錯誤
new Error('拋出錯誤')
}}
>
throw error
</button>
此時啟動該項目，然后點擊 button，查看 console 就可以發(fā)現(xiàn)出現(xiàn)了報錯
此時查看 chrome 的 network，就會發(fā)現(xiàn) sentry 已經(jīng)發(fā)了一個請求出去，通知我們的系統(tǒng)了
然后再去我們的系統(tǒng)查看，在問題導(dǎo)航處就會發(fā)現(xiàn)一個新的 issue
打開后可以看到詳細信息，其中會發(fā)現(xiàn)并不能準確的找到源代碼的錯誤位置，只是會有整個錯誤的路徑和出錯人的操作系統(tǒng)，瀏覽器信息等
如果連續(xù)觸發(fā)幾次這個錯誤，會發(fā)現(xiàn)只要是同一個錯誤，錯誤條數(shù)并不會增加，只是在事件和用戶數(shù)量上做增加
3、設(shè)置發(fā)布項目的 release 版本號
上文提到目前為止并沒有辦法判斷用戶錯誤出現(xiàn)的具體的源代碼位置，原因就是 source map 沒有上傳 sentry
而設(shè)置 release 版本號本質(zhì)是為了后續(xù)的 source map 上傳做準備，用來區(qū)分不同版本的 source map，好進行報錯的代碼映射
通過下述方式指定 release
import*asSentryfrom'@sentry/browser'
Sentry.init({
release:'test004',
dsn:'https://<key>@sentry.io/<project>'
})
其中test004就是 release 版本號，如果此時點擊 button 觸發(fā)異常，查看 sentry 就會看到版本的位置出現(xiàn)了內(nèi)容，在沒有指定 release 版本號的時候這里顯示的是n/a
4、source map 上傳
只有在開發(fā)環(huán)境，我們才會使用 sourceMap，線上環(huán)境如果加載 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
然后將應(yīng)用進行打包，生成 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 觸發(fā)異常，可以發(fā)現(xiàn)已經(jīng)能夠映射到具體的代碼行位置了，這就是由于上傳 source map 的原因
通過 webpack 插件（@sentry/webpack-plugin）上傳
命令行的方式不夠工程化，官方有 webpack 插件可以使用
首先安裝下面兩個包
$ yarn add @sentry/cli
$ yarn add @sentry/webpack-plugin
然后再 webpack.config.js 代碼中配置如下代碼
constSentryPlugin =require('@sentry/webpack-plugin');
newSentryPlugin({
release:'test004',
include:'./build',
urlPrefix:'~/',
ignore: ['node_modules','webpack.config.js'],
})
這樣打包的時候即可直接上傳 sentry，不用再執(zhí)行單獨的命令去做了
這個插件沒有刪除打包后文件.map 的配置項，如果要刪除需要自行處理
5、sentry 的其他功能
如果上述基礎(chǔ)功能不夠用的話，還有一些其他高級功能
配置 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": "xx@xx.cn"});
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'))
總結(jié)
sentry 是個很優(yōu)秀的 bug 追蹤系統(tǒng)，為上線應(yīng)用獲取 bug 信息，隱藏 source map 有著極其重要的貢獻，也歡迎大家使用
