React (Vite)

When a React app builds with Vite, @openrum/sourcemap uploads Source Maps automatically at the end of vite build, with no extra build step. Before you start, create an upload token and store it as the CI secret OPENRUM_UPLOAD_TOKEN.

1. Install the plugin

   Add the plugin to your application as a dev dependency:

   pnpm add -D @openrum/sourcemap

   npm install --save-dev @openrum/sourcemap and yarn add -D @openrum/sourcemap work the same way.

2. Enable it in the Vite config

   vite.config.ts

   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 defaults to process.env.OPENRUM_UPLOAD_TOKEN
       }),
     ],
   });

   build.sourcemap: "hidden" makes Vite write .map files without adding sourceMappingURL comments to the output. If you set it to true, the plugin removes those comments for you.

   What the plugin does during a build is described in the overview. If the site is served from a sub-path, for example a Vite base of /static/app/ or a CDN URL, also set urlPrefix: "static/app/"; see Artifact names.

3. Make the SDK report the same Release

   Set the plugin’s release and the SDK’s release from one CI variable:

   src/monitoring.ts

   init({
     dsn: import.meta.env.VITE_OPENRUM_DSN,
     release: import.meta.env.VITE_APP_RELEASE, // same as OPENRUM_RELEASE
   });

   .github/workflows/deploy.yml

   - 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 }}

   Mismatched values do not raise an error

   Events without a release cannot be mapped. A different dist, or a dist set on only one side, resolves to a different Release and no Artifact is found.

4. Verify mapping

   After deploying, follow Verify mapping: confirm the Artifacts are ready on Source Map, check a real frame with the match tester, then trigger a known error. If a frame is not mapped, see Why a frame is not mapped.

For how to initialize the SDK, see Browser SDK.