最近开发的自用英语学习小网页，发现在移动端使用的时候发现有点问题，只能刷新页面。做一个简易的 JS 错误收集功能。

收集错误

前端的报错有很多，包含资源异常、 js 代码异常、未捕获 promise 异常、react 框架内部捕获异常等。

自己去写这些逻辑，比较繁琐，且容易遗漏。而 @sentry/react 虽然是 sentry 服务的 SDK ，但可以利用它的 beforeSend 事件，阻止上报，自行组织上报格式，传到自己的接口中。

• dsn 需要填写，否则无法触发上报
• 必须在挂载 react 组件到 dom 前进行初始化
• 通过 Sentry.ErrorBoundary 包裹根组件，收集框架相关异常

import * as Sentry from "@sentry/react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  beforeSend(event) {
    const data = {
      level: event.level,
      platform: event.platform,
      url: event.request?.url,
      userAgent: event.request?.headers?.["User-Agent"],
      errorType: event.exception?.values?.[0]?.type,
      errorValue: event.exception?.values?.[0]?.value,
      errorStacktrace: JSON.stringify(event.exception?.values?.[0]?.stacktrace?.frames),
    };
    console.log("[Sentry beforeSend] 捕获到异常：", data);

    return null; // 阻止发送到 Sentry 平台（如果只想本地处理）
  },
});

const container = document.getElementById("root") as HTMLDivElement;
const root = createRoot(container);

root.render(
  <Sentry.ErrorBoundary fallback={<div></div>}>
    <App />
  </Sentry.ErrorBoundary>,
);

自行编写错误收集接口

使用一个独立的 sqlite 数据库，建立模型，与正常业务的数据分离开来。

编辑简单的增删改查接口，即可收集信息，并使用表格展示出来。