JavaScript如何使用window.onerror指定错误处理函数

# JavaScript如何使用window.onerror指定错误处理函数

## 引言

在JavaScript开发中，错误处理是保证应用健壮性的关键环节。`window.onerror`作为浏览器提供的全局错误捕获机制，能够帮助我们集中处理未被捕获的运行时错误。本文将深入探讨`window.onerror`的使用方法、参数解析、注意事项以及现代替代方案。

## 一、基本语法与参数

`window.onerror`的基本使用方式如下：

```javascript
window.onerror = function(message, source, lineno, colno, error) {
  // 错误处理逻辑
  return true; // 阻止默认错误提示
};

参数详解：

1. message（字符串）：错误信息
2. source（字符串）：发生错误的脚本URL
3. lineno（数字）：错误发生的行号
4. colno（数字）：错误发生的列号
5. error（Error对象）：完整的Error对象（部分浏览器支持）

注意：前三个参数在所有主流浏览器中都支持，colno和error参数在新版本浏览器中才可用

二、典型使用场景

1. 基础错误捕获

window.onerror = function(msg, url, line) {
  console.error(`Error: ${msg} at ${url}:${line}`);
  return true; // 阻止浏览器控制台报错
};

2. 配合错误上报系统

window.onerror = function(msg, url, line, col, error) {
  const stack = error ? error.stack : 'No stack trace';
  fetch('/api/log-error', {
    method: 'POST',
    body: JSON.stringify({ msg, url, line, col, stack })
  });
  return false; // 允许浏览器默认处理
};

3. 区分错误类型

window.onerror = function(msg) {
  if (msg.includes('Script error')) {
    handleCrossOriginError();
  } else {
    handleNormalError();
  }
};

三、重要注意事项

1. 跨域脚本限制

对于不同域的脚本，浏览器出于安全考虑只会返回”Script error.“的通用信息。要获取完整错误信息需要： 1. 添加crossorigin属性：

   <script src="https://other-domain.com/app.js" crossorigin></script>

1. 服务器设置CORS头：

   
   Access-Control-Allow-Origin: *
   

2. 返回值的作用

• 返回true：阻止浏览器默认错误处理
• 返回false或不返回值：浏览器会显示默认错误

3. 无法捕获的情况

window.onerror不能捕获： - 语法错误（SyntaxError） - 异步回调中的错误（需配合try/catch） - Promise rejection（需使用unhandledrejection事件）

四、现代替代方案

1. addEventListener方式

更推荐的事件监听方式：

window.addEventListener('error', function(event) {
  // event包含更丰富的错误信息
  console.log(event.error.stack);
});

2. Promise错误捕获

window.addEventListener('unhandledrejection', event => {
  console.warn(`Unhandled rejection: ${event.reason}`);
});

3. 专业监控方案

• Sentry
• Bugsnag
• Rollbar

五、最佳实践建议

1. 生产环境部署：

   if (window.ENV === 'production') {
    window.onerror = productionErrorHandler;
   }
   

2. 错误信息增强：

   window.onerror = function(msg, url, line, col, error) {
    const userAgent = navigator.userAgent;
    const viewport = `${window.innerWidth}x${window.innerHeight}`;
    // 附加环境信息上报
   };
   

3. 避免循环报错：

   let hasError = false;
   window.onerror = function() {
    if (hasError) return;
    hasError = true;
    // 处理错误
   };
   

结语

window.onerror作为JavaScript错误处理的基础机制，虽然有其局限性，但在兼容性和简单场景下仍非常有用。对于现代Web应用，建议结合try/catch、Promise错误处理和第三方监控工具构建完整的错误监控体系。

注意：实际开发中应根据目标浏览器兼容性调整实现方案，并始终在真实环境中测试错误处理逻辑。 “`