通過Web開發(fā)人員提供的這六個重要提示，了解如何減少JavaScript錯誤噪音并找到JavaScript zen。請繼續(xù)閱讀！

如果您嘗試使用JavaScript錯誤跟蹤來構(gòu)建和迭代您的應(yīng)用，那么您可能會遇到一個常見的問題：嘈雜，低價(jià)值的通知，這使得很難識別出高優(yōu)先級的問題。

瀏覽器JavaScript可能是捕獲錯誤的最復(fù)雜的環(huán)境，因?yàn)樗粌H僅是一個環(huán)境！有多種主流瀏覽器，JavaScript引擎，操作系統(tǒng)和瀏覽器擴(kuò)展生態(tài)系統(tǒng)，所有這些都匯集在一起，可以捕獲很好的錯誤（但對應(yīng)用程序的性能并不那么重要）。

像Sentry這樣的錯誤跟蹤平臺能夠在開箱即用的環(huán)境中完成所有噪音。但是，為了獲得最佳效果，您可以采取一些簡單但改變游戲規(guī)則的步驟來增加信號并使迭代變得更加直接 - 甚至是愉快的。

將您的網(wǎng)址列入白名單

Sentry的瀏覽器的JavaScript SDK拿起每一個從默認(rèn)的Web應(yīng)用程序觸發(fā)未捕獲的錯誤。這包括在您的頁面上運(yùn)行的代碼，不一定由您創(chuàng)作或控制。其中包括由瀏覽器擴(kuò)展程序，惡意軟件或第三方應(yīng)用程序（如聊天窗口小部件，分析和廣告代碼）觸發(fā)的錯誤。

要忽略此類有問題的錯誤，您可以將SDK配置為將僅源自您自己的代碼的錯誤列入白名單：

Raven.config('your-dsn', {

whitelistUrls: [

'www.example.com/static/js', // your code

'ajax.googleapis.com' // code served from Google CDN

]

}).install();

此示例配置可確保僅將源自www.example.com/static/js和ajax.googleapis.com提供的腳本的錯誤報(bào)告給Sentry服務(wù)器。這種小的配置更改是您可以減少錯誤的最簡單，最有影響力的更改。

使用入站數(shù)據(jù)過濾器

入站數(shù)據(jù)過濾器是Sentry功能，旨在從項(xiàng)目中丟棄已知的低值錯誤。它們很容易在Sentry項(xiàng)目設(shè)置中切換，因此它們丟棄的任何錯誤都不會計(jì)入您的帳戶配額。

有三個過濾器對JavaScript開發(fā)人員特別有價(jià)值：

1、傳統(tǒng)瀏覽器 - 像IE9這樣的舊瀏覽器會生成低保真錯誤報(bào)告，這些報(bào)告并不總是可操作的。

2、第三方擴(kuò)展程序 - 自動從已知的瀏覽器擴(kuò)展程序，惡意軟件和廣告腳本中刪除錯誤。

3、網(wǎng)絡(luò)抓取工具 - 刪除Google Bot等已知網(wǎng)絡(luò)抓取工具觸發(fā)的錯誤。

入站過濾器不如將Sentry JavaScript SDK配置為白名單錯誤URL一樣強(qiáng)大，但它們很好，因?yàn)橹恍鑿捻?xiàng)目設(shè)置中單擊即可啟用它們。

使用最新版本的JavaScript SDK

Sentry的瀏覽器JavaScript SDK正在積極開發(fā)中，并且經(jīng)常進(jìn)行更改以改進(jìn)錯誤報(bào)告的_quality_ 并減少低值錯誤的數(shù)量。

例如，版本3.26.2默認(rèn)禁止背靠背重復(fù)錯誤。如果您遇到從異步循環(huán)（例如，來自setTimeout 或 XMLHttpRequest 回調(diào)）觸發(fā)的錯誤，這可以節(jié)省生命 。在長期存在的應(yīng)用程序中，像這樣的錯誤可能會導(dǎo)致單個用戶發(fā)生數(shù)千個事件！

要獲得最佳體驗(yàn)，請保持SDK的副本為最新。Sentry將告訴您何時有新版本可用，但是也值得定期檢查更改日志以查看新版本。

使用源地圖

源映射不僅可以簡化調(diào)試生產(chǎn)堆棧跟蹤，還可以使Sentry更容易將錯誤分組到單個問題中。這意味著事件會陷入更小，更易于管理的問題集中，這意味著您的問題流中的噪音更少，而關(guān)于代碼損壞的電子郵件也會減少2:00。

將源映射作為構(gòu)建和部署過程的一部分并不像切換按鈕那么容易，但Sentry深入的源映射文檔包含了入門所需的一切。除了有助于降低噪聲之外，源映射可能是您可以對監(jiān)視和調(diào)試工作流程進(jìn)行的最深刻的改進(jìn)。

忽略麻煩的錯誤

你永遠(yuǎn)不會解決的一些錯誤。當(dāng)它們彈出時，您實(shí)際上有兩個選擇：宣布破產(chǎn)，因?yàn)樗麄儠茐哪愕膽?yīng)用程序，你無法解決它們。

2.完全忽略它們，因?yàn)樗鼈冏罱K與用戶的體驗(yàn)無關(guān)。

您可以通過Sentry UI或使用該ignoreErrors 選項(xiàng)配置JavaScript SDK以防止客戶端錯誤來忽略錯誤 。從SDK中執(zhí)行此操作非常理想，因?yàn)樵诳蛻舳思墑e丟棄的錯誤不會到達(dá)Sentry的服務(wù)器，也不會計(jì)入您的帳戶配額。

這是它的樣子：

Raven.config('your-dsn', {

ignoreErrors: [

'Can't execute code from freed script',

/SecurityError: DOM Exception 18$/

]

}).install();

但要小心！進(jìn)行此更改后，您將永遠(yuǎn)不會再看到這些錯誤。而以前只是令人討厭的錯誤字符串可能會成為更大的問題，但你永遠(yuǎn)不會被告知它們。哎呀！ignoreErrors 明智地選擇你的 陣列。

請注意，瀏覽器可以針對相同的基本錯誤生成不同的錯誤消息。對于單個 ReferenceError，您可能需要輸入多個字符串/正則表達(dá)式以涵蓋所有可能的瀏覽器。

上傳源文件（和源地圖）

當(dāng)Sentry遇到從JavaScript文件觸發(fā)的錯誤時，它會嘗試從您的應(yīng)用服務(wù)器下載該源文件，以便將行和列信息與實(shí)際源內(nèi)容相關(guān)聯(lián)。此源內(nèi)容是Sentry錯誤分組算法的基礎(chǔ)。

如果您的源文件只能通過Web訪問，那么很多很多壞事都可能發(fā)生。例如，您可能有一個構(gòu)建過程，可以在部署新的JavaScript文件時從服務(wù)器中刪除舊的JavaScript文件。如果您的用戶從較舊的緩存腳本中觸發(fā)錯誤，那么當(dāng)Sentry下載它們時，它們將不再可用。無法訪問該內(nèi)容會使分組算法陷入混亂，這意味著將針對通常在現(xiàn)有問題下進(jìn)行沖突的錯誤創(chuàng)建單獨(dú)的問題。

為避免這些和其他中斷情況（例如，網(wǎng)絡(luò)可用性），我們強(qiáng)烈建議您將生產(chǎn)JavaScript文件和源映射上載為發(fā)布工件。這意味著Sentry將始終可以直接訪問這些文件，從而確保最大的分組效果。

使用Sentry API完成上傳源文件。這很簡單：

$ curl https://sentry.io/api/0/projects/:organization_slug/:project_slug/releases/:release/files/

-X POST

-H 'Authorization: Bearer YOUR_TOKEN_HERE'

-F file=@app.js.map

-F name="http://example.com/app.js.map"

在文檔中了解有關(guān)工件和版本的更多信息。

我們來幫忙

與往常一樣，您可以為您的JavaScript應(yīng)用程序嘗試Sentry（它也是100％開源的）。

感興趣的小伙伴，可以關(guān)注公眾號【grain先森】，回復(fù)關(guān)鍵詞 “vue”，獲取更多資料，更多關(guān)鍵詞玩法期待你的探索~