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

相关推荐
奋斗的小羊羊5 小时前
HTML5关键知识点之多种视频编码工具的使用方法
前端·音视频·html5
前端呆猿5 小时前
深入解析HTML5中的object-fit属性
前端·css·html5
再学一点就睡5 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友6 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
路灯下的光7 小时前
用scss设计一下系统主题有什么方案吗
前端·css·scss
l_tian_tian_7 小时前
SpringClound——网关、服务保护和分布式事务
linux·服务器·前端
一只小风华~7 小时前
CSS @media 媒体查询
前端·css·媒体
shix .8 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
John_ToDebug8 小时前
Chrome 内置扩展 vs WebUI:浏览器内核开发中的选择与实践
前端·c++·chrome
烛阴9 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript