前端錯誤收集的關(guān)鍵在于及時發(fā)現(xiàn)并處理隱藏的bug，主要通過window.onError全局捕獲、try…catch局部捕獲、promise.reject捕獲、window.addEventlistener(‘error’)捕獲資源加載錯誤等方式實現(xiàn)；處理跨域腳本錯誤需服務(wù)器端配置cors并為script標(biāo)簽添加crossorigin屬性；錯誤分類可依據(jù)類型、來源、級別和用戶行為進(jìn)行區(qū)分，并根據(jù)不同類型采取相應(yīng)處理策略；vue中使用errorhandler和errorcaptured，react中使用componentdidcatch或react-error-boundary進(jìn)行框架內(nèi)錯誤監(jiān)控；上報錯誤信息可通過xmlhttprequest、fetch或image方式發(fā)送到后端，包含錯誤類型、堆棧、時間、用戶信息、瀏覽器及頁面url等關(guān)鍵數(shù)據(jù)；使用sourcemap定位壓縮代碼錯誤需生成并上傳sourcemap文件、配置錯誤監(jiān)控系統(tǒng)解析原始堆棧，同時注意保護(hù)源碼信息不泄露。
JS前端錯誤收集，關(guān)鍵在于及時發(fā)現(xiàn)并處理那些隱藏在代碼深處的bug，提升用戶體驗。下面介紹幾種常見的錯誤監(jiān)控方案，希望能幫助你構(gòu)建更健壯的前端應(yīng)用。
解決方案
前端錯誤收集主要通過以下幾種方式實現(xiàn)：
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
- window.onerror 全局捕獲：這是最基礎(chǔ)的錯誤捕獲方式，可以捕獲大部分JavaScript運行時錯誤。但它無法捕獲語法錯誤和跨域腳本錯誤（需要配置CORS）。
- try…catch 局部捕獲：用于包裹可能出錯的代碼塊，例如異步請求、json解析等。可以更精確地定位錯誤，并進(jìn)行相應(yīng)的處理。
- Promise.reject 捕獲：對于Promise鏈中的錯誤，可以通過.catch()方法捕獲。或者使用unhandledrejection事件監(jiān)聽未處理的Promise rejection。
- window.addEventListener(‘error’, …) 捕獲資源加載錯誤：用于捕獲圖片、css、JS等資源加載失敗的錯誤。
結(jié)合以上幾種方式，可以構(gòu)建一個較為完善的前端錯誤監(jiān)控體系。收集到的錯誤信息可以發(fā)送到后端服務(wù)器，進(jìn)行分析和處理。
如何處理跨域腳本錯誤？
跨域腳本錯誤是前端錯誤監(jiān)控中一個常見的問題。由于瀏覽器的安全限制，window.onerror 默認(rèn)無法捕獲跨域腳本的詳細(xì)錯誤信息，只會顯示 “Script error.”。要解決這個問題，需要進(jìn)行以下兩步：
- 服務(wù)器端配置 CORS：在服務(wù)器端設(shè)置 Access-Control-Allow-Origin 響應(yīng)頭，允許你的域名訪問該腳本。例如，Access-Control-Allow-Origin: * 允許所有域名訪問。
- html 引入 script 標(biāo)簽時添加 crossorigin 屬性：例如，。crossorigin 屬性告訴瀏覽器使用 CORS 機制請求該腳本。
完成以上兩步后，window.onerror 就可以捕獲跨域腳本的詳細(xì)錯誤信息了。需要注意的是，CORS 配置必須正確，否則可能導(dǎo)致腳本無法加載。
如何區(qū)分不同類型的錯誤，并進(jìn)行分類處理？
錯誤類型多種多樣，例如語法錯誤、運行時錯誤、資源加載錯誤、Promise rejection 等。為了更好地分析和處理錯誤，需要對它們進(jìn)行分類。可以根據(jù)以下幾個方面進(jìn)行分類：
- 錯誤類型：例如，EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError 等。
- 錯誤來源：例如，來自哪個文件、哪個函數(shù)、哪一行代碼。
- 錯誤級別：例如，warning、error、fatal。
- 用戶行為：例如，用戶點擊了哪個按鈕、輸入了什么內(nèi)容。
在 window.onerror 中，可以根據(jù) error 對象的 name 和 message 屬性來判斷錯誤類型。對于資源加載錯誤，可以通過 event.target 獲取資源類型和 URL。對于 Promise rejection，可以通過 event.reason 獲取 rejection 的原因。
分類后，可以根據(jù)不同的錯誤類型進(jìn)行不同的處理。例如，對于語法錯誤，可以直接修復(fù)代碼；對于運行時錯誤，可以嘗試重試或降級；對于資源加載錯誤，可以嘗試加載備用資源或顯示錯誤提示。
如何在 vue 或 React 等框架中進(jìn)行錯誤監(jiān)控？
在 Vue 或 React 等框架中，可以使用框架提供的錯誤處理機制，例如：
- Vue：可以使用 Vue.config.errorHandler 全局配置錯誤處理器。也可以在組件中使用 errorCaptured 鉤子函數(shù)捕獲子組件的錯誤。
- React：可以使用 componentDidCatch 生命周期方法捕獲子組件的錯誤。也可以使用第三方庫，例如 react-error-boundary。
這些錯誤處理機制可以捕獲組件渲染過程中的錯誤，并進(jìn)行相應(yīng)的處理。例如，可以顯示錯誤提示、回退到之前的狀態(tài)、或者重新渲染組件。
另外，也可以結(jié)合 window.onerror、try…catch 等方式，構(gòu)建更完善的錯誤監(jiān)控體系。需要注意的是，框架的錯誤處理機制可能無法捕獲所有類型的錯誤，例如異步請求錯誤、事件處理函數(shù)錯誤等。因此，需要根據(jù)實際情況選擇合適的錯誤監(jiān)控方案。
如何上報錯誤信息到后端服務(wù)器？
錯誤收集后，需要將錯誤信息上報到后端服務(wù)器，以便進(jìn)行分析和處理。上報方式有很多種，例如：
- XMLHttpRequest：使用 XMLHttpRequest 對象發(fā)送 POST 請求，將錯誤信息作為請求體發(fā)送到服務(wù)器。
- fetch：使用 fetch API 發(fā)送 POST 請求，與 XMLHttpRequest 類似。
- Image：創(chuàng)建一個 Image 對象，將錯誤信息作為 URL 參數(shù)，發(fā)送 GET 請求到服務(wù)器。這種方式比較簡單，但可能受到 URL 長度限制。
選擇哪種上報方式取決于你的需求和服務(wù)器端的接口。一般來說，POST 請求更適合發(fā)送大量數(shù)據(jù)，GET 請求更適合發(fā)送少量數(shù)據(jù)。
上報時，需要包含以下信息：
- 錯誤類型
- 錯誤信息
- 錯誤堆棧
- 發(fā)生時間
- 用戶 ID
- 瀏覽器信息
- 頁面 URL
這些信息可以幫助你更好地定位和解決問題。
另外，為了避免頻繁上報相同的錯誤，可以對錯誤信息進(jìn)行去重。例如，可以使用一個緩存來記錄已經(jīng)上報過的錯誤，如果相同的錯誤再次發(fā)生，則不再上報。
如何使用 sourcemap 定位壓縮后的代碼錯誤？
在生產(chǎn)環(huán)境中，代碼通常會被壓縮和混淆，導(dǎo)致錯誤堆棧難以閱讀。Sourcemap 可以將壓縮后的代碼映射回原始代碼，方便定位錯誤。
要使用 sourcemap，需要進(jìn)行以下幾步：
- 生成 sourcemap 文件：在構(gòu)建過程中，配置 webpack 或其他構(gòu)建工具生成 sourcemap 文件。
- 上傳 sourcemap 文件到服務(wù)器：將 sourcemap 文件上傳到服務(wù)器，并確保只有授權(quán)用戶才能訪問。
- 配置錯誤監(jiān)控系統(tǒng)：在錯誤監(jiān)控系統(tǒng)中配置 sourcemap URL，以便在發(fā)生錯誤時自動解析錯誤堆棧。
配置完成后，當(dāng)發(fā)生錯誤時，錯誤監(jiān)控系統(tǒng)就可以根據(jù) sourcemap 文件將壓縮后的代碼映射回原始代碼，顯示更清晰的錯誤堆棧。
需要注意的是，sourcemap 文件包含原始代碼的信息，因此需要妥善保管，避免泄露。
總而言之，前端錯誤收集是一個持續(xù)改進(jìn)的過程，需要根據(jù)實際情況不斷調(diào)整和優(yōu)化。通過完善的錯誤監(jiān)控體系，可以及時發(fā)現(xiàn)并解決問題，提升用戶體驗。
