如何为类和Web Components设置作用域内的onerror事件？

先说说为啥你之前的代码没用：HTMLElement上的onerror属性只负责处理元素自身的资源加载错误（比如<img>图片加载失败），根本抓不到组件内部的脚本执行错误，所以你写的那个回调完全不会触发。

下面给你几个可行的实现办法：

1. 用try/catch包裹组件核心逻辑 #

在组件的生命周期钩子（比如connectedCallback、attributeChangedCallback）和自定义方法里，用try/catch把逻辑包起来，这样能精准捕获组件自己的错误：

abstract class Trackable extends HTMLElement {
  override connectedCallback() {
    try {
      // 这里放你的connectedCallback逻辑
      this.initComponent();
    } catch (error) {
      this.reportComponentError(error);
    }
  }

  initComponent() {
    // 组件初始化的具体代码
  }

  reportComponentError(error) {
    // 收集错误信息，比如组件类名、错误栈
    console.log(`[组件错误] ${error.message}`, {
      componentName: this.constructor.name,
      errorStack: error.stack
    });
    // 这里可以把错误发送到追踪服务
  }

  // 其他生命周期方法同理，都用try/catch包裹
  override attributeChangedCallback(name, oldValue, newValue) {
    try {
      // 属性变更的处理逻辑
    } catch (error) {
      this.reportComponentError(error);
    }
  }
}

2. 全局监听+错误栈过滤 #

如果不想每个方法都加try/catch，可以监听全局错误事件，然后通过错误栈判断是不是你的组件代码出的问题：

window.addEventListener('error', (event) => {
  const error = event.error;
  if (!error?.stack) return;

  // 可以通过栈里的类名、文件路径判断
  // 比如你的组件类都继承自Trackable，或者脚本文件有特定标识
  const isOurComponentError = error.stack.includes('Trackable') || event.filename.includes('our-components.js');

  if (isOurComponentError) {
    console.log('组件相关错误:', error);
    // 上报到追踪服务
  }
});

注意：不同浏览器的错误栈格式可能不一样，需要做些兼容处理，不然可能漏判或误判。

3. 用自定义错误类标记组件错误 #

在组件里抛错时用自定义的错误类，然后全局监听里只处理这种类型的错误：

class ComponentError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ComponentError';
  }
}

// 组件内部抛错
abstract class Trackable extends HTMLElement {
  initComponent() {
    if (someWrongCondition) {
      throw new ComponentError('组件初始化失败：参数错误');
    }
  }
}

// 全局监听
window.addEventListener('error', (event) => {
  if (event.error instanceof ComponentError) {
    console.log('组件专属错误:', event.error);
    // 执行上报逻辑
  }
});

好用的错误追踪服务 #

• Sentry: 支持自定义过滤规则，能精准只收你组件的错误，还能加组件上下文信息方便排查。
• Bugsnag: 自带错误源定位，能给错误打自定义标签，筛选组件相关错误很方便。
• Rollbar: 支持按代码路径、错误类型过滤，特别适合追踪嵌入第三方网站的组件错误。

这些服务都允许你上报错误时附加组件的类名、当前属性值之类的元数据，排查问题更高效。

内容的提问来源于stack exchange，提问作者psygo