感謝

感謝計(jì)蒜客俞總提出的寶貴的意見
感謝Vue Land聊天室中Andreas大神的支持

前言

在項(xiàng)目中，我們使用Vue來做前端部分的開發(fā)。Vue是一套非常領(lǐng)先的漸進(jìn)式前端框架，配合Webpack可以做到非常好的前端工程化設(shè)計(jì)。在寫到測(cè)試環(huán)節(jié)時(shí)，我們發(fā)現(xiàn)由于我們的前端部分主要承擔(dān)顯示的任務(wù)，不涉及過多的邏輯處理，因此傳統(tǒng)的單元測(cè)試其實(shí)并沒有什么太大的價(jià)值。經(jīng)過研究發(fā)現(xiàn)Webpack里主要集成了兩種測(cè)試方法，一種是Unit test，另一種是e2e test。前者主要測(cè)試邏輯實(shí)現(xiàn)，后者主要測(cè)試界面顯示。但是其實(shí)在我們的項(xiàng)目中，這些都不是很重要。于是我們選擇放棄測(cè)試部分，選用Sentry進(jìn)行錯(cuò)誤日志的捕捉。這樣在前端運(yùn)行發(fā)生錯(cuò)誤的時(shí)候，我們可以及時(shí)獲取到錯(cuò)誤并進(jìn)行分析。

注冊(cè)

首先打開網(wǎng)站Sentry，點(diǎn)擊頁面上的“Start using Sentry”按鈕進(jìn)入注冊(cè)頁面。

注冊(cè)頁面

需要說明的是，Sentry服務(wù)是可以配置在你個(gè)人的服務(wù)器上的，具體配置請(qǐng)自行搜索教程，本文僅針對(duì)使用默認(rèn)配置在Sentry.io上的服務(wù)進(jìn)行講解。

配置教程

初步配置

在Vue 2.x中，Vue官方加入了errorHandler用來捕捉產(chǎn)生的錯(cuò)誤并進(jìn)行處理。Sentry的Vue集成便使用了這種方式進(jìn)行官方集成(官方文檔)。這里針對(duì)Webpack的配置進(jìn)行講解。
首先使用npm安裝相關(guān)包。

npm install raven-js --save

然后在你編寫頁面的app.js（或者其他名稱的主js文件）中加入以下代碼。

import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

Raven
    .config('your DSN')
    .addPlugin(RavenVue, Vue)
    .install();

這里的DSN指的是Sentry為每個(gè)項(xiàng)目配置的用來接入服務(wù)的鏈接，有些類似于git服務(wù)。每個(gè)DSN由以下六個(gè)部分組成：

{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}

當(dāng)然我們不需要仔細(xì)尋找每個(gè)部分都是什么。在官方的配置頁面中已經(jīng)給出了你的項(xiàng)目應(yīng)該使用的DSN地址。在“你的項(xiàng)目”右上角進(jìn)入“項(xiàng)目設(shè)置”，點(diǎn)擊左側(cè)的客戶端密鑰(DSN)即可顯示當(dāng)前項(xiàng)目使用的DSN地址。我們?cè)诖a中加入的DSN就是圖中第二行“DSN(Public)”中的地址。當(dāng)然如果你覺得一個(gè)密鑰不夠的話可以通過右上角生成多個(gè)密鑰。

DSN密鑰

錯(cuò)誤信息

這里有兩個(gè)需要注意的事情：

1. 上面對(duì)于Sentry的配置代碼需要放在Vue配置之前。
2. 當(dāng)你使用npm run dev運(yùn)行時(shí)，Vue會(huì)主動(dòng)捕獲所有的錯(cuò)誤并將其輸出到控制臺(tái)，這使得調(diào)試錯(cuò)誤十分方便，但也使得Sentry無法捕獲到錯(cuò)誤。

Source Map使用

當(dāng)你成功使用上述方式配置并捕獲到錯(cuò)誤是，你會(huì)發(fā)現(xiàn)你所捕獲到的錯(cuò)誤代碼根本看不懂。這是因?yàn)樵谀J(rèn)的Webpack配置中對(duì)于打包出來的代碼進(jìn)行了丑化處理以及Babel轉(zhuǎn)義，從而使得代碼看上去并不直觀。這樣的錯(cuò)誤信息顯然對(duì)于我們理解錯(cuò)誤原因沒有任何作用。這里就要使用Sentry提供的source map服務(wù)將壓縮過后的js代碼轉(zhuǎn)化為原有的js代碼從而更有效的進(jìn)行錯(cuò)誤處理。

Webpack有著非常多的source map模式，我們使用在生產(chǎn)環(huán)境下默認(rèn)的“source-map”模式。我們可以發(fā)現(xiàn)在dist/static/js文件夾中每一個(gè)js文件都有著相對(duì)應(yīng)的map文件。我們需要做的就是將這些map文件上傳并將其與服務(wù)器上的js文件進(jìn)行對(duì)應(yīng)從而還原出原有的js文件。

官方推薦使用上傳文件的方式來使得Sentry可以獲取到map文件(官方文檔)。在下面我們介紹Webpack下如何進(jìn)行配置

Sentry Cli

首先安裝Sentry Cli。這里我們可以安裝在全局，也可以安裝在項(xiàng)目里。

npm install sentry-cli-binary -g

然后我們需要通過官方獲取一個(gè)token用來登錄。點(diǎn)擊頁面左下角頭像-API進(jìn)入token獲取頁面。點(diǎn)擊右下角按鈕生成新的token。

獲取token界面

生成token的時(shí)候要記得把project:write勾選，其余采用默認(rèn)配置即可

然后我們通過命令行登錄，輸入剛才生成的token即可。

sentry-cli login

然后我們需要對(duì)項(xiàng)目創(chuàng)建一個(gè)release。

sentry-cli releases -o <your organization> -p <your project> new <release version>

然后就可以通過sentry-cli上傳map文件了。

sentry-cli releases -o <your organization> -p <your project> files <release version> \
upload-sourcemaps --url-prefix <your domain assets url> <local assets directory>

其中<your domain assets url>指的是js文件在你服務(wù)器上可以訪問到的位置前綴，<local assets directory>指的是js文件在你本地文件夾的位置。這個(gè)位置不必特別精確，sentry-cli可以自行尋找相應(yīng)的文件并上傳。

與此同時(shí)，你需要將Raven的配置做一些更改,否則將會(huì)出現(xiàn)一些識(shí)別問題。

import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

Raven
    .config('your DSN', {release: 'release version'})
    .addPlugin(RavenVue, Vue)
    .install();

這樣你就可以在Sentry捕獲到錯(cuò)誤的時(shí)候查看壓縮前的代碼了。

注意：

1. 由于Sentry服務(wù)是依賴release版本號(hào)區(qū)分map文件的，因此需要確保版本號(hào)對(duì)應(yīng)。版本號(hào)可以是“1.0.0”這樣的常規(guī)版本號(hào)，也可以是一個(gè)哈希串的一部分。
2. 你在網(wǎng)頁上填寫的項(xiàng)目名稱可能含有大寫字母，但是上面的參數(shù)必須是小寫字母。具體應(yīng)該填什么可以參考你的項(xiàng)目網(wǎng)頁URL部分。

Sentry Webpack Plugin

Sentry官方同樣提供了Webpack插件可以實(shí)現(xiàn)在npm run build的時(shí)候自行上傳相應(yīng)的文件，避免每次都需要輸入sentry-cli的麻煩。
首先通過命令行安裝Sentry Webpack Plugin。

npm install @sentry/webpack-plugin

然后在你的webpack.prod.conf.js中將此插件加入plugins數(shù)組即可。具體配置方法可以參考這里。為此我們可能需要編寫一個(gè)名為.sentryclirc的文件來配置該工具，記得在.gitignore中加入這個(gè)文件，因?yàn)樵撐募袝?huì)包含你的項(xiàng)目的token，該文件的語法規(guī)則查看這里。

結(jié)尾

本文僅提供Sentry服務(wù)的入門教程，想要更深入地了解可以進(jìn)入官方網(wǎng)站文檔頁面查看更加細(xì)致的完整文檔。Sentry同樣可以適用于后端的信息監(jiān)控，其能力還是非常強(qiáng)大的。

配置上有什么問題可以在評(píng)論區(qū)留言。同為前端新手，共同學(xué)習(xí)，共同進(jìn)步。