使用Sentry对前端进行实时js错误监控

原创

iginkgo18

修改于 2021-10-21 10:21:01

2.5K0

修改于 2021-10-21 10:21:01

文章被收录于专栏：devops_k8s devops_k8sdevops_k8s

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勾选默认创建的项目

版本

"vue": "^2.6.14"
"@vue/cli-service": "^4.5.13",

HelloWorld.vue

<template>
  <div class="hello">
    <h1 @click="hello">error</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    hello(){
      console.log(window.a.b)
    }
  }
}
</script>

main.js

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://e65cb16cb71e45a4b895fc5afbb8064e@118.31.52.159:9000/2",
  integrations: [new VueIntegration({Vue, attachProps: true})],
  logErrors: true,
  release: 'pro@1.0.1'
});

Vue.config.productionTip = false

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

4.3 启动项目验证

4.4 查看sentry错误信息

详细信息

5 报错信息显示错误组件位置

5.1 Token生成

5.2 修改项目代码

在项目的目录下面

.sentryclirc

[defaults]
url=http://118.31.52.159:9000/
org=1234.com
project=vue_demo1

[auth]
token=1974de7c5fba4cb8968d401d307ef09f15890180c29f41a5b6ddb4d9b085b18e

修改下上传版本

5.3 重新构建项目

➜  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 捕获由事务和跨度组成的分布式跟踪，这些跟踪测量单个服务和这些服务中的单个操作。