NextJS中Sentry captureException无法展示完整错误信息如何解决？

原因分析 #

浏览器出于安全限制，会隐藏跨域请求的详细错误信息（比如完整的CORS提示），仅向JavaScript层暴露通用的"Network Error"，导致Axios和Sentry无法直接获取控制台显示的完整报错内容。

解决方案 #

1. 手动补充错误上下文 #

在catch块中针对Axios网络错误，结合请求的URL、当前页面Origin等信息，手动构造包含CORS相关提示的增强错误对象，再提交给Sentry：

try {
  await axios.get('https://www.hello.com/');
} catch (error) {
  if (error instanceof AxiosError && error.code === 'ERR_NETWORK') {
    const enhancedError = new Error(
      `Network Error: 疑似CORS拦截 - 来源域名: ${window.location.origin}, 请求URL: ${error.config.url}`
    );
    // 保留原始错误的栈信息与属性
    enhancedError.stack = error.stack;
    Object.assign(enhancedError, error);
    Sentry.captureException(enhancedError);
  } else {
    Sentry.captureException(error);
  }
}

2. 用Axios拦截器统一增强错误 #

在Axios实例的响应拦截器中提前处理网络错误，统一补充CORS相关提示，避免在业务代码中重复编写逻辑：

const axiosInstance = axios.create();

axiosInstance.interceptors.response.use(
  response => response,
  error => {
    if (error instanceof AxiosError && error.code === 'ERR_NETWORK') {
      error.message = `Network Error: 可能存在CORS问题 - 来源: ${window.location.origin}, 请求目标: ${error.config.url}`;
    }
    return Promise.reject(error);
  }
);

后续业务代码中使用该实例发起请求，捕获到的错误已包含补充信息，直接传入captureException即可。

3. 查看Sentry事件的请求元数据 #

Sentry会自动收集请求的相关元数据，你可以在事件详情的Request标签下查看请求URL、Origin头信息，辅助判断CORS问题。

4. 开发环境开启Sentry调试模式 #

在NextJS的Sentry配置中启用调试模式，可查看错误捕获的详细流程，确认是否有信息被过滤：

// next.config.js
module.exports = {
  sentry: {
    debug: process.env.NODE_ENV === 'development',
  },
};

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