1.錯誤捕獲
錯誤捕獲是前端錯誤監控平臺的關鍵步驟，透過捕獲 JavaScript 執行時產生的錯誤，平臺能夠實時地感知到應用程式的健康狀況。以下是錯誤捕獲的主要內容：
全域性錯誤事件監聽
前端錯誤監控平臺通常會註冊全域性的錯誤事件監聽器，例如 window.onerror。這個事件在發生未被捕獲的錯誤時觸發，提供了一個機會來捕獲錯誤並執行相應的處理邏輯。
window.onerror = function(message, source, lineno, colno, error) {// 處理錯誤資訊// 上報錯誤資料
};
透過這個事件，平臺可以捕獲到錯誤的訊息、發生錯誤的指令碼檔案、行號、列號以及錯誤物件本身。
對應引數：
ErrorEvent.prototype.message 只讀
一個`字串`，包含了所發生錯誤的描述資訊。
ErrorEvent.prototype.filename 只讀
一個 `字串`，包含了發生錯誤的指令碼檔案的檔名。
ErrorEvent.prototype.lineno 只讀
一個數字，包含了錯誤發生時所在的行號。
ErrorEvent.prototype.colno 只讀
一個數字，包含了錯誤發生時所在的列號。
ErrorEvent.prototype.error 只讀 實驗性
發生錯誤時所丟擲的 `Error` 物件。
錯誤型別
JavaScript 中常見的錯誤型別有多種，下面列舉了一些主要的錯誤型別
ReferenceError（引用錯誤）:
window.onerror = function(message, source, lineno, colno, error) {
console.error(`Error Type: ${error.name}`);
console.error(`Error Message: ${error.message}`);
console.error(`Source: ${source}`);
console.error(`Line: ${lineno}`);
console.error(`Column: ${colno}`);
};
function referenceErrorExample() {
// 嘗試訪問未定義的變數
console.log(undefinedVariable);
}
referenceErrorExample();
TypeError（型別錯誤）:
window.onerror = function(message, source, lineno, colno, error) {
console.error(`Error Type: ${error.name}`);
console.error(`Error Message: ${error.message}`);
console.error(`Source: ${source}`);
console.error(`Line: ${lineno}`);
console.error(`Column: ${colno}`);
};
function typeErrorExample() {
// 嘗試對非函式型別的變數進行呼叫
null();
}
typeErrorExample();
SyntaxError（語法錯誤）:
window.onerror = function(message, source, lineno, colno, error) {
console.error(`Error Type: ${error.name}`);
console.error(`Error Message: ${error.message}`);
console.error(`Source: ${source}`);
console.error(`Line: ${lineno}`);
console.error(`Column: ${colno}`);
};
function syntaxErrorExample() {
// 語法錯誤，如括號不匹配
console.log('Hello World';
}
syntaxErrorExample();
RangeError（範圍錯誤）:
window.onerror = function(message, source, lineno, colno, error) {
console.error(`Error Type: ${error.name}`);
console.error(`Error Message: ${error.message}`);
console.error(`Source: ${source}`);
console.error(`Line: ${lineno}`);
console.error(`Column: ${colno}`);
};
function rangeErrorExample() {
// 嘗試傳遞超出範圍的數值給函式
const arr = new Array(-1);
}
rangeErrorExample();
這些示例展示了一些常見的錯誤型別，並透過 window.onerror 進行錯誤捕獲。在實際應用中，爲了更好地處理錯誤，通常會根據錯誤型別進行適當的處理和上報。
非同步錯誤捕獲
對於非同步操作中的錯誤，例如 Promise 或者 setTimeout 中的錯誤，平臺還需額外處理。一種常見的方式是透過 window.addEventListener 監聽 unhandledrejection 事件。
window.addEventListener('unhandledrejection', function(event) {
// 處理非同步錯誤資訊// 上報錯誤資料
});
這樣，平臺能夠捕獲到 Promise 中未被處理的錯誤。
window.addEventListener
引數不同：這個事件處理函式的引數是一個
Event物件，包含了error屬性，它也是一個包含錯誤資訊的物件。錯誤捕獲的範圍：
window.onerror主要用於捕獲全域性的未被捕獲的錯誤，包括執行時錯誤、語法錯誤、非同步操作中的錯誤等。但是，它無法捕獲某些型別的錯誤，比如資源載入錯誤（例如圖片載入失敗）。window.addEventListener('error')可以用於捕獲更多型別的錯誤，包括資源載入錯誤，如圖片、指令碼、樣式表載入失敗等多個監聽器的處理方式：
window.onerror只允許設定一個全域性錯誤事件監聽器。window.addEventListener('error')允許註冊多個錯誤事件監聽器，它們將按照註冊的順序執行。阻止預設行為的方式：
window.onerror回撥函式可以返回true來阻止瀏覽器預設的錯誤處理行為。在window.addEventListener('error', function(event) {})的回撥函式中，可以呼叫event.preventDefault()來阻止瀏覽器預設的錯誤處理行為。
window.addEventListener('error', function(event) {
// 圖片、script、css載入錯誤，都能被捕獲
});
vue
在 Vue 中，你可以透過配置 errorHandler 來捕獲全域性的錯誤。Vue 提供了一個全域性的錯誤處理器，可以用來捕獲元件渲染和生命週期鉤子中的錯誤。透過這個錯誤處理器，你可以自定義錯誤的處理方式，包括上報到錯誤監控平臺。傳入 Vue 例項是爲了更好地融入 Vue 生態系統，方便獲取當前元件的上下文資訊。
下面是一個完整的 Vue 錯誤捕獲的示例：
// main.js
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
// 全域性錯誤處理器
Vue.config.errorHandler = function(err, vm, info) {
// err: 錯誤物件// vm: Vue 例項，發生錯誤的元件
// info: Vue 特定的錯誤資訊，比如錯誤所在的生命週期鉤子
// 在實際應用中，你可以將錯誤資訊上報到錯誤監控平臺c
onsole.error('Vue Error:', err, info);
// 如果需要阻止該錯誤繼續傳播，可以返回 false// return false;
};
new Vue({
render: h => h(App),
}).$mount('#app');
2.錯誤資訊採集
錯誤資訊採集階段是爲了獲取更多關於錯誤的上下文資訊，以便更好地分析和解決問題。下面詳細介紹錯誤資訊採集的實現方法：
堆疊軌跡資訊
透過錯誤物件的堆疊軌跡（stack trace），平臺可以獲取導致錯誤的函式呼叫鏈。這對於定位錯誤位置非常有幫助。
window.onerror = function(message, source, lineno, colno, error) {
const stackTrace = error.stack;// 上報錯誤資料，包含堆疊軌跡資訊
};
錯誤發生位置
在 window.onerror 事件中，source 引數提供了發生錯誤的指令碼檔案的 URL。結合行號和列號，可以準確地定位到錯誤發生的位置。
window.onerror = function(message, source, lineno, colno, error) {
const errorLocation = `${source}:${lineno}:${colno}`;// 上報錯誤資料，包含錯誤發生位置資訊
};
錯誤型別判斷
錯誤物件中的 name 屬性通常包含了錯誤的型別。透過判斷錯誤型別，平臺可以對錯誤進行分類，有針對性地進行處理。
window.onerror = function(message, source, lineno, colno, error) {
const errorType = error.name;// 根據錯誤型別進行處理// 上報錯誤資料，包含錯誤型別資訊
};
參考： developer.mozilla.org/en-US/docs/…
developer.mozilla.org/zh-CN/docs/…
