簡單而完整地體驗一遍sentry的sourcemap服務

fsmStudy 發布于2019-08-21 17:41 / 3028人閱讀

摘要：是一個日志平臺支持多種語言多種框架在接入的同時也接入了國內的相對而言的服務會比較完善比如上報控制的如果自行搭建可以忽略支持自行搭建服務當然了也很感謝的技術人員耐心為我解答了幾個問題官網具體接入流程簡單體驗不使用框架注冊登錄創建團隊創建

sentry

Sentry是一個日志平臺, 支持多種語言多種框架, 在接入sentry的同時, 也接入了國內的fundebug, 相對而言, sentry的服務會比較完善, 比如上報控制, cross-original, 40M的sourcemap(如果自行搭建可以忽略), 支持自行搭建服務.... 當然了, 也很感謝fundebug的技術人員耐心為我解答了幾個問題

官網

https://sentry.io

具體接入流程(簡單體驗, 不使用框架)

注冊(登錄)->創建團隊->創建項目(這些不細講, 官網對這些步驟的提醒很明確)

創建完之后sentry會指引我們怎么在代碼層接入
我這里選擇的是Vue,由于只是簡單體驗, 這里我不使用Vue, copy其中的:

新建一個html文件, 并在head標簽內粘貼以上代碼, 然后添加一個可以點擊的元素:

新建一個test.ts(習慣性問題, 具體新建js/ts自行選擇)文件, 簡單寫一個必然報錯的事件:

(() => {
  window.onload = () => {
    document.getElementById("container").addEventListener("click", e => {
      console.log(window["aaa"].aaa)
    }, false)
  }
})()

編譯并生成sourcemap(--inlineSources為保證sourcemap內有sourceContent, 如果沒有sourceContent, sentry后臺會報找不到test.ts的錯誤, 這個時候需要連同test.ts上傳才能正常使用, 使用webpack時請參考):

tsc test.ts --sourcemap --inlineSources

由于日常項目中靜態資源都放在七牛, 為保證完整性, 也同樣手動上傳到七牛, 上傳后的可訪問地址為:

https://mydomain/assets/test.js

在html>head標簽結束前添加script標簽引用tets.js(這里不需要加crossorigin, 使用fundebug不加的話會報錯):

部署html到服務器, 使其可訪問

在sentry中用鼠標點擊左下角API生成一個token:

生成時保證勾選了選項中的

 project:write

sentry-cli上傳sourcemap(注意下載時不要過新的node版本, 當時用9.2.0報錯, 切回到6.11.1正常下載):

sudo npm install sentry-cli-binary -g

登錄(這樣要使用到上面生成的token):

sentry-cli login

創建一個release

sentry-cli releases -o 團隊名稱 -p 項目名稱 new release名稱

注意"release名稱"這個東東, 官方有明確聲明, 在上傳sourcemap到sentry這種做法下, 必須要在Raven初始化時匹配上release, 否則會sentry后臺接收到錯誤上報之后會報找不到該sourcemap的錯誤, 所以, 需要修改script標簽中的Raven.config為:

Raven.config("https://xxxxxxxxxxxxx", {
    release: "release名稱"
}).install();

上傳

sentry-cli releases -o 團隊名稱 -p 項目名稱 files release名稱 upload-sourcemaps --url-prefix URL_PREFIX DIR

其中的URL_PREFIX必須你要與js文件訪問的路徑保持一致, 即:

https://mydomain/assets

DIR為你的本地sourcemap目錄(我個人做法是把sourcemap提取到一個名為sourcemaps的目錄下, 這樣就不用管有其他文件影響)

訪問剛剛部署的這個html, 點擊, 使其上報一次錯誤, network中會有這樣的一個post請求:

sentry控制臺上會出現一個Unresolved Issues, 點擊查看詳細

sentry會根據sourcemap的內容去解析出這一個錯誤的位置

11.訪問https://mydomain/assets/tets.... 確認我們的sourcemap沒有被用戶訪問到

GPU云服務器云服務器對阿里云服務器頻繁訪問而被屏蔽的情況只刪除小米云服務器的視頻而不刪除本機視頻 sourcemap Sentry

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89866.html

Sentry前端部署拓展篇（sourcemap關聯、issue關聯、release控制）

摘要：本地應用回到前端項目中，在添加對應的，指定版本后，每次上報的異常就會分類到該版本下。管理目前來說，前端項目基本都會壓縮混淆代碼，這樣導致捕捉到的異常堆棧無法理解。下篇打算寫一下前端異常監控的分類，也就是需要監控哪些異常，敬請期待原文首發于我的個人博客： https://lonhon.top/ 之前的《基礎篇》主要介紹了Sentry和基本部署流程，在實際使用過程中你會發現Sentr...

Bamboy 2019-08-26 11:52 評論0 收藏0
Sentry異常監控方案部署-前端攻略

摘要：故而，我們需要在項目出現異常時主動對其進行收集上報，分析原因和影響后制定下一步解決方案。所以，我們需要一款成熟的異常監控系統來協助我們。最近在公司項目中部署了，用于項目中異常監控，涵蓋了前端后端。原文首發于我的個人博客： https://lonhon.top/ 凡事只要有可能出錯,那就一定會出錯對于任何一個項目而言，本地測試肯定做不到100%覆蓋，而且，我們也不能保證用戶能按照我們...

Lorry_Lu 2019-08-22 16:31 評論0 收藏0
JS錯誤監控總結

摘要：前言做好錯誤監控，將用戶使用時的錯誤日志上報，可以幫助我們更快的解決一些問題。一個變通方案是單獨處理，告知錯誤詳情僅能通過瀏覽器控制臺查看，無法通過訪問。前言做好錯誤監控，將用戶使用時的錯誤日志上報，可以幫助我們更快的解決一些問題。目前開源的比較好的前端監控有 https://docs.sentry.io/ 那前端監控是怎么實現的呢？要想了解這個，需要知道前端錯誤大概分為哪些以及如...

wqj97 2019-08-26 11:51 評論0 收藏0
高效利用Sentry追蹤日志發現問題

摘要：對我們來說最大的便利就是利用日志進行錯誤發現和排查的效率變高了。面臨的問題程序運行的日志是一個必不可少的東西，可能是一些系統信息，比如?gc 的情況；可能是一些正常的模塊處理信息，比如最近更新的配置；還可能是一些在程序運行中，我們不希望出現的錯誤所帶來的信息。通過日志，可以知道我們的程序是不是在正常地運行，看到錯誤日志，我們還需要利用日志排查錯誤。我們知道日志如此重要，并樂于記錄...

icyfire 2019-07-25 11:14 評論0 收藏0