vue + vite + sentry + 前端监控
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
-- 如何在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
这样就得到了我们得令牌了!
运行npm run buid 部署服务器当我们得代码报错则可以在问题中看到
解决 npm run buid 报错 提交不上去服务器问题》》》》》
上面报错则为没有..sentry-cli.exe 可以执行下面命令下载 也可以手动把.exe放进去
当前目录 npm i @sentry/cli 下载
当前在卸载 npm uninstall @sentry/cli 我们只需要cil脚本
如果在把 e24f5e300cf54d64897ee0c968910112e011520cb79f46f09916de9ca8b51bb8令牌删除
此时打包肯定显示403令牌出问题然后再把新得Vite.config换上去新的就行了
检查是否有这个文件.exe
把..sentry-cli.exe 放进文件夹即可




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:19 天前 )
9e887079
[skip ci] 11 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
更多推荐
所有评论(0)