使用Sentry对前端进行实时js错误监控 |
您所在的位置：网站首页 › 前端错误监控原理图解 › 使用Sentry对前端进行实时js错误监控 |
使用Sentry对前端进行实时js错误监控
|
1 简介 Sentry 为一套开源的应用监控和错误追踪的解决方案。这套解决方案由对应各种语言的 SDK 和一套庞大的数据后台服务组成。应用需要通过与之绑定的 token 接入 Sentry SDK 完成数据上报的配置。通过 Sentry SDK 的配置，还可以上报错误关联的版本信息、发布环境。同时 Sentry SDK 会自动捕捉异常发生前的相关操作，便于后续异常追踪。异常数据上报到数据服务之后，会通过过滤、关键信息提取、归纳展示在数据后台的 Web 界面中。
在完成接入后我们就可以从管理系统中实时查看应用的异常，从而主动监控应用在客户端的运行情况。通过配置报警、分析异常发生趋势更主动的将异常扼杀在萌芽状态，影响更少的用户。通过异常详情分析、异常操作追踪，避免对客户端应用异常两眼一抹黑的状态，更高效的解决问题。 部署安装请看我之前写的文档,附带springboot集成sentry; https://cloud.tencent.com/developer/article/1838156 2 为什么要有前端监控用户访问您的业务时，整个访问过程大致可以分为三个阶段：页面生产时（服务器端状态）、页面加载时和页面运行时。 为了保证线上业务稳定运行，我们会在服务器端对业务的运行状态进行各种监控。现有的服务器端监控系统相对已经很成熟，而页面加载和页面运行时的状态监控一直比较欠缺。例如: 无法第一时间获知用户访问您的站点时遇到的错误。各个国家、各个地区的用户访问您的站点的真实速度未知。每个应用内有大量的异步数据调用，而它们的性能、成功率都是未知的。3 Sentry原理图 4 . Vue集成大佬跳过,引包就行 4.1 创建一个新项目   4.2 修改项目代码下面案例代码为vue勾选默认创建的项目 版本 代码语言：javascript复制"vue": "^2.6.14" "@vue/cli-service": "^4.5.13",HelloWorld.vue 代码语言：javascript复制 error export default { name: 'HelloWorld', props: { msg: String }, methods:{ hello(){ console.log(window.a.b) } } }main.js 代码语言：javascript复制import Vue from 'vue' import * as Sentry from "@sentry/browser"; import { Vue as VueIntegration } from '@sentry/integrations' import App from './App.vue' Sentry.init({ // 此处的dsn为sentry创建完项目提示里面的信息 dsn: "http://[email protected]:9000/2", integrations: [new VueIntegration({Vue, attachProps: true})], logErrors: true, release: '[email protected]' }); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')4.3 启动项目验证 4.4 查看sentry错误信息 详细信息   5 报错信息显示错误组件位置5.1 Token生成  5.2 修改项目代码在项目的目录下面 .sentryclirc 代码语言：javascript复制[defaults] url=http://118.31.52.159:9000/ org=1234.com project=vue_demo1 [auth] token=1974de7c5fba4cb8968d401d307ef09f15890180c29f41a5b6ddb4d9b085b18e修改下上传版本  5.3 重新构建项目代码语言：javascript复制➜ dist git:(master) ✗ npm run build
➜ sentry_demo1 git:(master) ✗ cd dist
➜ dist git:(master) ✗ npm install anywhere -g
➜ dist git:(master) ✗ anywhere -p 8888
Running at http://192.168.0.111:8888/
Also running at https://192.168.0.111:8889/ 5.4 查看sentry最终效果 5.5 最终查看效果  6 Sentry优缺点Sentry 是一个实时事件日志记录和汇集的平台。其专注于错误监控以及提取一切事后处理所需信息而不依赖于麻烦的用户反馈。 优点 1 . 多项目,多用户,支持语言多; 2 . 整套系统部署运行在自己服务，数据不经三方; 3 . 免费开源; 缺点 1 . 由于该项目为国外项目，文档友好度低，使用方面也存在一定差异; 2 . 扩展功能，二次开发难，定制化，自定义差; 3 . 需要安装与运行环境; 4 . SDK侵入代码; 7 总结建议先测试下sentry宕机后,前端代码跟sentry的token对应关系,和引用了sentry的一些包,在sentry宕机不可用时会不会影响到前端用户体验,还是需要修改代码; 以上文档只是做一个大概参考,方便入门,下面文章可能介绍更为详细: https://cnblogs.com/hacker-linner/p/15266554.html (入门) https://mp.weixin.qq.com/s/FFpg1t0-3K8casLMNla15g (react) Sentry 性能监控: 通过性能监控，Sentry 跟踪您的软件性能，测量吞吐量和延迟等指标，并显示跨多个系统的错误影响。Sentry 捕获由事务和跨度组成的分布式跟踪，这些跟踪测量单个服务和这些服务中的单个操作。 相关文档 https://docs.sentry.io/platforms/javascript/configuration/sampling/ Sentry rrweb: Session重播 Sentry 提供了与 rrweb 的概念验证集成 - 一个用于记录和重放用户会话的工具包。这在诊断丰富的单页应用程序中的复杂用户行为时非常有用。 相关文档 https://www.rrweb.io/ https://docs.sentry.io/platforms/javascript/guides/react/configuration/filtering/#using-hints https://docs.sentry.io/platforms/javascript/guides/react/enriching-events/attachments/ |
【本文地址】