Angular客户端错误日志上报服务：HTTP请求未触发问题

哦，这个问题我太熟了！你遇到的是Angular HttpClient最常见的坑之一——Observable的冷订阅特性。

你看，HttpClient的post方法返回的是一个RxJS Observable，而Observable默认是“冷”的：你只是创建了请求的蓝图，但如果不主动订阅它，这个请求根本不会被发送出去。你现在的代码只是调用了post，但没有订阅，所以控制台能打印出error.stack，但HTTP请求压根没发起。

有几种常见的实现方式，你可以根据自己的代码风格选择：

方式1：直接调用subscribe()（最常用） #

直接订阅Observable，同时记得处理成功和失败的情况，避免未捕获的错误：

import { HttpClient } from '@angular/common/http';

export class AngularLoggerService {
 constructor(private http: HttpClient) {}

 logError(error: Error) {
  console.log(error.stack);
  
  this.http.post('/angular/log', { message: error.stack })
    .subscribe({
      next: () => console.log('错误日志上报成功'),
      error: (err) => console.error('错误日志上报失败:', err)
    });
 }
}

方式2：用async/await（更像同步代码） #

如果你习惯用异步语法，可以把Observable转成Promise。注意：Angular 12+推荐用firstValueFrom/lastValueFrom替代已废弃的toPromise()：

import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

export class AngularLoggerService {
 constructor(private http: HttpClient) {}

 async logError(error: Error) {
  console.log(error.stack);
  
  try {
    await firstValueFrom(
      this.http.post('/angular/log', { message: error.stack })
    );
    console.log('错误日志上报成功');
  } catch (err) {
    console.error('错误日志上报失败:', err);
  }
 }
}

一定要处理订阅后的错误！如果HTTP请求失败（比如服务器报错、网络中断），Observable会抛出错误，如果没有捕获，会触发Angular的全局错误处理器，甚至可能导致应用异常。所以上面的示例里都加了错误处理逻辑。

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