github_35780652-CSDN博客

原创前端监控之白屏异常

一、意义：这里和测速的白屏不同，测速的白屏是指：导航页面开始到TTFB之间的时间称之为白屏时间。白屏异常是指：用户看到的一直是白屏，页面没有任何内容。比如渲染函数报错、Vue或React路由页面没有内容、网页加载很慢很慢以至规定的时间范围内一直没内容。监控白屏异常能发现一些遗漏的bug并及时修复。二、捕获方法：页面加载后2秒或进入页面后12秒（兼容一些特殊页面不会触发load事件）检查关键节点是否有内容，默认检查#app节点，如果#app节点没有则检查#whiteScreen节点，查找节

2021-05-05 16:43:25 735

原创前端监控之资源加载异常

一、意义：资源加载异常将不能提供给正确资源给用户使用或阅读，比如重要的图片、错误的静态资源链接、网站执行的脚本等静态资源。有效的监听资源异常将提升网站的正常使用和展示。二、捕获方法：window.addEventListener('error', function (event) { try { const target = event.target || event.srcElement; if ( target instanceo

2021-05-05 16:40:18 603 1

原创前端监控之性能测速

一、意义：网站性能往往决定用户体验，网页加载是否够快，操作是否流畅往往是用户对网站的第一印象，性能越好的网站，转化率、用户留存率往往更好。二、捕获方法：通过window.performance获取以下六个指标 1、First Contentful Paint (FCP)：开始呈现页面内容 2、Largest Contentful Paint (LCP)：视口内可见的最大图像或文本块的渲染时间 3、TTFB：接收到响应的第一个字节 4、First Input Delay (FID)：

2021-05-05 16:39:42 156

原创前端监控之JavaScript错误

一、意义： JavaScript报错严重影响业务逻辑，比如点击后js报错用户将操作不了，用户会觉得卡死，渲染JS报错将导致用户看到的页面异常，所以JS报错后果也是很严重的。为了应付用户线上环境各种异常，监控JavaScript报错也是很有必要二、捕获方法：首先要明确一点，所有错误都需要被window.onerror接收，因为该方法能解析出错误消息、错误文件、行、列、错误栈，通过这些信息为后面通过sourcemap还原源代码有重要作用。1、通过window.onerror捕获JS事件队列错误win

2021-05-05 16:39:08 152

原创前端监控之接口统计

一、意义：接口的成功率直接影响用户的转化率，像用户注册、支付、提交信息等接口如果异常的话，后果是很严重的。线上会因为各种情况，是在开发和测试阶段是不能解决的，所以监控线上接口状态是很必要的。二、捕获方法：接口响应捕获有两种方法：第一种是通过在业务中获取接口响应，比如在axios的结果获取接口响应信息，这种缺点是如果有多个项目，需要在每个项目进行侵入代码，工作量大并且容易出错。第二种是重写XMLHttpRequest和fetch，这样不需要侵入业务，监听请求响应结果。具体代码如下1、

2021-05-05 16:37:14 444

原创前端监控之系列

准备出前端监控分享一个系列，现在前端关于前端监控两极分化严重：中小型公司觉得监控没啥用，优先保证业务上线，等出了严重错误再修复，或者测试人员觉得没问题就行；头部互联网公司一般会有健全的监控体系，并且非常依赖健全的监控体系甚至是作为考核的重要指标。为了保证前端业务的稳定，出前端监控的一系列分享，包含： 1、接口统计 2、JavaScript错误 3、性能测速 4、资源加载异常 5、白屏异常更快捷更准确接入前端监控...

2021-05-05 16:30:26 58

原创字幕字体滚动插件——scroxt.js

READMEscroxt.js Overviewscroxt.js是一个字体滚动的插件库，包括视频弹幕滚动，直播弹幕、直播弹幕强制模式、单行水平左右滚动、文本垂直滚动上下，用于简单快捷生成滚动字体。性能优秀，通过CPU加速，缓存字体元素，帧运动，达到最流畅的效果。兼容Chrome、Firefox、Opera、IE9及IE9以上浏览器。Installationnpm install --save

2017-11-07 12:24:04 518

github_35780652的博客