React

开始之前，先按 Browser SDK 概览安装 SDK 并复制 Project 的 DSN， 再把应用的 origin 加入该 Project 的允许列表。

初始化

src/monitoring.ts

import { init } from "@openrum/browser";

init({
  dsn: import.meta.env.VITE_OPENRUM_DSN,
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_RELEASE,
});

src/main.tsx

import "./monitoring.ts";
import { createRoot } from "react-dom/client";

以副作用方式导入模块，可以把初始化留在组件之外，因此它不会在 Strict Mode 下或重新渲染时执行 两次。React Router 通过 history.pushState 跳转，所以客户端导航无需额外接线即可被采集。

运行示例

仓库里有一个可运行的示例 examples/react-vite：

cp examples/react-vite/.env.example examples/react-vite/.env.local
pnpm --filter @openrum/example-react-vite dev

下一步

• 验证采集、ingest 和聚合是否一致。
• 上传 React（Vite）的 Source Map，让生产环境的错误还原到源码。