資訊專欄INFORMATION COLUMN
摘要：是一個(gè)日志平臺支持多種語言多種框架在接入的同時(shí)也接入了國內(nèi)的相對而言的服務(wù)會比較完善比如上報(bào)控制的如果自行搭建可以忽略支持自行搭建服務(wù)當(dāng)然了也很感謝的技術(shù)人員耐心為我解答了幾個(gè)問題官網(wǎng)具體接入流程簡單體驗(yàn)不使用框架注冊登錄創(chuàng)建團(tuán)隊(duì)創(chuàng)建
sentry
Sentry是一個(gè)日志平臺, 支持多種語言多種框架, 在接入sentry的同時(shí), 也接入了國內(nèi)的fundebug, 相對而言, sentry的服務(wù)會比較完善, 比如上報(bào)控制, cross-original, 40M的sourcemap(如果自行搭建可以忽略), 支持自行搭建服務(wù).... 當(dāng)然了, 也很感謝fundebug的技術(shù)人員耐心為我解答了幾個(gè)問題
https://sentry.io
注冊(登錄)->創(chuàng)建團(tuán)隊(duì)->創(chuàng)建項(xiàng)目(這些不細(xì)講, 官網(wǎng)對這些步驟的提醒很明確)
創(chuàng)建完之后sentry會指引我們怎么在代碼層接入
我這里選擇的是Vue,由于只是簡單體驗(yàn), 這里我不使用Vue, copy其中的:
新建一個(gè)html文件, 并在head標(biāo)簽內(nèi)粘貼以上代碼, 然后添加一個(gè)可以點(diǎn)擊的元素:
新建一個(gè)test.ts(習(xí)慣性問題, 具體新建js/ts自行選擇)文件, 簡單寫一個(gè)必然報(bào)錯(cuò)的事件:
(() => {
window.onload = () => {
document.getElementById("container").addEventListener("click", e => {
console.log(window["aaa"].aaa)
}, false)
}
})()
編譯并生成sourcemap(--inlineSources為保證sourcemap內(nèi)有sourceContent, 如果沒有sourceContent, sentry后臺會報(bào)找不到test.ts的錯(cuò)誤, 這個(gè)時(shí)候需要連同test.ts上傳才能正常使用, 使用webpack時(shí)請參考):
tsc test.ts --sourcemap --inlineSources
由于日常項(xiàng)目中靜態(tài)資源都放在七牛, 為保證完整性, 也同樣手動上傳到七牛, 上傳后的可訪問地址為:
https://mydomain/assets/test.js
在html>head標(biāo)簽結(jié)束前添加script標(biāo)簽引用tets.js(這里不需要加crossorigin, 使用fundebug不加的話會報(bào)錯(cuò)):
部署html到服務(wù)器, 使其可訪問
在sentry中用鼠標(biāo)點(diǎn)擊左下角API生成一個(gè)token:
生成時(shí)保證勾選了選項(xiàng)中的
project:write
sentry-cli上傳sourcemap(注意下載時(shí)不要過新的node版本, 當(dāng)時(shí)用9.2.0報(bào)錯(cuò), 切回到6.11.1正常下載):
sudo npm install sentry-cli-binary -g
登錄(這樣要使用到上面生成的token):
sentry-cli login
創(chuàng)建一個(gè)release
sentry-cli releases -o 團(tuán)隊(duì)名稱 -p 項(xiàng)目名稱 new release名稱
注意"release名稱"這個(gè)東東, 官方有明確聲明, 在上傳sourcemap到sentry這種做法下, 必須要在Raven初始化時(shí)匹配上release, 否則會sentry后臺接收到錯(cuò)誤上報(bào)之后會報(bào)找不到該sourcemap的錯(cuò)誤, 所以, 需要修改script標(biāo)簽中的Raven.config為:
Raven.config("https://xxxxxxxxxxxxx", {
release: "release名稱"
}).install();
上傳
sentry-cli releases -o 團(tuán)隊(duì)名稱 -p 項(xiàng)目名稱 files release名稱 upload-sourcemaps --url-prefix URL_PREFIX DIR
其中的URL_PREFIX必須你要與js文件訪問的路徑保持一致, 即:
https://mydomain/assets
DIR為你的本地sourcemap目錄(我個(gè)人做法是把sourcemap提取到一個(gè)名為sourcemaps的目錄下, 這樣就不用管有其他文件影響)
訪問剛剛部署的這個(gè)html, 點(diǎn)擊, 使其上報(bào)一次錯(cuò)誤, network中會有這樣的一個(gè)post請求:
sentry控制臺上會出現(xiàn)一個(gè)Unresolved Issues, 點(diǎn)擊查看詳細(xì)
sentry會根據(jù)sourcemap的內(nèi)容去解析出這一個(gè)錯(cuò)誤的位置
11.訪問https://mydomain/assets/tets.... 確認(rèn)我們的sourcemap沒有被用戶訪問到
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/89866.html
摘要：本地應(yīng)用回到前端項(xiàng)目中，在添加對應(yīng)的，指定版本后，每次上報(bào)的異常就會分類到該版本下。管理目前來說，前端項(xiàng)目基本都會壓縮混淆代碼，這樣導(dǎo)致捕捉到的異常堆棧無法理解。下篇打算寫一下前端異常監(jiān)控的分類，也就是需要監(jiān)控哪些異常，敬請期待 原文首發(fā)于我的個(gè)人博客： https://lonhon.top/ 之前的《基礎(chǔ)篇》主要介紹了Sentry和基本部署流程，在實(shí)際使用過程中你會發(fā)現(xiàn)Sentr...
摘要：故而，我們需要在項(xiàng)目出現(xiàn)異常時(shí)主動對其進(jìn)行收集上報(bào)，分析原因和影響后制定下一步解決方案。所以，我們需要一款成熟的異常監(jiān)控系統(tǒng)來協(xié)助我們。最近在公司項(xiàng)目中部署了，用于項(xiàng)目中異常監(jiān)控，涵蓋了前端后端。 原文首發(fā)于我的個(gè)人博客： https://lonhon.top/ 凡事只要有可能出錯(cuò),那就一定會出錯(cuò) 對于任何一個(gè)項(xiàng)目而言，本地測試肯定做不到100%覆蓋，而且，我們也不能保證用戶能按照我們...
摘要：前言做好錯(cuò)誤監(jiān)控，將用戶使用時(shí)的錯(cuò)誤日志上報(bào)，可以幫助我們更快的解決一些問題。一個(gè)變通方案是單獨(dú)處理，告知錯(cuò)誤詳情僅能通過瀏覽器控制臺查看，無法通過訪問。 前言 做好錯(cuò)誤監(jiān)控，將用戶使用時(shí)的錯(cuò)誤日志上報(bào)，可以幫助我們更快的解決一些問題。目前開源的比較好的前端監(jiān)控有 https://docs.sentry.io/ 那前端監(jiān)控是怎么實(shí)現(xiàn)的呢？要想了解這個(gè)，需要知道前端錯(cuò)誤大概分為哪些以及如...
摘要：對我們來說最大的便利就是利用日志進(jìn)行錯(cuò)誤發(fā)現(xiàn)和排查的效率變高了。 面臨的問題 程序運(yùn)行的日志是一個(gè)必不可少的東西，可能是一些系統(tǒng)信息，比如?gc 的情況；可能是一些正常的模塊處理信息，比如最近更新的配置；還可能是一些在程序運(yùn)行中，我們不希望出現(xiàn)的錯(cuò)誤所帶來的信息。通過日志，可以知道我們的程序是不是在正常地運(yùn)行，看到錯(cuò)誤日志，我們還需要利用日志排查錯(cuò)誤。 我們知道日志如此重要，并樂于記錄...
閱讀 3407·2021-11-25 09:43
閱讀 3083·2021-10-15 09:43
閱讀 2036·2021-09-08 09:36
閱讀 3028·2019-08-30 15:56
閱讀 814·2019-08-30 15:54
閱讀 2752·2019-08-30 15:54
閱讀 3066·2019-08-30 11:26
閱讀 1315·2019-08-29 17:27
