在一般情況下我們代碼報(bào)錯(cuò)啥的都會(huì)覺得 下圖

然后現(xiàn)在來說下經(jīng)常用的異常

1.try catch

這個(gè)是比較常見的異常捕獲方式通常都是

使用try catch能夠很好的捕獲異常并對(duì)應(yīng)進(jìn)行相應(yīng)處理，不至于讓頁面掛掉，但是其存在一些弊端，比如需要在捕獲異常的代碼上進(jìn)行包裹，會(huì)導(dǎo)致頁面臃腫不堪，不適用于整個(gè)項(xiàng)目的異常捕獲。

try,catch的幾個(gè)特點(diǎn)：

• 無法捕捉到語法錯(cuò)誤，只能捕捉運(yùn)行時(shí)錯(cuò)誤；
• 可以拿到出錯(cuò)的信息，堆棧，出錯(cuò)的文件、行號(hào)、列號(hào)；
• 需要借助工具把所有的function塊以及文件塊加入try,catch，可以在這個(gè)階段打入更多的靜態(tài)信息。

2.window.onerror

除了try catch還有window.onerror, onerror提供了全局監(jiān)聽異常的功能：

運(yùn)行以后：

window.onerror提供了錯(cuò)誤的信息，還提供了錯(cuò)誤行列號(hào)，可以更準(zhǔn)確的定位錯(cuò)誤代碼

window.onerror的幾個(gè)特點(diǎn)：

• 可以捕捉語法錯(cuò)誤，也可以捕捉運(yùn)行時(shí)錯(cuò)誤；
• 可以拿到出錯(cuò)的信息，堆棧，出錯(cuò)的文件、行號(hào)、列號(hào)；
• 只要在當(dāng)前頁面執(zhí)行的js腳本出錯(cuò)都會(huì)捕捉到，例如：瀏覽器插件的javascript、或者flash拋出的異常等。
• 跨域的資源需要特殊頭部支持。

3.sourceMap

部署前端之前，開發(fā)者通常會(huì)對(duì)代碼進(jìn)行打包壓縮，這樣可以減少代碼大小，從而有效提高訪問速度。然而，壓縮代碼的報(bào)錯(cuò)信息是很難Debug的，因?yàn)樗男刑?hào)和列號(hào)已經(jīng)失真。這時(shí)就需要SourceMap來還原真實(shí)的出錯(cuò)位置了。

Source Map是一個(gè)JSON文件，其中包含了代碼轉(zhuǎn)換前后的位置信息。給定一個(gè)轉(zhuǎn)換之后的壓縮代碼的位置，就可以通過Source Map獲取轉(zhuǎn)換之前的代碼位置，反過來也一樣。

Source Map真正神奇之處在于mappings屬性，它記錄了位置是如何對(duì)應(yīng)的。JavaScript Source Map 詳解里面已經(jīng)有很好的解釋了，就不多說了

如果要在chrome里面使用的話需要一些簡單的配置

總結(jié)

以上是生活随笔為你收集整理的前端异常捕获与上报的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。