感謝
感謝計(jì)蒜客俞總提出的寶貴的意見
感謝Vue Land聊天室中Andreas大神的支持
前言
在項(xiàng)目中，我們使用Vue來做前端部分的開發(fā)尸执。Vue是一套非常領(lǐng)先的漸進(jìn)式前端框架，配合Webpack可以做到非常好的前端工程化設(shè)計(jì)拓型。在寫到測試環(huán)節(jié)時(shí)尽超，我們發(fā)現(xiàn)由于我們的前端部分主要承擔(dān)顯示的任務(wù)官撼，不涉及過多的邏輯處理，因此傳統(tǒng)的單元測試其實(shí)并沒有什么太大的價(jià)值似谁。經(jīng)過研究發(fā)現(xiàn)Webpack里主要集成了兩種測試方法傲绣，一種是Unit test，另一種是e2e test巩踏。前者主要測試邏輯實(shí)現(xiàn)秃诵，后者主要測試界面顯示。但是其實(shí)在我們的項(xiàng)目中塞琼，這些都不是很重要菠净。于是我們選擇放棄測試部分，選用Sentry進(jìn)行錯(cuò)誤日志的捕捉彪杉。這樣在前端運(yùn)行發(fā)生錯(cuò)誤的時(shí)候毅往，我們可以及時(shí)獲取到錯(cuò)誤并進(jìn)行分析。
注冊
首先打開網(wǎng)站Sentry派近，點(diǎn)擊頁面上的“Start using Sentry”按鈕進(jìn)入注冊頁面攀唯。
在注冊頁面中填入相應(yīng)的個(gè)人信息即可完成注冊。注冊之后可以進(jìn)入官方的引導(dǎo)頁面构哺，之后按照引導(dǎo)流程就可以完成注冊革答。Sentry官方默認(rèn)有個(gè)人套餐可以免費(fèi)捕捉10k次錯(cuò)誤信息。當(dāng)需要團(tuán)隊(duì)協(xié)作的時(shí)候可能需要購買付費(fèi)套餐曙强，在本文中不做團(tuán)隊(duì)協(xié)作的演示残拐，具體參見官方流程即可。
需要說明的是碟嘴，Sentry服務(wù)是可以配置在你個(gè)人的服務(wù)器上的溪食，具體配置請自行搜索教程，本文僅針對使用默認(rèn)配置在Sentry.io上的服務(wù)進(jìn)行講解娜扇。
配置教程
初步配置
在Vue 2.x中错沃，Vue官方加入了errorHandler用來捕捉產(chǎn)生的錯(cuò)誤并進(jìn)行處理。Sentry的Vue集成便使用了這種方式進(jìn)行官方集成(官方文檔)雀瓢。這里針對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地址。我們在代碼中加入的DSN就是圖中第二行“DSN(Public)”中的地址饮睬。當(dāng)然如果你覺得一個(gè)密鑰不夠的話可以通過右上角生成多個(gè)密鑰租谈。
然后運(yùn)行
npm run build并將dist文件夾放在服務(wù)器上就可以捕獲錯(cuò)誤了。捕捉到的錯(cuò)誤如下所示捆愁。其中會包含用戶的IP信息割去，瀏覽器信息和系統(tǒng)信息，方便進(jìn)行錯(cuò)誤的復(fù)現(xiàn)昼丑。同時(shí)會展示錯(cuò)誤所在的具體行數(shù)劫拗，方便定位錯(cuò)誤。
這里有兩個(gè)需要注意的事情：
- 上面對于Sentry的配置代碼需要放在Vue配置之前矾克。
- 當(dāng)你使用
npm run dev運(yùn)行時(shí)，Vue會主動捕獲所有的錯(cuò)誤并將其輸出到控制臺憔足，這使得調(diào)試錯(cuò)誤十分方便胁附，但也使得Sentry無法捕獲到錯(cuò)誤。
Source Map使用
當(dāng)你成功使用上述方式配置并捕獲到錯(cuò)誤是滓彰，你會發(fā)現(xiàn)你所捕獲到的錯(cuò)誤代碼根本看不懂控妻。這是因?yàn)樵谀J(rèn)的Webpack配置中對于打包出來的代碼進(jìn)行了丑化處理以及Babel轉(zhuǎn)義，從而使得代碼看上去并不直觀揭绑。這樣的錯(cuò)誤信息顯然對于我們理解錯(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文件都有著相對應(yīng)的map文件。我們需要做的就是將這些map文件上傳并將其與服務(wù)器上的js文件進(jìn)行對應(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的時(shí)候要記得把
project:write勾選，其余采用默認(rèn)配置即可
然后我們通過命令行登錄壤靶，輸入剛才生成的token即可缚俏。
sentry-cli login
然后我們需要對項(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的配置做一些更改,否則將會出現(xiàn)一些識別問題。
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í)候查看壓縮前的代碼了才写。
注意：
- 由于Sentry服務(wù)是依賴release版本號區(qū)分map文件的葡兑，因此需要確保版本號對應(yīng)。版本號可以是“1.0.0”這樣的常規(guī)版本號赞草，也可以是一個(gè)哈希串的一部分讹堤。
- 你在網(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)樵撐募袝愕捻?xiàng)目的token保屯，該文件的語法規(guī)則查看這里手负。
結(jié)尾
本文僅提供Sentry服務(wù)的入門教程，想要更深入地了解可以進(jìn)入官方網(wǎng)站文檔頁面查看更加細(xì)致的完整文檔姑尺。Sentry同樣可以適用于后端的信息監(jiān)控竟终，其能力還是非常強(qiáng)大的。
配置上有什么問題可以在評論區(qū)留言股缸。同為前端新手衡楞，共同學(xué)習(xí)，共同進(jìn)步敦姻。
