有效处理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中可能出现的空错误对象，从而构建更健壮的错误监控和上报机制。
