Angular自定义ErrorHandler回调不执行 报handleErrorCallback不是函数

问题核心原因 #

你的报错本质是CustomErrorHandlerService的handleErrorCallback属性在被调用时未被正确赋值为函数，常见触发原因有两个：

• ErrorProcessor 服务未被Angular实例化：Angular的Injectable服务为懒加载机制，只要没有任何组件/其他服务在构造函数中注入过ErrorProcessor，它的构造函数永远不会执行，自然不会给handleErrorCallback赋值，该属性始终为undefined，调用时就会抛出「不是函数」的错误。
• 回调方法this指向丢失（潜在问题，也是很多人赋值后逻辑运行异常的常见原因）：直接将类的普通方法赋值给外部回调时，方法执行时的this会指向触发回调的CustomErrorHandlerService实例，而非ErrorProcessor实例，可能导致ErrorProcessor内部属性调用异常。

解决方案 #

1. 确保ErrorProcessor被正常实例化 #

在应用根组件AppComponent或者其他全局生效的服务中主动注入ErrorProcessor，触发Angular初始化该服务：

// app.component.ts
import { Component } from '@angular/core';
import { ErrorProcessor } from './error-processor.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 注入后Angular会自动创建ErrorProcessor实例，执行构造函数逻辑
  constructor(private errorProcessor: ErrorProcessor) {}
}

2. 修正回调的this指向 #

二选一即可：

• 方式一：用箭头函数定义handleError，自动绑定当前ErrorProcessor实例作为this

// ErrorProcessor类中修改方法定义
public handleError = (error: Error): void => {
  console.log('error processed', error);
}

• 方式二：赋值时用bind手动绑定this指向

// ErrorProcessor构造函数中修改赋值逻辑
constructor(private customErrorHandler: CustomErrorHandlerService) {
  this.customErrorHandler.handleErrorCallback = this.handleError.bind(this);
}

3. 可选健壮性优化 #

给handleErrorCallback添加默认空实现，避免极端场景下未赋值触发报错：

// CustomErrorHandlerService中修改属性定义
public handleErrorCallback: (error: Error) => void = () => {};

补充检查点 #

确保你已经在根模块AppModule中注册了自定义错误处理器，否则Angular不会用你的服务处理全局错误：

// app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { CustomErrorHandlerService } from './custom-error-handler.service';
import { ErrorProcessor } from './error-processor.service';

@NgModule({
  // 其他模块、声明等配置省略
  providers: [
    // 注册自定义错误处理器为全局ErrorHandler
    { provide: ErrorHandler, useClass: CustomErrorHandlerService },
    CustomErrorHandlerService,
    ErrorProcessor
  ]
})
export class AppModule { }

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