前端监控实战之 sentry

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 添加这个配置

• sentry doc

• 配置代码

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 如何获取 ？

• 进入 之后 可以看到 拿到 dsn 放到上面

• 最基本的准备 已经完成了 ， 是不是 并不困难

• 当前页面效果 projects

• 主要看 issues

• 是不是 非常 nice ？ 那么这些 错误 如何 收集来的 ？

3、 错误收集功能

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

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

• 比如下面这些

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

• 那异常怎么捕获到 ？

• 其实上面的错误 产生 很简单 比如这样

• 或者 这样

• 说明 什么问题 ？

说明 写错非常容易，敲码请小心,错误积累非常夸张，sentry 有容量限制 超过 需要付费，你懂的（不过也可把一些很常见的无解的问题过滤掉，比如 fail to fetch ）

• 你会不会问我 作为工程师，怎么能说不能解决呢？

• 这个问题 大概率 由于用户网络 波动 较大导致，至于 弱网优化 暂且不谈，不过确实可以优化，但是极端情况下，用户网速完全无法支持业务访问，还是会报错

4、错误信息有啥用 ?

• 别的就不谈了 你看看这种信息 是不是 能帮你快速定位 问题

• 当然 如果再生产环境下 ， 代码输出的时候会进一步压缩和混淆，可能看到问题还是无法找到 源文件在哪， 这个时候需要 sourcemap 支援

5、如何配置 sourcemap ?

1.新建 Auth Tokens 
2. 项目内 新建 .sentryclirc文件
3. 配置 webpack 安装插件 npm install @sentry/webpack-plugin --save-dev
4.引入 

• 新建 Auth Tokens

• .sentryclirc

[auth]
token=xxxxxxx
[defaults]
project=javascript-vue
org=sentry
url=https://sentry.io/

• 引入

• 自行尝试 一👋 吧

• 因为 我们前面的问题 可以 找到 源头 此处 暂且不写了

• 下一篇 见 感谢 支持 马克付（全网都可以搜到 ）