前端錯誤

這裡所說的前端錯誤是指，在使用者的瀏覽器中出現的js報錯。如下圖。

此類錯誤有幾個特徵：

• 報錯資訊一般發生在瀏覽器控制檯，普通使用者看不到。（舊版本ie可能會彈出報錯的提示框，在瀏覽器左下角狀態列有個錯誤提示的標誌）
• 報錯一般發生在特定版本的瀏覽器，偶現，或者測試時未發現。
• 報錯一般影響使用者某些特定操作，比如說某個按鈕點不了，某個列表打不開等。

一般怎麼處理錯誤：

在處理程式錯誤時，我們有幾個常見的辦法。一般我們預設，在開發及測試階段，錯誤已經處理完了大部分。剩下的小部分的問題，重點在於如何發現此類問題，只有在發現問題之後，才能夠去復現，修改，驗證。

『發現』此類問題，最常見的方法是使用window.onerror函式，在頁面頂部定義window.onerror，在之後的程式碼邏輯中，未被處理的錯誤會觸發onerror回撥。可以獲取到具體的出錯資訊，包含：『錯誤訊息、出錯的檔案、行號、列號、具體錯誤物件（stack）』。具體參考：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

這麼做有什麼問題，以及怎麼解決

跨域資源報錯

如果錯誤是在跨域的指令碼里面報出來的話，錯誤資訊只有『Script error』，沒有更詳細的內容。很明顯，這個也是瀏覽器同源策略所做的約束。具體解決辦法，給script標籤新增crossorigin="anonymous"屬性，對應的script資源新增Access-Control-Allow-Origin:* 響應頭。參考：https://blog.sentry.io/2016/05/17/what-is-script-error.html

這麼做完之後，還有另外一個問題。在使用webpack打包程式碼的時候，我們一般會使用code split，大部分的頁面邏輯都會使用chunk載入。而這些分割完的程式碼chunk，預設不會新增crossorigin屬性。webpack也對此新增了支援，可以新增crossOriginLoading配置。參考：https://webpack.js.org/configuration/output/#output-crossoriginloading

onerror覆蓋

在使用onerror的時候，大多使用window.onerror = function(){}這樣的寫法。這就導致一個頁面裡只有一個錯誤處理的函式，在多人協作開發的時候，嗯，確實有人會覆蓋onerror。需要注意避免。

錯誤資訊收集不全

錯誤資訊收集不全，也是在特定的場景下出現的問題。比如說上文中的報錯的示例，錯誤本身是在glsExam-xxx.js裡面報出來的，但是因為react捕獲了這個錯誤，然後丟擲了一個異常，然後錯誤就變成了是react報出來的了。而公司的報錯指令碼只取onerror裡的報錯訊息和報錯檔案，沒有stack資訊。這就導致看到的錯誤都是react在報。

這樣的報錯對我們來講沒有價值。解決的思路也比較簡單，對gentian預設的onerror處理函式做一次封裝，更新掉預設的react的報錯。