如何让Sentry在错误面包屑中追踪OPTIONS请求？

让Sentry在面包屑中追踪OPTIONS请求 #

Sentry默认会过滤OPTIONS预检请求，要让这类请求被记录到错误面包屑中，可通过以下两种方式实现：

• 通过beforeBreadcrumb钩子保留请求
  在Sentry.init的配置里添加回调，手动放行OPTIONS请求的面包屑：

  Sentry.init({
    // 现有配置项
    beforeBreadcrumb(breadcrumb, hint) {
      if (breadcrumb.category === 'http' && breadcrumb.data?.method === 'OPTIONS') {
        return breadcrumb;
      }
      return breadcrumb;
    },
  });
  

• 手动包装fetch主动添加面包屑
  如果钩子方式不生效，可直接包装客户端的fetch API，在OPTIONS请求发起和响应时主动添加面包屑，还能记录响应头信息：

  const originalFetch = window.fetch;
  window.fetch = async (...args) => {
    const [url, options = {}] = args;
    const method = (options.method || 'GET').toUpperCase();
  
    if (method === 'OPTIONS') {
      Sentry.addBreadcrumb({
        category: 'http',
        message: `OPTIONS ${url}`,
        data: { url, method },
        type: 'http',
      });
    }
  
    const response = await originalFetch(...args);
  
    if (method === 'OPTIONS') {
      Sentry.addBreadcrumb({
        category: 'http',
        message: `OPTIONS ${url} - ${response.status}`,
        data: {
          url,
          method,
          status_code: response.status,
          headers: Object.fromEntries(response.headers.entries()),
        },
        type: 'http',
      });
    }
  
    return response;
  };
  

  注意：这段代码需放在Next.js的客户端组件中（比如layout.js的客户端部分或_app.js），避免在服务端执行。

“Failed to fetch”问题的额外排查方向 #

• 排查浏览器端隐藏异常：引导用户在生产环境开启浏览器控制台的Preserve log和Disable cache选项，BUG触发时查看网络请求的完整详情，重点确认是否存在浏览器插件拦截、安全策略限制等情况。
• 检查网络环境影响：部分企业内网、VPN会拦截跨域请求或修改响应头，可让用户切换网络环境测试；同时确认CDN或边缘节点是否对OPTIONS请求做了特殊处理，导致后续GET请求无法发起。
• 核查Next.js请求配置：检查fetch的缓存策略、credentials/mode参数设置，是否因配置异常导致请求中断或未发送；另外确认是否在组件卸载时未取消请求，引发异常。
• 校验Sentry采样与过滤规则：检查tracesSampleRate、breadcrumbSampleRate配置，是否因采样率过低导致请求未被记录；同时查看ignoreErrors列表，是否误过滤了“Failed to fetch”相关错误。
• 排查后端完整链路：虽然Cloudwatch仅记录OPTIONS请求，但需检查负载均衡、API网关等中间件的日志，确认GET请求是否在到达后端前被拦截；另外排查后端是否存在隐性校验逻辑（如请求头合规性、限流），阻止了GET请求的执行。

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