vue + vite + sentry + 前端监控

大福ya

已于 2022-09-05 17:40:04 修改

阅读量2.2k

点赞数 4

文章标签： sentry vue javascript typescript webpack

于 2022-08-31 20:44:11 首次发布

本文链接：https://blog.csdn.net/sunwanfulove/article/details/126631239

版权

本文详细介绍了如何在Linux服务器上部署Sentry，并将其与Vite项目集成。步骤包括：1) 打开Sentry后台并创建项目；2) 安装必要的npm包；3) 在main.js中初始化Sentry并配置dsn；4) 配置Vite.build以启用源地图；5) 解决打包上线时的问题，如sentry-cli的安装。通过这些步骤，开发者可以有效地监控线上代码的错误信息。

摘要由CSDN通过智能技术生成

-- 如何在linux部署sentry https://juejin.cn/post/7137610646463938596

1.打开部署服务器或者本地sentry后台 http:127.0.0.1:9000 或者自己的ip服务器

2.创建项目选择自己需要监听的语言框架

3 . 创建 Vite 模板下载下面三个包进行初始化

npm i @sentry/tracing


npm i @sentry/vue

npm i vite-plugin-sentry

解决 vite-plugin-sentry 下载不了得问题如果报错下载不来执行》》》》

npm i vite-plugin-sentry --ignore-scripts

4.在main.js初始化 sentry后台点击项目即可拿到对应的dsn都写好了直接复制就好

5.初始化完成即可在后台看到错误

最重要的来了------

当我们需要打包上线的时候监听到线上的代码报错以及错误信息

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteSentry from 'vite-plugin-sentry'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    viteSentry({
      url: '当前服务器ip:9000/',
      authToken:
        'e241122f5e300cf54d64897ee0c968910112e011520cb79f46f09916de9ca8b51bb8', 

//sentry授权令牌 // 下面有获取的详细
      org: 'sentry',
      project: 'sentryboxcs',
      release: 'sentryboxcs@1.0.0',
      deploy: {
        env: 'production'
      },
      setCommits: {
        auto: true
      },
      sourceMaps: {
        include: ['./dist/assets'],
        ignore: ['node_modules', 'vite.config.js'],
        urlPrefix: '~/js'
      }
    }),
    vue()
  ],
  build: {
    sourcemap: true // 允许使用sourmap
  }
})

1. 获取authToken