Angularfire getDownloadURL()无法捕获404日志问题求助

针对@angular/fire": "^7.5.0"版本，即便你在代码中捕获了错误，浏览器仍会输出404日志——这是因为浏览器会记录所有失败的网络请求，而getDownloadURL方法在文件不存在时会直接发起请求触发404。可通过以下两种方式解决：

方法一：提前检查文件是否存在 #

在调用getDownloadURL前，先通过getMetadata方法判断文件是否存在，避免发起无效请求：

import { AngularFireStorage } from '@angular/fire/compat/storage';

constructor(private storage: AngularFireStorage) {}

async getFileUrl(path: string) {
  try {
    // 先获取文件元数据，验证文件存在性
    await this.storage.ref(path).getMetadata().toPromise();
    // 元数据获取成功后，再获取下载链接
    const url = await this.storage.ref(path).getDownloadURL().toPromise();
    return url;
  } catch (error) {
    // 此处处理文件不存在逻辑，不会触发浏览器404日志
    console.log('文件不存在');
    return null;
  }
}

方法二：全局拦截Storage请求 #

若需统一处理所有Storage请求的404日志，可通过Angular HTTP拦截器过滤相关错误：

1. 创建拦截器文件：

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

@Injectable()
export class StorageErrorInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 判定是否为Firebase Storage请求
    if (request.url.includes('firebasestorage.googleapis.com')) {
      return next.handle(request).pipe(
        catchError((error: HttpErrorResponse) => {
          // 过滤文件不存在的404错误，不输出到控制台
          if (error.status === 404 && error.error.error.message.includes('Object not found')) {
            return new Observable(); // 静默处理，不抛出错误
          }
          return throwError(() => error);
        })
      );
    }
    return next.handle(request);
  }
}

2. 在app.module.ts中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { StorageErrorInterceptor } from './storage-error.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: StorageErrorInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

注意：方法二会拦截所有Storage的404请求，若需区分场景，可在拦截器中添加更精准的判断条件。

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