JavaScript Window.onerror事件学习新收获

什么是window.onerror事件？

window.onerror 事件是在浏览器捕获到一个未处理的 JavaScript 错误时触发的事件。可以用来监听页面 JS 错误，并进行相应的处理，如记录错误信息、提示错误、上报错误等。

如何使用window.onerror事件？

在页面中添加以下代码块即可：

window.onerror = function(errorMsg, url, lineNumber, column, errorObj) {
  // TODO: 处理错误信息的逻辑
}

window.onerror 的回调函数接收如下参数：

参数名	类型	描述
errorMsg	String	错误信息
url	String	发生错误的文件 URL
lineNumber	Number	发生错误的行号
column	Number	发生错误的列号（某些浏览器不支持）
errorObj	Object	错误对象（仅FireFox浏览器支持）

如何对错误信息进行处理？

window.onerror 的回调函数传入了错误信息、错误代码所在文件地址、错误代码所在行数等信息，可以根据这些信息对错误进行处理，如将错误信息打印到控制台、记录错误日志等。

例一：将错误信息打印到控制台

window.onerror = function(errorMsg, url, lineNumber, column, errorObj) {
  console.log('Caught an error:', errorMsg, 'in', url, 'at', lineNumber, column);
};

例二：记录错误日志

window.onerror = function(errorMsg, url, lineNumber, column, errorObj) {
  // 发送 Ajax 请求将错误信息记录到服务器
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/log');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send(`errorMsg=${encodeURIComponent(errorMsg)}&url=${encodeURIComponent(url)}&lineNumber=${encodeURIComponent(lineNumber)}&column=${encodeURIComponent(column)}`);
};

总结

通过对 window.onerror 事件的学习和应用，我们可以有效地捕获和处理页面 JS 错误，提高网站的稳定性和用户体验。在使用中还需注意跨域问题、错误信息的安全性、错误信息的去重和过滤等问题。