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

相关推荐
知识分享小能手13 分钟前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf40 分钟前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊1 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel1 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260851 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
ObjectX前端实验室2 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart2 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级2 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang3 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang3 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构