React应用中特定客户端Sentry不记录错误的排查方法求助

问题描述 #

我在React应用中遇到了一个问题：Sentry无法为特定客户端记录错误。已确认该客户端未安装广告拦截器，也未使用Brave浏览器。我自己复现触发错误的操作步骤时，Sentry能正常记录错误，请问该如何排查此问题？

我的Sentry配置： #

if (import.meta.env.VITE_ENABLE_SENTRY === 'true') {
  Sentry.init({
    dsn: import.meta.env.VITE_SENTRY_DSN,
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.replayIntegration({
        maskAllText: true,
        blockAllMedia: true,
      }),
    ],
    tracesSampleRate: 1.0,
    environment: import.meta.env.VITE_SENTRY_ENVIRONMENT,

    replaysOnErrorSampleRate: 0.1,
    denyUrls: ['pagesense.io', 'zohocdn.com'],
  })
}

依赖版本： #

"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.13",
"@sentry/vite-plugin": "^2.14.2",
"@sentry/react": "^7.103.0",
"@sentry/tracing": "^7.103.0",

排查步骤 #

1. 确认特定客户端的Sentry初始化状态 #

• 让该客户端打开浏览器控制台，执行 window.Sentry 确认Sentry是否成功加载。如果返回undefined，说明初始化失败，可能是环境变量VITE_ENABLE_SENTRY在该客户端的构建包中未设为true，或者打包时变量注入出错。
• 检查该客户端的应用版本，确认是否和你测试的版本一致，避免是旧版本未集成Sentry的问题。

2. 检查客户端的浏览器环境与兼容性 #

• 询问该客户端使用的浏览器类型、版本，比如是否是IE11这类旧浏览器。你的Sentry版本7.103.0对旧浏览器支持有限，可能存在初始化失败或错误上报失败的情况。可以让用户在控制台执行navigator.userAgent获取详细信息。
• 检查客户端是否开启了浏览器的隐私模式，部分隐私模式会限制第三方脚本（包括Sentry）的网络请求，导致错误无法上报。

3. 查看客户端的网络请求日志 #

• 让该客户端在触发错误时，打开浏览器开发者工具的「网络」面板，过滤sentry.io相关请求：
  • 确认是否有上报错误的POST请求发送，如果没有，说明错误没有被Sentry捕获；
  • 如果有请求但返回4xx/5xx状态码，根据状态码排查：比如401是DSN无效，403是项目权限问题，5xx是Sentry服务端问题。
• 确认客户端网络环境是否存在代理、防火墙，这类设备可能会拦截Sentry的请求。

4. 检查Sentry的错误过滤规则 #

• 你的配置中设置了denyUrls，确认该客户端触发的错误是否来自pagesense.io或zohocdn.com相关脚本，这类错误会被Sentry忽略。
• 检查是否有React的ErrorBoundary未手动将错误传递给Sentry.captureException，导致Sentry无法捕获被边界处理的错误。

5. 验证错误捕获范围与采样率 #

• 虽然tracesSampleRate设为1.0，但可以临时将replaysOnErrorSampleRate设为1.0，测试是否能捕获到该客户端的错误回放，辅助排查问题节点。
• 确认代码中是否添加了自定义beforeSend钩子，过滤掉了该客户端的错误。

6. 手动测试客户端的错误上报 #

• 让该客户端在控制台执行以下代码，手动触发错误上报：

  window.Sentry?.captureException(new Error('Test error from specific client'));
  

  然后查看Sentry后台是否能收到这条测试错误。如果能收到，说明Sentry基础上报正常，问题出在特定操作的错误捕获逻辑上；如果收不到，说明基础上报链路有问题。

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