前端监控实战之 Sentry

马克付

发布于 2022-12-12 16:48:24

9870

发布于 2022-12-12 16:48:24

文章被收录于专栏：技术进阶系列技术进阶系列

目的

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

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

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

部署

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

错误收集功能

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

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

比如下面这些

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

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

感谢大家长期的支持！

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-09-13，如有侵权请联系 cloudcommunity@tencent.com 删除

sentry