前端项目怎么接入 Sentry 错误监控？Source Map 怎么配置？

Question

仓乃文 · Accepted Answer

Sentry 接入本身很简单，但 Source Map 配置是最大的坑。Source Map 没配好，线上报错看到的都是压缩后的代码，完全无法定位问题。关键原则：Source Map 必须上传到 Sentry，绝不能部署到生产环境。

接入步骤：
```bash
# 1. 安装 Sentry SDK
pnpm add @sentry/vue @sentry/tracing

# 2. 安装 Source Map 上传插件
pnpm add -D @sentry/vite-plugin
```

初始化配置：
```typescript
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "https://xxx@xxx.ingest.sentry.io/xxx",
  integrations: [new BrowserTracing()],
  tracesSampleRate: 0.1,
  environment: import.meta.env.MODE,
  release: "my-app@1.0.0",
  beforeSend(event) {
    if (event.exception?.values?.[0]?.type === "ResizeObserver") return null;
    return event;
  },
});
```

Source Map 上传配置（Vite）：
```typescript
import { sentryVitePlugin } from "@sentry/vite-plugin";

export default defineConfig({
  build: {
    sourcemap: "hidden",
  },
  plugins: [
    sentryVitePlugin({
      org: "my-org",
      project: "my-project",
      authToken: process.env.SENTRY_AUTH_TOKEN,
      release: {
        name: "my-app@1.0.0",
        uploadLegacySourcemaps: true,
      },
    }),
  ],
});
```

Source Map 安全原则：
```
1. build.sourcemap 设为 "hidden"
   → 生成 .map 文件但 JS 中没有 sourceMappingURL 注释
   → 用户浏览器拿不到 Source Map
   → Sentry 通过上传的文件还原代码

2. 绝不把 .map 文件部署到 CDN
   → 部署脚本中排除 .map 文件
   → 或构建后删除：rm -rf dist/**/*.map

3. release 版本号必须一致
   → Sentry 上传时的 release 和 init 中的 release 必须相同
   → 建议用 package.json 的 version + git commit hash
```