Angular：如何区分模板运行时错误与普通错误并识别重复错误？

问题场景 #

当在Angular模板中写入{{x.y}}，且x为undefined时，会触发如下错误：

TypeError: Cannot read properties of undefined (reading 'y')
这类模板表达式错误会在每个应用变更检测周期重复抛出，需要在自定义ErrorHandler中实现两个核心判断：

• a) 该错误是否由Angular模板渲染导致
• b) 该错误是否与上次触发的模板错误重复

当前原生机制的限制 #

Angular目前没有提供原生标识来区分模板错误和普通运行时错误——模板表达式抛出的错误，其类型、结构和普通代码抛出的同类型错误完全一致，没有内置字段或标记来直接判定来源。

临时解决方案（基于错误栈特征） #

虽然没有原生支持，但可以通过错误栈中包含的Angular模板渲染内部函数特征，近似判断是否为模板错误；同时通过缓存错误的关键信息来识别重复错误。

修改后的自定义ErrorService示例：

export class ErrorService implements ErrorHandler {
  private lastTemplateErrorKey: string | null = null;
  // Angular模板渲染相关的内部函数关键词，不同版本可能略有差异
  private readonly templateErrorKeywords = ['ɵɵpropertyInterpolate', 'ɵɵtextInterpolate', 'TemplateRenderer'];

  handleError(error: any): void {
    const isTemplateError = this.isErrorFromTemplate(error);
    
    if (isTemplateError) {
      const errorKey = this.generateUniqueErrorKey(error);
      // 重复错误直接跳过
      if (errorKey === this.lastTemplateErrorKey) {
        return;
      }
      this.lastTemplateErrorKey = errorKey;
    }

    // 这里编写你的错误处理逻辑
    console.error('处理异常:', error);

    // 注意：手动调用tick可能引发循环错误，需谨慎使用
    // this.injector.get(ApplicationRef).tick();
  }

  private isErrorFromTemplate(error: any): boolean {
    if (!error.stack) return false;
    return this.templateErrorKeywords.some(keyword => error.stack.includes(keyword));
  }

  private generateUniqueErrorKey(error: any): string {
    // 用错误消息+栈信息前3行生成唯一标识，避免不同场景的相同错误被误判
    const errorMsg = error.message || '';
    const stackFragment = error.stack?.split('\n').slice(0, 3).join('') || '';
    return `${errorMsg}-${stackFragment}`;
  }

  injector = inject(Injector);
}

方案局限性 #

• 关键词依赖Angular内部实现，不同版本的内部函数名可能变化，导致判断失效
• 无法100%区分所有模板错误，存在误判或漏判的可能

补充说明 #

目前该需求无法通过Angular原生机制实现，已提交特性请求，欢迎社区支持。

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