如何在GlobalErrorHandler的handleError函数中路由至错误页面

嘿，我来帮你搞定这个自动路由到错误页面的需求！

核心思路是在你的GlobalErrorHandler中安全注入路由服务，在全局捕获错误后自动跳转，同时规避循环依赖、路由循环这些坑，下面是具体实现步骤：

步骤1：在GlobalErrorHandler中安全注入Router #

直接注入Router可能触发循环依赖，所以我们用Injector间接获取路由服务，这样更稳妥：

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class GlobalErrorHandler extends ErrorHandler {
  private router: Router;

  constructor(private injector: Injector) {
    super();
  }

  handleError(error: any): void {
    // 延迟获取Router，避免初始化时的循环依赖
    if (!this.router) {
      this.router = this.injector.get(Router);
    }

    // 先记录错误日志（建议上报到监控系统，方便排查）
    console.error('全局捕获到未处理错误:', error);

    // 避免路由循环：如果已经在错误页面，就不再重复跳转
    const currentPath = this.router.url;
    if (currentPath !== '/error') {
      // 跳转到错误页面，同时处理跳转失败的情况
      this.router.navigate(['/error']).catch(navError => {
        console.error('跳转错误页面失败:', navError);
        // 降级处理：比如显示一个全局弹窗提示用户
      });
    }

    // 保留父类的默认错误处理逻辑
    super.handleError(error);
  }
}

步骤2：确认AppModule中的提供者配置 #

你已经提到重写了默认提供者，这里再核对一下正确配置：

import { NgModule, ErrorHandler } from '@angular/core';
import { GlobalErrorHandler } from './path-to-your/global-error-handler';

@NgModule({
  // ...其他模块配置（组件、导入项等）
  providers: [
    { provide: ErrorHandler, useClass: GlobalErrorHandler }
  ]
})
export class AppModule { }

额外实用提示 #

• 区分错误类型：如果有些非致命错误（比如接口请求的404）不需要跳转到错误页面，可以在handleError里加判断，只对致命错误（比如TypeError、未知异常）执行路由跳转。
• 错误页面容错：确保你的错误页面本身不会抛出错误，不然会陷入无限循环跳转。
• 携带错误信息：如果需要在错误页面展示错误详情，可以通过路由参数传递简化后的错误信息：

  this.router.navigate(['/error'], { 
    queryParams: { message: error.message?.slice(0, 100) } 
  });
  

这样一来，所有未被手动捕获的致命错误都会自动触发路由跳转，再也不用担心因为遗漏用例导致用户卡在出错页面啦～

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