vite接入sentry，前端异常监控系统

依赖

sql 复制代码

pnpm add @sentry/tracing @sentry/vue vite-plugin-sentry

项目接入

main

typescript 复制代码

import { createApp } from "vue";
import * as Sentry from "@sentry/vue";

import App from "./App.vue";

const app = createApp(App);

// 只对测网、灰度、正式进行初始化，异常上报
if (["daily", "pre", "prod"].includes(import.meta.env.VITE_USER_NODE_ENV)) {
  (window as any).Sentry = Sentry;
  Sentry.init({
    app,
    dsn: dsn地址,
    environment: import.meta.env.VITE_USER_NODE_ENV,
    // integrations: [new BrowserTracing()],
    integrations: [
      new Sentry.BrowserTracing({
        beforeNavigate: (context) => {
          // let transName;
          // if (location.pathname.includes('/editor/edit')) {
          //   transName = 'Edit pageload';
          // } else {
          //   transName = 'Other pageload';
          // }
          return {
            ...context,
            // You could use your UI's routing library to find the matching
            // route template here. We don't have one right now, so do some basic
            // parameter replacements.
            name: "FreightH5PageLoad",
          };
        },
      }),
    ],
    release: `${version}-build-${import.meta.env.VITE_USER_NODE_ENV}`, // 与sentryConfig下的 release  保持一致，不然sourceMap无法解析
    tracesSampleRate: 1.0,
  });
}

其实至此，sentry就已经接入了你的项目当中，你可以在main.ts中写一个错误

arduino 复制代码

console.log("res",resa)

如果在sentry的页面中可以看到这个错误，就证明接入的sdk已经正常工作了

前端发布上线为了js体积与请求的开支，通常会合并、混淆js代码，这样导致代码报错了，我们也只能看到错误信息，但非常难定位到具体是哪行代码出现的错误，如下图：我们无法快速定位到代码哪一行出错，这样即使知道报错也让很多开发人员无法下手，所以这里sentry采取的是业界方案：sourcemap。

sourcemap上传

vite.config.ts

typescript 复制代码

import viteSentry from "vite-plugin-sentry";
import type { ViteSentryPluginOptions } from "vite-plugin-sentry";

const sentryConfig = (env: string): ViteSentryPluginOptions => {
  return {
    url: "", // sentry地址
    authToken:
      "",
    org: "", // 组织名称
    project: "", // 项目名
    release: `${version}-build-${env}`,
    deploy: {
      env,
    },
    setCommits: {
      auto: true,
    },
    sourceMaps: {
      include: [path.join(process.cwd(), "./dist/js/*.map")],
      ignore: ["node_modules"],
      urlPrefix: `~/${cdnName}/${env}/${version}/js/`,
    },
    legacyErrorHandlingMode: true, // 文档： https://github.com/ikenfin/vite-plugin-sentry/wiki/What-is-legacyErrorHandlingMode
    cleanSourcemapsAfterUpload: true,
  };
};

// vite.config
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, fileURLToPath(new URL("./env", import.meta.url)));
  const { VITE_USER_NODE_ENV } = env;
  const conditions = ["prod", "pre"];
  return {
    ...,
    plugins: [
      ...,
      conditions.includes(VITE_USER_NODE_ENV)
        ? viteSentry(sentryConfig(VITE_USER_NODE_ENV))
        : {},
    ],
    build: {
      target: "es2015",
      sourcemap: conditions.includes(VITE_USER_NODE_ENV) ? true : false, // 构建后是否生成 source map 文件
    }
  }
})

此时当执行vite build时，viteSentry这个插件会根据你init配置，以及release的设置，将构建的sourcemap文件上传到sentry对应的项目-release之下。当次版本新捕获到错误时就可以还原出错误行，以及详细的错误信息

踩坑

map文件解析不到具体位置

原因：init时传入的release与plugin传如的不一致导致的，一定要保持一致。