Axios中止API请求触发Sentry未处理错误的解决方案求助

用户切换标签页或刷新页面时，Axios发起的请求会被中止，这类中止错误会被Sentry捕获为未处理错误，导致错误计数虚高。以下是几种解决方法，能让Sentry忽略这类预期内的中止错误：

方法1：用Axios响应拦截器过滤中止错误 #

在Axios的响应拦截器里识别请求中止的错误（错误码ECONNABORTED），直接返回resolved状态的Promise，不让错误继续向上抛出：

axios.interceptors.response.use(
  response => response,
  error => {
    // 匹配请求中止的错误特征
    if (error.code === 'ECONNABORTED' && error.message.includes('Request aborted')) {
      // 返回空数据或自定义占位内容，避免错误进入全局捕获
      return Promise.resolve({ data: null, message: '请求已中止' });
    }
    // 其他错误正常抛出，交由Sentry处理
    return Promise.reject(error);
  }
);

方法2：在Sentry初始化时过滤错误 #

如果不想改动Axios逻辑，直接在Sentry的初始化配置里添加过滤规则，忽略这类中止错误：

Sentry.init({
  // 其他初始化配置
  beforeSend(event, hint) {
    const originalError = hint.originalException;
    // 判断是否是Axios请求中止错误
    if (originalError?.code === 'ECONNABORTED' && originalError?.message.includes('Request aborted')) {
      // 返回null，Sentry将不会上报该错误
      return null;
    }
    return event;
  }
});

方法3：修改Axios的abort处理逻辑（自定义标识） #

针对你提供的Axios内部request.onabort代码块，可以给中止错误添加自定义标识，后续通过标识过滤：

// 修改Axios中的request.onabort函数
request.onabort = function handleAbort() {
  if (!request) {
    return;
  }

  const abortError = createError('Request aborted', config, 'ECONNABORTED', request);
  // 添加自定义标识，标记为用户操作导致的中止
  abortError.isUserInitiatedAbort = true;

  reject(abortError);
  request = null;
};

然后在全局或Axios拦截器里过滤带该标识的错误：

axios.interceptors.response.use(
  res => res,
  err => {
    if (err.isUserInitiatedAbort) {
      return Promise.resolve();
    }
    return Promise.reject(err);
  }
);

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