通過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)鍵詞玩法期待你的探索~
