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/ 复制代码
- 引入
网络异常，图片无法展示
|
- 自行尝试 一👋 吧
- 因为 我们前面的问题 可以 找到 源头 此处 暂且不写了
