Niko
Vue3项目添加Sentry日志监控

Vue3项目添加Sentry日志监控


sentry 日志 监控 前端

搭建

博客之前一个版本是基于 Vue3 开发的，所以文中相关配置都是基于 Vue3 的，其实按官方文档来就可以，区别不大。 sentry 官方文档

Sentry 是可以部署在自己服务器上的，但是经过我的尝试，首先需要至少双核，且会占用比较大的内存，基本上要 8G 或以。所以在我那台 2 核 4G 的服务器卡死以后，我就放弃了这个方案，改用 sentry 官方提供的线上环境，个人项目用一用也没有什么问题。

如果需要自己部署的话，网上也有挺多教程的，可以自己搜一搜。

配置

首先在官网注册账号，创建一个项目，该项目会自动生成一个 dsn 地址。

在项目中安装依赖:

npm install --save @sentry/vue @sentry/tracing

然后在main.ts中添加如下配置：

Sentry.init({
  app,
  dsn: "创建项目时获取的dsn地址",
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "xiejunyi.com", /^\//],
    }),
  ],
  tracesSampleRate: 1.0,
});

此时我在首页 mounted 里随便输出一个未定义的变量

console.log(asd);

在 sentry 后台就会生成一条报错记录： Description

当然也可以自定义捕获一些错误，比如：

app.config.errorHandler = (err) => {
  Sentry.captureException(err);
};
window.addEventListener(
  "error",
  (event) => {
    Sentry.captureException(event);
  },
  true
);
window.addEventListener("unhandledrejection", (event) => {
  Sentry.captureException(event);
});

注意点

基本配置到这儿就完成了，但是当线上环境产生报错时，点开报错信息，会发现无法定位到具体的报错代码，因为都是打包后的 js: Description

所以为了定位错误，还需要 sourceMap。开启 sourceMap 就不多说了，我这里用的 vite，所以在vite.config.js中添加如下配置:

  build:{
    target: 'modules', // 设置最终构建的浏览器兼容目标。modules:支持原生 ES 模块的浏览器
    outDir: 'dist', // 指定输出路径
    sourcemap: true, // 构建后是否生成 source map 文件
    minify: 'terser', // 混淆器，terser构建后文件体积更小
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },   //去除 console debugger
  },

然后在打包出来的 dist 目录下，就会有对应的.map文件，可以看到上面的报错信息里最后一行已经有一行指向对应sourceMap文件的注释了，是因为我这里已经打包前已经打开了sourceMap，但是部署时没有把sourceMap文件上传到服务器，否则任何人都可以看到源代码了。

接下来就要把打包出来的sourceMap文件上传到sentry了。 首先全局安装sentry-cli

npm i -g @sentry/cli

如果碰到网络问题下载失败，我这边是通过配置代理解决的

npm config list // 查看配置
npm config set proxy http://127.0.0.1:7890 // 添加代理
npm config delete proxy // 取消代理

然后运行如下命令，登录 sentry

sentry-cli --url https://sentry.io  login

在出现的命令行中输入网站中生成的 token，生成 token 时记得 project:releases 和 project:write 要勾选上。 Description

接着创建版本，执行：

sentry-cli releases -o 组织名 -p 项目名 new pro@1.0.0

组织名可以在设置-常规设置里找到。 然后需要在 main.ts 文件当中修改下配置：

Sentry.init({
  app,
  dsn: "创建项目时获取的dsn地址",
  release: "pro@1.0.0", // 新加的
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "xiejunyi.com", /^\//],
    }),
  ],
  tracesSampleRate: 1.0,
});

接着vite build打包，然后执行上传：

sentry-cli releases -o 组织名-p 项目名 files pro@1.0.0 upload-sourcemaps dist\assets --url-prefix ~/assets

dist\assets是打包后的 js 目录，~/assets是线上 js 访问地址，~是根目录。

此时在 sentry 后台就可以看到上传上去的文件了: Description

而此时打开报错信息，也能直接定位到错误代码了： Description

如果需要删除线上的SourceMap文件，可以执行：

sentry-cli releases -o 组织名 -p 项目名 files pro@1.0.0 delete --all

这里写的仅仅是手动上传配置的方式，这样的话每次版本更新都要手动执行这些步骤，在实际场景中这些操作都可以配合 ci 实现，但是要记得把打包出来的.map文件在生产环境里删掉，只上传到 sentry 上。

参考

关于前端错误捕获的原理可以参考这篇文章: 前端错误上报

© 2025 Niko Xie