資訊專欄INFORMATION COLUMN
摘要：客戶端安裝步驟根據使用平臺選擇選擇官網有說明。應用可使用的監聽鉤子如下事件，上報成功之后會此事件，可以監聽此事件做一些其他的事情，比如上報到其他的平臺等等。
概念
js錯誤日志統計工具，官網文檔
以下說明前提條件都是raven-js
日志收集必要條件sentry平臺帳號注冊
raven客戶端安裝
sentry服務平臺進行首頁->新建項目之后，點擊settings,可以設置錯誤日志收集條件，其中客戶 端dsn（結構：協議://公鑰:私鑰@sentry平臺地址／sentryId）, 在sentry 客戶端raven安裝配置中會用到。sentry客戶端raven
根據使用平臺選擇raven（sdk選擇官網有說明）。
配置方法如下（我用的是react,使用的是import方式,其中url就是sentry服務端獲取的dsn,省略號是配置options):
import Raven from "raven-js";
Raven.config(url, {
release: "1.0.0",
whitelistUrls: [
...
],
...
}).install();
tags(對應sentry服務平臺錯誤詳情中的tags,便于分析錯誤發生的情景):
user(對應sentry服務平臺錯誤詳情中的user,便于記錄觸發錯誤的具體用戶):
extra(對映sentry服務平臺錯誤詳情中的Additional Data,便于各別信息的統計):
whitelistUrls: 上報到sentry服務平臺的白名單，假如觸發錯誤的js鏈接腳本host不在其值里，就無法上報錯誤。
錯誤日志上報（以我用的raven-js作為說明，其他可查看源代碼)js運行期間，如果發生錯誤時，錯誤（比如點擊回調函數執行報錯，ajax同源請求 報錯等）沒有被try catch或者以其他方式捕捉，就會冒泡到window，觸發 [onerror][2]事件。當然資源加載失 敗，比如img, script,會執行該元素onerror不會冒泡window.onerror, onerror具體聲明如下：
window.onerror = function(messageOrEvent, source, lineno, colno, error) { ... }
因為window.onerror是ECMAScript不標準的屬性，不同瀏覽器實現可能會略有 不同，error參數是raven上報日志的關鍵（ps: 沒有error,就找不到錯誤棧 stack,自然就追蹤不到問題），所以raven客戶端巧用try, catch對錯誤進行捕 捉（ps:catch獲取到的error對象有raven需要的東西,比如錯誤棧)，然后采用 captureException進行錯誤上報，核心源代碼如下：
對addEventListener、setTimeout、setInterval、 requestAnimationFrame等回調函數進行了如上包裝，這樣就可以保證這些函數 的回調報錯時候可以有錯誤棧，同理，可以根據項目架構對可能出現問題進行 try..catch包裝，采用手動上報，做到最大限度錯誤日志上報。
采用raven.captureException(msg/e, options),第一參數可以是字符串， 也可以是Error對象(ps: raven內部會對所傳參數進行判斷，如果是msg,會轉換 成Error對象),第二個參數options可設置參數同raven配置安裝時可以用的參數 同，只不過這里用到的參數作用域只限于此條錯誤日志，raven.config中用的 options對所有錯誤日志都生效。應用可使用的監聽鉤子（*.adEventListener(如下事件，callback)
ravenSuccess | onRavenSuccess: raven上報成功之后會dispatch此事
件，可以監聽此事件做一些其他的事情，比如上報到其他的平臺等等。
ravenFailure | onRavenFailure：raven上報失敗之后會dispatch此事
件，可以監聽此事件做一些其他的事情，比如上報到其他的平臺等等。
ravenHandle | onRavenHandle：手動調用Raven.captureException之
后會dispatch此事件，可以監聽此事件做一些其他的事情，比如上報到其他的平臺
等等。
總結一下就是根據自己的情況，可以設置一下whitelistUrls， ignoreErrors，
ignoreUrls，上報比例以及javascript跨域資源錯誤統計處理（crossorigin），如果你使用webpack,可以在output中添加一個參數crossOriginLoading，webpack編譯時會自動給按需加載的js獲取加上crossorigin,說明如下：
服務端response頭部添加Access-Control-Allow-Origin: *。
建議公鑰，私鑰信息不要存放于前端頁面，可以放在中間服務器，走客戶端－》中間服務－》sentry服務。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89956.html
摘要：中異常處理類主要包含兩個方法和，其中就是主要用來向第三方發送異常報告，這里選擇向這個神器發送異常報告，并使用通知開發人員。通過也能發現的執行流程。 說明：Laravel學習筆記之bootstrap源碼解析中聊異常處理時提到過Sentry這個神器，并打算以后聊聊這款神器，本文主要就介紹這款Errors Tracking神器Sentry，Sentry官網有一句話個人覺得帥呆了: Stop ...
摘要：我創建了一個名為的項目。錯誤信息查看在后臺找到我們的項目，點擊進去就能看到多了一條錯誤信息。它由以下幾部分組成，分別是協議公鑰私鑰主機路徑一般為空項目。 sentry簡介 Sentry 是一個開源的錯誤追蹤工具，可以幫助開發人員實時監控和修復系統中的錯誤。其專注于錯誤監控以及提取一切事后處理所需的信息;支持幾乎所有主流開發語言(JS/Java/Python/php)和平臺, 并提供了w...
摘要：對我們來說最大的便利就是利用日志進行錯誤發現和排查的效率變高了。官方也提倡正確設置接收的日志的同時，用戶也能繼續舊的日志備份。 在各種系統和應用里，無論你的代碼再完美也還是會拋異常，出錯誤。今天的主角是當今比較流行的異常記錄框架 - Sentry，來了解一下。 關于日志管理 應用越做越復雜，輸出日志五花八門，有print的，有寫stdout的，有寫stderr的, 有寫logging的...
摘要：對我們來說最大的便利就是利用日志進行錯誤發現和排查的效率變高了。 面臨的問題 程序運行的日志是一個必不可少的東西，可能是一些系統信息，比如?gc 的情況；可能是一些正常的模塊處理信息，比如最近更新的配置；還可能是一些在程序運行中，我們不希望出現的錯誤所帶來的信息。通過日志，可以知道我們的程序是不是在正常地運行，看到錯誤日志，我們還需要利用日志排查錯誤。 我們知道日志如此重要，并樂于記錄...
摘要：項目中接入最近在公司的內部項目中接入技術棧，跟蹤運行時錯誤。具體的可以在你的項目中中查看三客戶端設置在客戶端中接入是簡單的，只需要配置插件就可以了。 Vue 項目中接入sentry 最近在公司的內部Vue項目中接入sentry技術棧，跟蹤運行時錯誤。針對這件事分享下，有不完整或者錯誤的地方歡迎交流。[源碼][1] 一、sentry 錯誤日志收集框架 Stop hoping y...
閱讀 1478·2021-10-14 09:43
閱讀 1442·2021-10-09 09:58
閱讀 1937·2021-09-28 09:42
閱讀 3728·2021-09-26 09:55
閱讀 1752·2021-08-27 16:23
閱讀 2756·2021-08-23 09:46
閱讀 906·2019-08-30 15:55
閱讀 1405·2019-08-30 15:54
