Angular应用Service Worker请求Sentry返回504 如何配置不拦截POST请求

方法1：通过ngsw-config.json配置忽略Sentry相关路径（最简便） #

Angular Service Worker 提供了ignoredRoutes配置项，所有匹配该规则的请求都不会被 Service Worker 拦截，直接走原生网络请求。
修改你项目根目录下的ngsw-config.json，添加如下配置：

{
  "index": "/index.html",
  "assetGroups": [
    // 你原本的静态资源缓存配置，保持不变
  ],
  "dataGroups": [
    // 你原本的接口缓存配置，保持不变
  ],
  // 新增忽略规则
  "ignoredRoutes": [
    // 云服务版Sentry匹配规则
    "https://*.sentry.io/**",
    // 如果是自建Sentry服务，替换为你对应的Sentry服务域名/路径
    "https://your-self-hosted-sentry.com/**",
    // 如果用了后端代理转发Sentry请求，加对应的代理路径
    "/api/sentry/**"
  ]
}

方法2：自定义Service Worker逻辑（适用于需要按请求方法过滤的场景） #

如果需要更精准的控制，只跳过Sentry的POST请求、不影响其他同域名请求，可以扩展Angular默认的Service Worker逻辑：

1. 在项目src目录下新建custom-sw.js，添加如下代码：

importScripts('./ngsw-worker.js');

self.addEventListener('fetch', (event) => {
  const request = event.request;
  // 匹配Sentry相关的POST请求，直接跳过Service Worker处理
  if (
    request.method === 'POST' && 
    (request.url.includes('sentry.io') || request.url.includes('/sentry/'))
  ) {
    return;
  }
});

2. 修改app.module.ts里的Service Worker注册配置，把注册的文件换成自定义的SW文件：

ServiceWorkerModule.register('custom-sw.js', {
  enabled: environment.production,
  registrationStrategy: 'registerWhenStable:3000'
})

3. 修改angular.json的assets配置，把自定义SW文件加入构建资源：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/custom-sw.js" // 新增这行
]

验证配置 #

修改完成后重新构建生产版本部署，打开浏览器开发者工具，在Application标签下手动更新Service Worker到最新版本，常规加载应用后查看Sentry的POST请求，来源不再显示为Service Worker即可。

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