Sentry监控

前端异常监控方案

Logan

Logan 是美团点评集团推出的大前端日志系统,包括日志的收集存储,上报分析以及可视化展示。提供了五个组件,包括端上日志收集存储 、Web SDK,后端日志存储分析 Server,日志分析平台 LoganSite。
Logan

ARMS

ARMS 前端监控专注于对 Web 场景、Weex 场景和小程序场景的监控,从页面打开速度(测速)、页面稳定性(JS Error)和外部服务调用成功率(API)这三个方面监测 Web 和小程序页面的健康度。
什么是 ARMS 前端监控?

fundebug

fundebug
专业的应用错误监控平台,及时发现Bug,提高Debug效率。目前支持前端JavaScript,微信小程序、微信小游戏,支付宝小程序,React Native,Java以及Node.js。

Sentry

sentry
Sentry是一个基于 Django 构建的现代化的实时事件日志监控、记录和聚合平台,主要用于如何快速的发现故障。更快地解决错误和性能问题,并从前端到后端不断了解他们的应用程序运行状况。

badjs

BetterJS
BadJS 是 web 前端异常监控解决方案,提供一种 web 页面的脚本错误监控、上报、统计、查看等系统化的跟踪解决方案

目前比较流行的异常监控方案有以上几种,但从易用性、免费与否、以及项目是否开源等方面考虑, Sentry 是个非常不错的选择,服务端部署也非常简单,当然服务端也可以直接使用 Sentry 提供的,网站客户端引入 sentry sdk 并插入初始化 Sentry 的代码就可以实现对页面脚本异常的监控了。

sentry优缺点

优点

1、产品体验好,功能完善
2、接入工作量少
3、Sentry 专注于 Error、Exception、Crash
4、提供丰富的上下文信息
5、自动合并重复问题
6、主动邮件告警

缺点

1、部署依赖繁多利用官方的提供的 Github 仓库,基于 Docker 和 Docker Compose 确实可以一键部署、开箱即用。不过,当看到 30 个容器列在面前时,还是会觉得踌躇。
2、需自行保障高可用比如:ZooKeeper、Nginx、Redis等,要自行运维这些组件并保障高可用,并不是容易的事情。
3、如果大量的错误![请添加图片描述](https://img-blog.csdnimg.cn/c1d08c48447b4b8d9f56ecf6b495a5e0.png
信息涌向 Sentry 服务器,会导致 Sentry 响应严重延迟

sentry接入流程

请添加图片描述

sentry部署

1、安装docker依赖
安装docker、docker-compose、yum-utils等依赖
2、安装onpremise
下载sentry运行仓库onpremise
git clone https://github.com/getsentry/self-hosted.git
进入目录:cd self-hosted
执行脚本:./install.sh 该过程会运行一段时间,成功后会提示是否创建账号
3、运行sentry服务
创建账号成功,则执行 docker-compose up -d 启动项目,默认开启9000端口

sentry基本设置

sentry默认是纯英文界面,但可以修改语言,步骤如下
1、用户->User settings
2、 Language选择,选择Simplified Chinese ,也就是简体中文
3、Timezone选择,选择Shangehai
4、刷新页面,成功进入中文界面
在这里插入图片描述

vue项目接入

配置指南:https://docs.sentry.io/platforms/javascript/guides/vue/
安装依赖:npm install --save @sentry/vue @sentry/tracing
请添加图片描述

SourceMaps配置

镜像源更换

在项目中增加.yarnrc,内容如下:

SENTRYCLI_LOCAL_CDNURL "https://cdn.npm.taobao.org/dist/sentry-cli"
SENTRYCLI_CDNURL "https://cdn.npm.taobao.org/dist/sentry-cli"

或者.npmrc,内容如下:

sentrycli_cdnurl=https://cdn.npm.taobao.org/dist/sentry-cli

PS:更换下载源,避免下载@sentry/cli的时候下载不成功

sentry/webpack-plugin

1、安装依赖 npm install @sentry/webpack-plugin -D
2、在vue.config.js增加配置,如下:
在这里插入图片描述
3、productionSourceMap设置为false,执行npm run build打包生成.map.js文件,并上传到sentry服务器
4、构建上传js文件后,需删除*.map.js文件

页面加载指标

Google 的 “好(Good)”、“需要改进(Needs Improvement)”和“差(Poor)”阈值用于将数据点分类为绿色、黄色和红色,用于对应的 Web Vitals。“Needs improvement” 在 Sentry 中被称为 “Meh”。
请添加图片描述

最大内容绘制时间(LCP)
LCP (Largest Contentful Paint):最大内容绘制时间,用来衡量加载体验。谷歌要求LCP最好在页面首次开始加载后的2.5秒内发生。
首次输入延迟时间(FID)
FID (First Input Delay):首次输入延迟时间,用于衡量页面交互性。用谷歌要求页面的FID最好小于100毫秒。
累计布局位移(CLS)
CLS (Cumulative Layout Shift):累计布局位移,用于衡量视觉稳定性。谷歌要求页面的CLS最好保持小于0.1。
首次绘制 (FP)
First Paint (FP) 测量第一个像素出现在视口中所花费的时间,呈现与先前显示内容相比的任何视觉变化。
首次内容绘制 (FCP)
First Contentful Paint (FCP) 测量第一个内容在视口中渲染的时间。FCP 帮助开发人员了解用户在页面上看到任何内容更改需要多长时间。
首字节时间 (TTFB)
Time To First Byte (TTFB) 测量用户浏览器接收页面内容的第一个字节所需的时间。TTFB指的是浏览器开始收到服务器响应数据的时间(后台处理时间+重定向时间),是反映服务端响应速度的重要指标。我们可以把 500 ms 以上认为是 TTFB 时间过长。TTFB 帮助开发人员了解他们的缓慢是由初始响应(initial response)引起的还是由于渲染阻塞内容(render-blocking content)引起的。

在线网站优化检测工具:https://web.dev/optimize-lcp/
Web Vitals:https://docs.sentry.io/product/performance/web-vitals/