macOS Safari中Unhandled Promise Rejection错误排查求助

问题说明 #

仅在macOS Safari浏览器中触发未处理Promise拒绝错误，错误信息为：

Unhandled Promise Rejection: Error: Error response received for message <get-frame-manager-configuration>

最初怀疑是自身业务中的API调用导致，尝试添加catch捕获、使用Promise.all，甚至注释掉API调用代码并移除ngOnInit的async修饰符后，错误依然存在。

相关代码 #

component.ts

async ngOnInit(): Promise<void> {
    await this.attractionService.getAttractions().then((results) => {
      results.forEach((attraction: { id: number; name: string; description: string; type: string; distance: string | undefined; imagePath: string | undefined; }) => {
        this.section2ndModelAttractions.push(
          new Card(
            attraction.id,
            attraction.name,
            attraction.description,
            attraction.type,
            attraction.distance,
            attraction.imagePath
          )
        )
      })
    })
  }

AttractionService.ts

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

@Injectable({
  providedIn: 'root'
})
export class AttractionService {

  constructor(private http: HttpClient) { }

  async getAttractions(): Promise<any> {
    return firstValueFrom(this.http.get<any>("https://localhost:7273/api/Attraction/All"));
  }
}

排查与修复方案 #

1. 先明确错误来源 #

这个错误并非来自你的业务API调用，get-frame-manager-configuration是Angular内部iframe管理相关的标识，大概率是Safari的安全策略限制或第三方依赖中的iframe初始化失败导致的未捕获Promise。

2. 具体修复步骤 #

（1）全局捕获特定错误

在项目中添加全局错误处理器，针对该Safari特定错误做静默处理或日志记录，避免影响业务：

// src/app/global-error-handler.ts
import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    // 匹配目标错误信息，做针对性处理
    if (error.message?.includes('get-frame-manager-configuration')) {
      console.warn('Safari iframe框架管理器初始化警告:', error);
      return;
    }
    // 其他错误正常抛出
    throw error;
  }
}

在根模块中替换默认错误处理器：

// src/app/app.module.ts
import { ErrorHandler } from '@angular/core';
import { GlobalErrorHandler } from './global-error-handler';

@NgModule({
  // ...其他配置
  providers: [
    { provide: ErrorHandler, useClass: GlobalErrorHandler }
  ]
})
export class AppModule { }

（2）排查第三方依赖

梳理项目中所有引入的第三方库（比如地图组件、广告SDK、第三方UI库等），这些组件常内置iframe。尝试临时移除这些依赖，验证错误是否消失，定位到具体依赖后，查看其是否有Safari兼容的更新版本。

（3）调整Safari浏览器设置（测试用）

临时关闭Safari的阻止跨域跟踪和阻止所有Cookie选项，确认是否是浏览器安全设置限制导致iframe初始化失败。

（4）优化Angular编译配置

在angular.json中调整编译目标和polyfill，提升Safari兼容性：

"architect": {
  "build": {
    "options": {
      "polyfills": ["src/polyfills.ts", "core-js/proposals/promise-all-settled"],
      "target": "ES2020"
    }
  }
}

错误根源定位方法 #

• 用Safari调试器追踪：打开Safari开发者工具，在调试器的"异常断点"中勾选"捕获所有异常"，错误触发时查看完整调用栈，定位到抛出错误的具体脚本（即使是Angular核心或第三方库）。
• 最小化复现项目：创建一个仅包含Angular基础结构的空白项目，逐步添加业务代码和第三方依赖，直到错误出现，精准定位触发因素。
• 查看控制台详细信息：在Safari控制台中展开错误详情，查看触发错误的文件路径和调用栈，判断错误来源是Angular核心、第三方脚本还是其他隐藏逻辑。

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