React（Vite）

适用于Alpha

React 应用用 Vite 构建时，@openrum/sourcemap 会在 vite build 结束时自动上传 Source Map，不需要额外的构建步骤。开始之前，先按概览创建上传令牌，并把它保存为 CI Secret OPENRUM_UPLOAD_TOKEN。

安装插件
Section titled “安装插件”

把插件装成应用的开发依赖：
终端窗口
```
pnpm add -D @openrum/sourcemap
```
用 npm install --save-dev @openrum/sourcemap 或 yarn add -D @openrum/sourcemap 也一样。

在 Vite 配置中启用

import { defineConfig } from "vite";
import { openRUMSourceMaps } from "@openrum/sourcemap/vite";

export default defineConfig({
  build: { sourcemap: "hidden" },
  plugins: [
    openRUMSourceMaps({
      baseUrl: process.env.OPENRUM_BASE_URL!,
      projectId: process.env.OPENRUM_PROJECT_ID!,
      release: process.env.OPENRUM_RELEASE!,
      commitSha: process.env.GITHUB_SHA,
      // token 默认读取 process.env.OPENRUM_UPLOAD_TOKEN
    }),
  ],
});

build.sourcemap: "hidden" 让 Vite 生成 .map 文件，但不在产物中写入 sourceMappingURL 注释。若设置为 true，插件会替你删除这些注释。

插件在构建时做的事见概览。如果站点部署在子路径下，例如 Vite 的 base 为 /static/app/ 或一个 CDN URL，还需要设置 urlPrefix: "static/app/"，见 Artifact 命名。

让 SDK 上报同一个 Release

用同一个 CI 变量同时设置插件的 release 和 SDK 的 release：

init({
  dsn: import.meta.env.VITE_OPENRUM_DSN,
  release: import.meta.env.VITE_APP_RELEASE, // 与 OPENRUM_RELEASE 相同
});

- name: Build and upload Source Maps
  run: pnpm build
  env:
    OPENRUM_BASE_URL: https://rum.example.com
    OPENRUM_PROJECT_ID: <your-project-id>
    OPENRUM_RELEASE: ${{ github.sha }}
    VITE_APP_RELEASE: ${{ github.sha }}
    OPENRUM_UPLOAD_TOKEN: ${{ secrets.OPENRUM_UPLOAD_TOKEN }}

验证还原
Section titled “验证还原”

部署后按概览验证：在 Source Map 页确认 Artifact 可用，用匹配测试器检查一个真实的帧，再触发一个已知错误。栈帧没有还原时，对照栈帧没有还原的原因。

SDK 的初始化写法见 Browser SDK。

Release Alpha · commit local

React（Vite）

安装插件

在 Vite 配置中启用

让 SDK 上报同一个 Release

验证还原