TanStack Router

开始之前，先按 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 { createRouter } from "@tanstack/react-router";

TanStack Router 通过 history.pushState 提交导航，每次导航都会产生一个 Page View。要注意记录 下来的 Route 是解析后的 pathname，而不是路由模式：会记成 /orders/8fc1，而不是 /orders/$orderId，见路由模式。

下一步

• 验证采集、ingest 和聚合是否一致。
• Vite 构建的插件配置见 React（Vite）的 Source Map 页面。