Sentry监控
参考:
https://blog.csdn.net/kiscon/article/details/126131492
https://web.dev/optimize-lcp/
前端异常监控方案
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、如果大量的错误”、“需要改进(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/
————————————————
版权声明:本文为CSDN博主「kiscon」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/kiscon/article/details/126131492
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性