Angular Fire 19性能监控数据无法上报至Firebase控制台

针对Angular 19 + @angular/fire 19.2.0环境下，Firebase性能监控数据无法上报到控制台、且控制台出现无来源请求失败的问题，可按以下步骤排查解决：

1. 确认性能监控的初始化逻辑 #

确保providePerformance正确依赖已初始化的FirebaseApp，避免因实例未就绪导致上报失败。修改app.config.ts中的配置：

export const appConfig: ApplicationConfig = {
  providers: [
    // 先初始化FirebaseApp，确保顺序在前
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    // 显式注入FirebaseApp实例到getPerformance
    providePerformance(({ inject }) => getPerformance(inject(FirebaseApp))),
    // 其他Firebase服务提供者
  ]
};

2. 排查请求失败的具体原因 #

通过Chrome DevTools的Network面板筛选firebaseperf相关请求，查看：

• 响应状态码（如403可能是API密钥权限不足，400可能是请求格式错误）
• 响应体中的错误信息，定位具体上报失败原因
  同时检查Google Cloud控制台中，当前Firebase项目的API密钥是否允许访问firebaseperformance.googleapis.com服务。

3. 验证自定义Trace的实现正确性 #

确保自定义追踪代码正确执行，避免因trace未正常启动/停止导致数据丢失：

// login.component.ts
import { Performance, tracePerformance } from '@angular/fire/performance';

constructor(private perf: Performance) {}

login() {
  const loginTrace = tracePerformance(this.perf, 'login');
  loginTrace.start();

  // 执行登录逻辑...
  
  // 确保登录完成后调用stop
  loginTrace.stop().then(() => {
    console.log('Login trace completed');
  }).catch(err => {
    console.error('Trace stop failed:', err);
  });
}

通过控制台打印trace对象和回调信息，确认trace生命周期正常。

4. 启用调试模式查看详细日志 #

在性能监控初始化时开启调试日志，获取更详细的上报过程信息：

providePerformance(({ inject }) => {
  const perf = getPerformance(inject(FirebaseApp));
  // 开启调试级别日志
  performanceSetLoggerLevel(perf, 'debug');
  return perf;
})

调试日志会输出上报队列、请求状态等细节，帮助定位问题。

5. 验证Angular与@angular/fire的版本兼容性 #

尽管同版本项目正常运行，仍需确认@angular/fire@19.2.0与Angular CLI@19.2.13的兼容性。可尝试：

• 将@angular/fire升级到最新兼容版本
• 临时切换为Angular 17的importProvidersFrom配置方式验证：

  providers: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    importProvidersFrom(AngularFirePerformanceModule),
  ]
  

若此方式正常上报，说明独立提供者配置存在兼容性问题，可参考官方文档调整。

6. 排除数据上报延迟影响 #

Firebase性能监控数据通常需要5-10分钟才会显示在控制台，但结合你遇到的请求失败提示，此可能性较低。若调试日志显示上报成功，可等待一段时间后再检查控制台。

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