一、onerror事件基础机制

1.1 事件触发条件

onerror是JavaScript内置的全局错误处理接口，当以下场景发生时自动触发：

• 脚本执行错误：包括语法错误、运行时错误（如调用未定义函数）
• 资源加载失败：图像（img）、脚本（script）、样式表（link）、音视频（audio/video）等标签的src/href属性指向无效资源
• 跨域资源错误：当资源服务器未返回CORS头时，部分浏览器会触发error事件但限制错误详情获取

典型触发示例：

<!-- 图片加载失败 -->
<img src="non-existent.jpg" onerror="console.log('Image load failed')">
<!-- 脚本执行错误 -->
<script>
  undefinedFunction(); // 触发onerror
</script>

1.2 事件参数详解

事件处理函数接收三个核心参数：

window.onerror = function(message, source, lineno, colno, error) {
  console.log({
    message,  // 错误描述文本
    source,   // 发生错误的文件URL
    lineno,   // 错误行号（非跨域场景）
    colno,    // 错误列号（现代浏览器支持）
    error     // Error对象（需显式传递）
  });
  return true; // 阻止浏览器默认错误提示
};

参数注意事项：

• 跨域脚本错误时，部分浏览器会隐藏详细错误信息（仅显示”Script error”）
• 现代浏览器支持第五个error参数（Error对象），但需通过addEventListener绑定才能获取
• 行号/列号在压缩代码场景下可能失去实际意义

二、事件绑定语法对比

2.1 HTML属性绑定

<!-- 基础语法 -->
<img src="error.jpg" onerror="handleImageError(this)">
<!-- 多参数传递 -->
<script src="fail.js" 
        onerror="console.log('Error:', arguments[0], 'at', arguments[1])">
</script>

适用场景：快速原型开发、简单错误处理逻辑

2.2 JavaScript对象绑定

// DOM元素绑定
document.getElementById('myImg').onerror = function() {
  this.src = 'fallback.jpg';
};
// Window全局绑定
window.onerror = function(msg, url, line) {
  // 全局错误处理
  return true; // 阻止默认错误弹窗
};

2.3 addEventListener方式（推荐）

// 支持捕获多个监听器
window.addEventListener('error', function(event) {
  // 事件对象包含target属性
  if (event.target instanceof HTMLImageElement) {
    event.target.src = '/assets/placeholder.png';
  }
}, true); // 使用捕获阶段可拦截更多错误

优势：

• 支持多个监听器共存
• 可通过事件对象获取更丰富的上下文
• 符合现代事件处理规范

三、典型应用场景

3.1 资源降级处理

// 图片加载失败显示占位图
document.querySelectorAll('img').forEach(img => {
  img.onerror = function() {
    this.src = '/images/placeholder.png';
    this.onerror = null; // 防止无限循环
  };
});
// 字体加载失败回退方案
document.fonts.onloadingdone = function(event) {
  if (event.fontface.family === 'CustomFont' && event.status === 'error') {
    document.documentElement.classList.add('font-fallback');
  }
};

3.2 监控告警系统

// 全局错误上报
window.addEventListener('error', function(event) {
  const errorData = {
    type: 'js_error',
    message: event.message,
    stack: event.error?.stack,
    url: window.location.href,
    timestamp: Date.now()
  };
  // 通过日志服务上报
  fetch('/api/log', {
    method: 'POST',
    body: JSON.stringify(errorData)
  });
});
// 资源加载监控
document.addEventListener('error', function(event) {
  if (event.target.tagName === 'IMG') {
    trackEvent('image_load_fail', { src: event.target.src });
  }
}, true);

3.3 WebSocket异常处理

const socket = new WebSocket('wss://example.com');
socket.onerror = function(event) {
  console.error('WebSocket error:', event);
  // 实现重连逻辑
  setTimeout(() => reconnectWebSocket(), 5000);
};
function reconnectWebSocket() {
  // 重连实现...
}

四、安全风险与防范

4.1 XSS攻击向量

攻击者可构造恶意onerror属性执行脚本：

<!-- 恶意代码示例 -->
<img src="x" onerror="alert(document.cookie)">

防御措施：

1. 输入验证：对动态生成的HTML进行严格过滤
2. CSP策略：通过Content-Security-Policy限制内联脚本执行
3. DOM净化：使用DOMPurify等库处理用户输入

4.2 错误信息泄露

敏感信息可能通过错误消息暴露：

// 攻击者可从错误信息中获取路径信息
window.onerror = function(msg) {
  if (msg.includes('/api/secret')) {
    // 敏感路径泄露
  }
};

最佳实践：

• 生产环境禁用详细错误日志
• 实现错误信息脱敏处理
• 使用专业的错误监控服务

五、高级实践方案

5.1 Source Map解析

开发环境保留完整错误信息，生产环境通过Source Map定位问题：

// 错误上报时携带Source Map信息
window.addEventListener('error', function(event) {
  if (process.env.NODE_ENV === 'production') {
    // 上传错误堆栈到服务端解析
    uploadErrorWithSourceMap(event.error.stack);
  }
});

5.2 性能监控集成

将错误监控与性能指标关联分析：

// 结合Performance API
window.addEventListener('error', function() {
  const navigationTiming = performance.getEntriesByType('navigation')[0];
  const loadTime = navigationTiming.loadEventEnd;
  // 分析错误与页面加载阶段的关系
  if (loadTime > 5000) {
    trackSlowPageError();
  }
});

5.3 跨框架兼容方案

// 统一错误处理适配器
class ErrorHandler {
  constructor() {
    this.initGlobalHandler();
    this.initPromiseRejection();
    this.initResourceListeners();
  }
  initGlobalHandler() {
    window.addEventListener('error', this.handleError.bind(this));
  }
  handleError(event) {
    // 标准化错误格式
    const errorData = this.normalizeError(event);
    this.reportError(errorData);
  }
  // 其他初始化方法...
}
new ErrorHandler();

六、总结与建议

1. 分层处理策略：

   • 资源错误：使用DOM事件监听
   • 脚本错误：使用window.onerror或addEventListener
   • 异步错误：结合Promise.catch和unhandledrejection事件

2. 监控体系建议：

   • 基础层：捕获所有未处理错误
   • 业务层：关联用户行为数据
   • 基础设施层：集成日志分析和告警系统

3. 性能优化：

   • 错误采样：避免高频错误影响性能
   • 批量上报：合并多个错误减少网络请求
   • 本地缓存：网络异常时暂存错误数据

通过系统化的错误处理机制，开发者可以显著提升应用稳定性，同时为问题排查提供有效数据支持。建议结合现代前端监控工具（如日志服务、APM系统）构建完整的错误治理体系。