淺談前端中的錯誤捕獲

淺談前端中的錯誤捕獲

某一天用戶反饋打開的頁面白屏幕，怎麼定位到產生錯誤的緣由呢？平常某次發佈怎麼肯定發佈會沒有引入bug呢？此時捕獲到代碼運行的bug並上報是多麼的重要。

既然捕獲錯誤並上報是平常開發中不可缺乏的一環，那怎麼捕獲到錯誤呢？萬能的try...catch

try{
  throw new Error()
} catch(e) {
  // handle error
}

看上去錯誤捕獲是多麼的簡單，然而下面的場景下就不能捕獲到了

try {
    setTimeout(() => {
        throw new Error('error')
    })
} catch (e) {
    // handle error
}

你會發現上面的例子中的錯誤不能正常捕獲，看來錯誤捕獲並非這樣簡單try...catch就能搞定,固然你也能夠爲異步函數包裹一層try...catch來處理。

瀏覽器中，window.onerror來捕獲你的錯誤

window.onerror = function (msg, url, row, col, error) {
    console.log('error');
    console.log({
        msg,  url,  row, col, error
    })
};

捕獲到錯誤後就能夠將錯誤上報，上報方式很簡單，你能夠經過建立簡單的img,經過src指定上報的地址，固然爲了不上報發送過多的請求，能夠對上報進行合併，合併上報。

但但你去看錯誤上報的信息的時候，你會發現一些這樣的錯誤Script error

由於瀏覽器的同源策略，對於不一樣域名的錯誤，都拋出了Script error，怎麼解決這個問題呢？特別是如今基本上js資源都會放在cdn上面。

解決方案

1：全部的資源都放在同一個域名下。可是這樣也會存在問題是不能利用cdn的優點。

2：增長跨域資源支持，在cdn 上增長支持主域的跨域請求支持，在script 標籤加crossorigin屬性