您好,登錄后才能下訂單哦!
這篇文章主要介紹vue項(xiàng)目前端錯(cuò)誤收集之sentry的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
sentry簡介
Sentry 是一個(gè)開源的錯(cuò)誤追蹤工具,可以幫助開發(fā)人員實(shí)時(shí)監(jiān)控和修復(fù)系統(tǒng)中的錯(cuò)誤。其專注于錯(cuò)誤監(jiān)控以及提取一切事后處理所需的信息;支持幾乎所有主流開發(fā)語言( JS/Java/Python/php )和平臺, 并提供了web來展示輸出錯(cuò)誤。
sentry官網(wǎng): https://sentry.io/
sentry安裝
sentry 是一個(gè)開源的工具,可以自行搭建。
官方支持兩種安裝和運(yùn)行 Sentry 服務(wù)器的方法, Docker 和 Python 。推薦使用 Docker 。
當(dāng)然,對于剛開始接觸 sentry 的同學(xué),也可以直接使用官方提供的免費(fèi)服務(wù),但是有一些限制。
下面先來介紹一下利用官方的免費(fèi)服務(wù),在前端項(xiàng)目中如何使用 sentry 。
如何在項(xiàng)目中使用sentry
1.首先需要在 sentry 的官網(wǎng)注冊一個(gè)賬號。注冊完選擇新建一個(gè)項(xiàng)目, sentry 支持多種框架,在其中選擇 vue 創(chuàng)建項(xiàng)目。我創(chuàng)建了一個(gè)名為test的項(xiàng)目。
1. 創(chuàng)建項(xiàng)目頁面會(huì)自動(dòng)跳轉(zhuǎn)到如何配置vue項(xiàng)目頁面。接下來就按照指引在vue代碼里引入 sentry ??梢酝ㄟ^ 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
然后我們在代碼里制造一個(gè)錯(cuò)誤,就可以讓 sentry 捕獲了。本地如何模擬線上環(huán)境訪問dist下的文件呢?需要裝一個(gè) http-server ,在dist文件夾下啟動(dòng)一個(gè)http服務(wù)就可以了。
npm i http-server cd dist http-server -p 8888
注意:sentry捕獲到的錯(cuò)誤不會(huì)在打印在控制臺中。
在network中可以看到, sentry 發(fā)送了一個(gè)錯(cuò)誤請求,請求參數(shù)如下:
接下來我們就可以在后臺看到剛才上傳的錯(cuò)誤信息,同時(shí) sentry 也會(huì)給你的郵箱發(fā)送一封錯(cuò)誤郵件。
錯(cuò)誤信息查看
在后臺找到我們的test項(xiàng)目,點(diǎn)擊進(jìn)去就能看到多了一條錯(cuò)誤信息。
點(diǎn)擊信息可以進(jìn)入信息詳情進(jìn)行查看。
但是這個(gè)錯(cuò)誤信息是壓縮后的,不能定位到代碼的實(shí)際位置。使用意義不大,因此需要上傳 source-map 。
上傳source-map
上傳的方式有多種。可以通過 sentry-cli 通過命令行的方式來上傳 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 版本號相同,這樣的話 sentry 才能將 source-map 文件一一對應(yīng)上。
修改完之后我們重新build一下項(xiàng)目,build的過程比較慢:
之后我們?nèi)ズ笈_可以看見在版本中多了一個(gè) test-1 版本,也就是我們剛剛上傳的版本。
點(diǎn)進(jìn)去可以看見我們剛才上傳的 source-map 文件。
這時(shí)我們重新觸發(fā)一次錯(cuò)誤,就可以看到具體的出錯(cuò)位置了。
sentry關(guān)聯(lián)github
在設(shè)置->集成里面可以設(shè)置 sentry 關(guān)聯(lián)各種服務(wù),如 github、jira 等。關(guān)聯(lián)上 github 后,可以直接為該異常創(chuàng)建issue。
這樣在該異常的詳情頁就可以創(chuàng)建issue到 sentry 這個(gè)倉庫了。
創(chuàng)建時(shí)可以選擇倉庫,名稱,詳情及指定給誰:
打開 github ,在 sentry 這個(gè)倉庫下,發(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服務(wù)
官方給出的有兩種方法可以自行搭建sentry:
?python
?docker
推薦使用docker。下面來介紹一下通過docker如何搭建sentry。
首先需要下載docker
mac桌面版地址: https://hub.docker.com/editions/community/docker-ce-desktop-mac
其中已經(jīng)集成了docker命令行、docker-compose等。
然后需要去github拉取 Sentry On-Premise ,這個(gè)是官方提供的通過docker安裝sentry的倉庫,里面介紹了如何一步一步搭建sentry。
創(chuàng)建服務(wù)步驟:
cd onpremise // 創(chuàng)建本地?cái)?shù)據(jù)庫 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ù)庫,用交互式的提示生成管理員賬號 docker-compose run --rm web upgrade // 啟動(dòng)所有服務(wù) docker-compose up -d
如果過程一切正常的話,現(xiàn)在訪問localhost:9000就能看到sentry的登錄頁面了,用剛才生成的管理員賬號密碼登錄即可。
以后的操作就跟上面介紹的一樣了。
注意事項(xiàng)
1.利用本地搭建的sentry創(chuàng)建項(xiàng)目的時(shí)候,發(fā)現(xiàn)dsn那一欄是空的,系統(tǒng)并沒有自動(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
以上是“vue項(xiàng)目前端錯(cuò)誤收集之sentry的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。