Web全局錯誤捕獲：如何處理window.onerror中空錯誤對象的問題？

有效處理window.onError事件中空錯誤對象

在Web開發中，全局錯誤處理對于應用穩定性至關重要。本文探討window.onerror事件處理程序中遇到的空錯誤對象({})問題，以及如何更可靠地進行錯誤處理。

問題：開發者使用window.onerror捕獲JavaScript錯誤并上報至服務器。然而，部分上報數據顯示錯誤對象為空({“error”: “{}”})，缺少預期的stack、message等屬性。嘗試遍歷屬性或直接訪問屬性都未能解決所有空對象的情況。

原因：window.onerror回調函數中的error參數并非總是包含完整錯誤信息。某些瀏覽器中的同步異常或非JavaScript代碼觸發的錯誤可能導致error為NULL、undefined或空對象{}。json.stringify會忽略undefined屬性，導致上報數據為空。直接訪問error.message等屬性可能拋出異常。

解決方案：在處理error對象前，進行更全面的檢查和處理：

window.onerror = (message, source, line, col, error) => {     const errorData = {         message: message || '',         source: source || '',         line: line || 0,         col: col || 0,         stack: error ? error.stack : ''     };      fetch('xxx', { method: 'POST', body: JSON.stringify({ error: errorData }) }); };

此代碼創建errorData對象，并使用邏輯或運算符(||)為每個屬性提供默認值，避免undefined值導致的屬性丟失。即使error為null或undefined，也能確保上報數據包含必要信息，提高了錯誤處理的魯棒性。 我們也添加了method: ‘POST’到fetch請求中，使其更清晰。

通過這種方法，可以有效地處理window.onerror中可能出現的空錯誤對象，從而構建更健壯的錯誤監控和上報機制。