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