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时传入的releaseplugin传如的不一致导致的,一定要保持一致。

相关推荐
Dolphin_海豚5 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件8 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
AverageJoe199144 分钟前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易1 小时前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma771 小时前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在1 小时前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang1 小时前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式