Sentry 在 React 端的上报格式规范和上报优化方案

async function runSentry() {
  const Sentry = await import("@sentry/react");
  Sentry.init(sentryOptions);
  // 给全局加上 Sengtry 实例，方便用于手动上报
  window.Sentry = Sentry;
}

runSentry();

const unhandledErrors: Error[] = [];

function addUnhandledErrors(e) {
  if (!window.Sentry) {
    unhandledErrors.push(e.error);
  }
}

window.addEventListener("error", addUnhandledErrors);

function reportUnhandledErrors() {
  if (unhandledErrors.length !== 0 && window.Sentry) {
    unhandledErrors.forEach((error) => {
      // 手动上报这些错误
      window.Sentry.captureException(error);
    });
  }
  // 上报结束后取消这个全局监听
  window.removeEventListener("error", addUnhandledErrors);
}

function runSentry() {
  const Sentry = await import("@sentry/react");
  Sentry.init(sentryOptions);
  window.Sentry = Sentry;
  // Sentry 初始化完成后消化未被捕获的错误
  reportUnhandledErrors();
}

runSentry();

const unhandledErrors: Error[] = [];

function createCountdown(
  countdownDuration: number,
  callback: () => void
): () => void {
  let timer: NodeJS.Timeout | null = null;

  return function startCountdown(): void {
    // 不允许重复生成倒计时
    if (timer) {
      return;
    }

    timer = setTimeout(() => {
      callback();
      timer = null;
    }, countdownDuration);
  };
}

// 15000 为一个月里统计的线上 web 程序的 lcp 平均时长
// 视你的 web 程序的实际情况而定
const sentryCountdown = createCountdown(15000, () => {
  if (unhandledErrors.length !== 0 && !window.Sentry) {
    runSentry();
  }
});

function addUnhandledErrors(e) {
  if (!window.Sentry) {
    unhandledErrors.push(e.error);
    // 出错后启动倒计时
    sentryCountdown();
  }
}

window.addEventListener("error", addUnhandledErrors);

function runSentry() {
  const Sentry = await import("@sentry/react");
  Sentry.init(sentryOptions);
  window.Sentry = Sentry;
  reportUnhandledErrors();
}

runSentry();

Sentry.init({
  ...sentryOptions,
  integrations: [...otherIntegrations, new BrowserTracing()],
});

Sentry.init({
  ...sentryOptions,
  integrations: [
    ...otherIntegrations,
    new BrowserTracing({
      /** 文档说明：
       * Flag to enable/disable creation of `navigation` transaction on history changes.
       *
       * Default: true
       */
      startTransactionOnLocationChange: false,
    }),
  ],
});

Sentry.init({
  ...sentryOptions,
  integrations: [
    ...otherIntegrations,
    new BrowserTracing({
      // 只触发 pageload 事件
      beforeNavigate: (context) => {
        if (context.op === "pageload") {
          return context;
        }
      },
    }),
  ],
});

Sentry.init({
  ...sentryOptions,
  integrations: [
    ...otherIntegrations,
    new BrowserTracing({
      /** 文档说明：
       * The time to wait in ms until the transaction will be finished during an idle state. An idle state is defined
       * by a moment where there are no in-progress spans.
       *
       * The transaction will use the end timestamp of the last finished span as the endtime for the transaction.
       * If there are still active spans when this the `idleTimeout` is set, the `idleTimeout` will get reset.
       * Time is in ms.
       *
       * Default: 1000
       */
      idleTimeout: 50000,
    }),
  ],
});

Sentry.init({
  ...sentryOptions,
  beforeBreadcrumb: (breadcrumb) => {
    // 过滤 console.log 和 console.warning
    if (
      breadcrumb.category === "console" &&
      ["log", "warning"].includes(breadcrumb.level!)
    ) {
      return null;
    }
    return breadcrumb;
  },
});

Sentry.init({
  ...sentryOptions,
  beforeSend: (event, hint) => {
    // hint.originalException 为捕获到的原始异常实例
    // 可以通过自定义通用的 handleError 来判断此次异常的各种数据
    // 从而修改上报事件的属性，提供更多有效信息
    const { tags, extra, level } = handleError(hint.originalException as any);
    event.tags = tags; // 定义这次上报的 tags
    event.extra = extra; // 添加附加信息
    event.level = level; // 定义上报级别
    return event;
  },
});

// 一、首先，axios 的网络拦截器捕获到了网络错误
axiosInstance.interceptors.response.use(
  (obj: AxiosResponse) => {
    // do something...
  },
  (obj: AxiosResponse) => {
    // 构造一个 NetworkError 实例，进行手动上报
    window.Sentry.captureException(new NetworkError(obj);
  }
);

// 二、构造函数 NetworkError 会根据 axios 的响应实例构造 Sentry 需要的异常信息
export class NetworkError extends Error {
    /** 附加值 */
    extra: any;
    /** tag */
    type: string = 'error.network';
    /** 错误等级 */
    level: string = 'error';

    constructor(response: AxiosResponse) {
        // 构造参数为【错误值】
        super(`${response.request.responseURL}`);
        // name 为【错误类型】
        this.name = `Network Error ${response.data.code}`;
        // 处理附加信息，getExtra 中可以任意取需要的值进行返回
        this.extra = getExtra(response);
    }
}

// 三、异常进入 beforeSend 进行统一处理
Sentry.init({
  ...sentryOptions,
  beforeSend: (event, hint) => {
    // hint.originalException 就是捕获的 NetworkError 实例
    const { tags, extra, level } = handleError(hint.originalException as any);
    event.tags = tags; // 定义这次上报的 tags
    event.extra = extra; // 添加附加信息
    event.level = level; // 定义上报级别
    return event;
  },
});
// 处理错误信息
const handleError = (error: NetworkError) => {
    const info: SentryInfo = {
        extra: undefined,
        tags: {},
        report: true,
        level: 'error',
    };
    if (error.extra) {
        info.extra = error.extra;
    }
    if (error.type) {
        info.tags.type = error.type;
    }
    if (error.level) {
        info.level = error.level || 'error';
    }
    return info;
};