Angular2项目客户端错误捕获：如何处理'Failed to load'及HTML文件缺失

刚好我之前在Angular 2项目里处理过一模一样的需求——HTML文件丢失导致页面直接崩溃，后来折腾出一套可行的方案，给你详细说说：

1. 全局错误处理器（兜底捕获所有未拦截错误） #

首先得替换Angular默认的错误处理器，这样能把大部分全局错误兜住，尤其是资源加载这类容易导致页面崩溃的异常。

创建custom-error-handler.ts文件：

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

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    // 精准过滤出 'Failed to load' 相关的资源加载错误
    if (error.message?.includes('Failed to load') || error.name === 'ResourceError') {
      // 只在控制台输出警告，不抛出错误避免页面崩溃
      console.warn('资源加载失败:', error.message);
    } else {
      // 其他错误还是按默认逻辑处理（比如上报或抛出）
      console.error('全局错误:', error);
    }
  }
}

接着在根模块（比如AppModule）里注册这个自定义处理器：

import { NgModule, ErrorHandler } from '@angular/core';
import { CustomErrorHandler } from './custom-error-handler';

@NgModule({
  declarations: [/* 你的组件声明 */],
  imports: [/* 你的模块导入 */],
  providers: [
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

2. 自定义Http服务（捕获HTML文件的HTTP请求失败） #

Angular 2还没有后来的HttpClientInterceptor，所以我们可以包装原生的Http服务，专门针对HTML文件的请求做错误处理：

创建custom-http.service.ts文件：

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class CustomHttpService extends Http {
  constructor(backend: any, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  get(url: string, options?: RequestOptions): Observable<Response> {
    // 只对HTML文件的请求做特殊处理
    if (url.endsWith('.html')) {
      return super.get(url, options).catch((error: Response) => {
        if (error.status === 404) {
          console.warn(`HTML文件不存在: ${url}`);
          // 返回自定义错误信息，避免组件因加载失败崩溃
          return Observable.throw(new Error(`HTML文件加载失败: ${url}`));
        }
        return Observable.throw(error);
      });
    }
    return super.get(url, options);
  }
}

然后在根模块里替换原生的Http服务：

import { NgModule } from '@angular/core';
import { Http, XHRBackend, RequestOptions } from '@angular/http';
import { CustomHttpService } from './custom-http.service';

// 定义工厂函数创建自定义Http服务
export function customHttpFactory(backend: XHRBackend, defaultOptions: RequestOptions) {
  return new CustomHttpService(backend, defaultOptions);
}

@NgModule({
  // ...其他配置
  providers: [
    {
      provide: Http,
      useFactory: customHttpFactory,
      deps: [XHRBackend, RequestOptions]
    }
  ]
})
export class AppModule { }

3. 额外小技巧：组件模板兜底 #

如果是组件直接引用了不存在的模板，还可以给组件设置兜底模板，当templateUrl加载失败时自动切换：

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './missing-file.html', // 可能不存在的HTML文件
  template: '<div>模板加载失败，显示兜底内容</div>' // 兜底内容
})
export class MyComponent { }

这样组合下来，当HTML文件不存在时，页面不会崩溃，只会在控制台输出清晰的错误提示，用户体验会顺畅很多。

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