如何在Angular 10应用中通过Web API将所有错误日志存入数据库

实现逻辑 #

• Angular 内置了ErrorHandler抽象类，默认实现仅会将错误打印到控制台，我们可以自定义实现该类的handleError方法，接管应用内所有全局错误的处理逻辑，包括组件运行时错误、服务抛出的错误、HTTP请求错误都会被该钩子统一捕获。
• 在自定义错误处理服务中注入HTTP客户端，组装错误的核心信息（错误描述、堆栈信息、发生时间、当前页面路由、用户设备信息、登录态信息等）后调用后端Web API接口完成上报，后端接口收到数据后写入数据库存储即可。
• 将自定义的错误处理类在根模块的providers中注册，替换Angular默认的ErrorHandler实现即可生效。
• 额外注意处理上报请求本身抛出错误的场景，避免触发错误上报的死循环；同时区分生产/开发环境，开发环境保留控制台打印方便调试。

代码示例 #

1. 创建全局错误处理服务 #

执行CLI命令生成服务：
ng generate service services/global-error-handler

服务代码：

import { ErrorHandler, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';

@Injectable()
export class GlobalErrorHandlerService implements ErrorHandler {
  constructor(private http: HttpClient) {}

  handleError(error: any): void {
    // 开发环境打印错误到控制台方便调试
    if (!environment.production) {
      console.error('全局捕获错误：', error);
    }

    // 组装需要上报的错误信息
    const errorLog = {
      message: error.message || '未知错误',
      stack: error.stack || '',
      pageUrl: window.location.href,
      userAgent: navigator.userAgent,
      timestamp: new Date().toISOString(),
      // 可按需追加自定义字段，比如当前登录用户ID
      // userId: localStorage.getItem('currentUserId') || ''
    };

    // 调用后端接口上报错误
    this.http.post('/api/error/log', errorLog)
      .subscribe({
        next: () => {},
        error: (reportError) => {
          // 上报本身出错仅控制台打印，不要重新抛出避免死循环
          if (!environment.production) {
            console.error('错误上报失败：', reportError);
          }
        }
      });
  }
}

2. 根模块注册自定义错误处理器 #

修改app.module.ts配置，替换默认的错误处理器：

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { GlobalErrorHandlerService } from './services/global-error-handler.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 必须导入否则HTTP请求无法正常使用
  ],
  providers: [
    // 替换默认ErrorHandler为自定义实现
    { provide: ErrorHandler, useClass: GlobalErrorHandlerService }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 可选：HTTP错误补充信息捕获 #

如果需要对接口请求错误追加请求方法、路径、状态码等额外信息，可以配合HTTP拦截器使用：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class ErrorLogInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // 给HTTP错误附加请求相关信息
        error.message = `接口请求异常：${request.method} ${request.url}，状态码：${error.status}，${error.message}`;
        return throwError(() => error);
      })
    );
  }
}

同样在app.module.ts的providers中注册拦截器：

providers: [
  { provide: ErrorHandler, useClass: GlobalErrorHandlerService },
  { provide: HTTP_INTERCEPTORS, useClass: ErrorLogInterceptor, multi: true }
]

注意事项 #

• 上报接口本身的错误不要重新抛出，否则会触发全局错误处理的死循环。
• 生产环境建议不要将敏感错误信息暴露到前端页面，仅上报到后端存储即可。
• 短时间产生大量错误的场景可以做防抖/批量上报优化，减少不必要的接口请求。

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