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

相关推荐
烛阴1 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化1 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月1 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder2 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子3 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z3 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录3 小时前
虚拟DOM
前端·vue.js·dom