提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

前端监控实战之 Sentry

2023-02-18 16:23:11 时间

#1

目的

前端监控是非常有必要的内容，当项目中出现问题，可迅速找到问题根源，并且快速解决问题，非常重要，尤其是项目越来越大时

Sentry 要做的就是这个事情 就是将错误找到 帮助我们解决问题

非常 重要的事情 在于 sentry 部署并不困难，困难点在于 如何 使用和展示拿到的监控数据，让数据有作用 才是 更重要的事情

#2

部署

1. vue create xxx 项目名
2. 打开 sentry.io 创建 项目 
3. 安装 sentry 服务 
# Using yarn 
yarn add @sentry/browser @sentry/tracing
# Using npm
npm install --save @sentry/browser @sentry/tracing
4.配置一下 入口文件 main.js 添加这个配置

配置代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import * as Sentry from "@sentry/browser";
import { BrowserTracing } from "@sentry/tracing";

Vue.config.productionTip = false

Sentry.init({
  dsn: "https://xxxx@o1407965.ingest.sentry.io/xxxx",
  release: "javascript-vue-demo",
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,

});


new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')

注意 上面的 dsn 如何获取 ？

当前页面效果 projects

#3

错误收集功能

就一句话 页面常规错误 会自动发给 sentry 记录 可能有同学抓起键盘准备开喷， 你这说的不准确啊

good , 说明是个严谨的同学，再说清楚点

比如下面这些

在 vue 项目中，使用 vue.config.errorHandler 的方式捕获同步运行错误、使用 
window.addEventListener('error', (error)=>{}, true)的方法来捕获异步运行错误及资
源加载错误、在 axios 拦截器中进行请求错误捕获，是确保全面异常捕获较为全面便捷的方案

...... 未完，完整内容，请点击https://juejin.cn/post/7142845386065969166

感谢 大家长期的支持 ！

相关文章