摘要：我創(chuàng)建了一個(gè)名為的項(xiàng)目。錯(cuò)誤信息查看在后臺(tái)找到我們的項(xiàng)目，點(diǎn)擊進(jìn)去就能看到多了一條錯(cuò)誤信息。它由以下幾部分組成，分別是協(xié)議公鑰私鑰主機(jī)路徑一般為空項(xiàng)目。

Sentry 是一個(gè)開(kāi)源的錯(cuò)誤追蹤工具，可以幫助開(kāi)發(fā)人員實(shí)時(shí)監(jiān)控和修復(fù)系統(tǒng)中的錯(cuò)誤。其專注于錯(cuò)誤監(jiān)控以及提取一切事后處理所需的信息;支持幾乎所有主流開(kāi)發(fā)語(yǔ)言(JS/Java/Python/php)和平臺(tái), 并提供了web來(lái)展示輸出錯(cuò)誤。
sentry官網(wǎng)：https://sentry.io/

sentry 是一個(gè)開(kāi)源的工具，可以自行搭建。
官方支持兩種安裝和運(yùn)行 Sentry 服務(wù)器的方法，Docker 和 Python。推薦使用 Docker。
當(dāng)然，對(duì)于剛開(kāi)始接觸 sentry 的同學(xué)，也可以直接使用官方提供的免費(fèi)服務(wù)，但是有一些限制。
下面先來(lái)介紹一下利用官方的免費(fèi)服務(wù)，在前端項(xiàng)目中如何使用 sentry。

首先需要在 sentry 的官網(wǎng)注冊(cè)一個(gè)賬號(hào)。注冊(cè)完選擇新建一個(gè)項(xiàng)目，sentry 支持多種框架，在其中選擇 vue 創(chuàng)建項(xiàng)目。我創(chuàng)建了一個(gè)名為test的項(xiàng)目。

創(chuàng)建項(xiàng)目頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)到如何配置vue項(xiàng)目頁(yè)面。接下來(lái)就按照指引在vue代碼里引入 sentry?？梢酝ㄟ^(guò) cdn 或者 npm 引入。我們采用 npm 引入。引入的時(shí)候需要給 init 函數(shù)傳遞一個(gè) dsn 參數(shù)。這個(gè)參數(shù)唯一指定了我們剛才創(chuàng)建的項(xiàng)目，在創(chuàng)建項(xiàng)目的時(shí)候系統(tǒng)會(huì)自動(dòng)生成。如果不傳這個(gè)參數(shù)，sentry 不會(huì)發(fā)送錯(cuò)誤。

// main.js
import * as Sentry from "@sentry/browser";
import * as Integrations from "@sentry/integrations";
// 在生產(chǎn)環(huán)境中讓sentry報(bào)錯(cuò)
process.env.NODE_ENV === "production" && Sentry.init({
  dsn: "https://1111a5bc59b54778b75f4e3a92f2e462@sentry.io/1447145",
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,
    }),
  ],
});

在項(xiàng)目跟目錄下增加.sentryclirc文件，其中的token可以在左上角頭像里的api keys里面獲取。

[auth]
token="your token"

[defaults]
url = https://sentry.io
org = "your org"
project = test

然后我們?cè)诖a里制造一個(gè)錯(cuò)誤，就可以讓 sentry 捕獲了。本地如何模擬線上環(huán)境訪問(wèn)dist下的文件呢？需要裝一個(gè) http-server ，在dist文件夾下啟動(dòng)一個(gè)http服務(wù)就可以了。

npm i http-server 
cd dist
http-server -p 8888

注意：sentry捕獲到的錯(cuò)誤不會(huì)在打印在控制臺(tái)中。

在network中可以看到，sentry 發(fā)送了一個(gè)錯(cuò)誤請(qǐng)求，請(qǐng)求參數(shù)如下：

接下來(lái)我們就可以在后臺(tái)看到剛才上傳的錯(cuò)誤信息，同時(shí) sentry 也會(huì)給你的郵箱發(fā)送一封錯(cuò)誤郵件。

在后臺(tái)找到我們的test項(xiàng)目，點(diǎn)擊進(jìn)去就能看到多了一條錯(cuò)誤信息。

點(diǎn)擊信息可以進(jìn)入信息詳情進(jìn)行查看。

但是這個(gè)錯(cuò)誤信息是壓縮后的，不能定位到代碼的實(shí)際位置。使用意義不大，因此需要上傳 source-map。

上傳的方式有多種?？梢酝ㄟ^(guò) sentry-cli 通過(guò)命令行的方式來(lái)上傳 source-map，但是需要手動(dòng)上傳。也可以采用 webpack-plugin 這個(gè)插件，可以在 build 的同時(shí)自動(dòng)上傳 source-map。本文采用自動(dòng)上傳策略。

項(xiàng)目配置：

// webpack.prod.conf
const SentryCliPlugin = require("@sentry/webpack-plugin");
plugins:[
    new SentryCliPlugin({
        include: "./dist",
        release: process.env.RELEASE_VERSION,
        configFile: "sentry.properties"
    })
]

// main.js
Sentry.init({
    dsn: "https://4ec86726f2ba40338f66837c6b959eed@sentry.io/1447158",
    integrations: [
        new Integrations.Vue({
            Vue,
            attachProps: true
        }),
        new Integrations.RewriteFrames()
    ],
    release: process.env.RELEASE_VERSION
});

// prod.env.js
"use strict";
const release = "test-1";
process.env.RELEASE_VERSION = release;
module.exports = {
    NODE_ENV: ""production"",
    RELEASE_VERSION: `"${release}"`
};

需要保證 plugins 和 Sentry.init 兩個(gè)配置中的 release 版本號(hào)相同，這樣的話 sentry 才能將 source-map 文件一一對(duì)應(yīng)上。
修改完之后我們重新build一下項(xiàng)目，build的過(guò)程比較慢：

之后我們?nèi)ズ笈_(tái)可以看見(jiàn)在版本中多了一個(gè) test-1 版本，也就是我們剛剛上傳的版本。

點(diǎn)進(jìn)去可以看見(jiàn)我們剛才上傳的 source-map 文件。

這時(shí)我們重新觸發(fā)一次錯(cuò)誤，就可以看到具體的出錯(cuò)位置了。

在設(shè)置->集成里面可以設(shè)置 sentry 關(guān)聯(lián)各種服務(wù)，如 github、jira 等。關(guān)聯(lián)上 github 后，可以直接為該異常創(chuàng)建issue。

這樣在該異常的詳情頁(yè)就可以創(chuàng)建issue到 sentry 這個(gè)倉(cāng)庫(kù)了。

創(chuàng)建時(shí)可以選擇倉(cāng)庫(kù)，名稱，詳情及指定給誰(shuí)：

打開(kāi) github ，在 sentry 這個(gè)倉(cāng)庫(kù)下，發(fā)現(xiàn)多了一個(gè)issue，就是剛才我們創(chuàng)建的。

在我們向 github 提交 commit 的時(shí)候，如果加上了異常的id，例如這樣：

git commit -m "Fixes TEST-3"

這樣在下次發(fā)版 build 的時(shí)候，sentry 會(huì)自動(dòng)將該異常的狀態(tài)從 unresolved 變成 resolved，并會(huì)給出本次提交的 diff 地址。

官方給出的有兩種方法可以自行搭建sentry：

python

docker

推薦使用docker。下面來(lái)介紹一下通過(guò)docker如何搭建sentry。

首先需要下載docker
mac桌面版地址：https://hub.docker.com/editions/community/docker-ce-desktop-mac

其中已經(jīng)集成了docker命令行、docker-compose等。

然后需要去github拉取 Sentry On-Premise，這個(gè)是官方提供的通過(guò)docker安裝sentry的倉(cāng)庫(kù)，里面介紹了如何一步一步搭建sentry。

創(chuàng)建服務(wù)步驟：

cd onpremise
// 創(chuàng)建本地?cái)?shù)據(jù)庫(kù)
docker volume create --name=sentry-data && docker volume create --name=sentry-postgres
// 創(chuàng)建環(huán)境配置文件
cp -n .env.example .env 
// 構(gòu)建docker服務(wù)
docker-compose build
// 產(chǎn)生秘鑰，將其作為SENTRY_SECRET_KEY加入到.env文件中
// 創(chuàng)建數(shù)據(jù)庫(kù)，用交互式的提示生成管理員賬號(hào)
docker-compose run --rm web upgrade
// 啟動(dòng)所有服務(wù)
docker-compose up -d 

如果過(guò)程一切正常的話，現(xiàn)在訪問(wèn)localhost:9000就能看到sentry的登錄頁(yè)面了，用剛才生成的管理員賬號(hào)密碼登錄即可。

以后的操作就跟上面介紹的一樣了。

利用本地搭建的sentry創(chuàng)建項(xiàng)目的時(shí)候，發(fā)現(xiàn)dsn那一欄是空的，系統(tǒng)并沒(méi)有自動(dòng)生成。需要自己拼接這個(gè)dsn。它由以下幾部分組成，分別是協(xié)議、公鑰、私鑰、主機(jī)、路徑（一般為空）、項(xiàng)目id。

"{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}"
//類似這樣，把它放在sentry.init中的dsn即可
http://4cf10206ef27409bbb64f68b:a67a0eb5513e43ab883af3f3@localhost:9000/2