- 综合排序
- 最热优先
- 最新优先
- 来自专栏Vue源码 & 前端进阶体系
【前端监控】页面错误监控
本文分为4个部分 1、页面错误分类 2、错误监听具体处理 页面错误分类 页面错误这种数据上报的重要性，想必不用我多说了吧 页面通常就分为3种错误 1、js 报错 2、资源加载错误 3、请求报错 其中js 一个多级不判空取值就很可能导致严重的白屏bug 你以为这种错误很少吗，就我们团队就这种bug就出现好多次，被大佬骂惨了，看看我们现在线上监控到的错误 一大半都是 of undefined,of null Script error，具体参数如下 一般js文件都放在cdn，所以不可避免会跨域的，我们的解决办法也就是解决跨域问题 1.文件添加跨域头 Access-Control-Allow-Origin 2. ，具体可以看 【前端监控】静态资源测速&错误上报 这里再简单描述下 前面我们用window.onerror 来监听js执行错误，但是它并不能获取到资源加载失败的错误，因为这些错误不会向上冒泡，但是我们可以进行捕获 所以我们这里只监听资源错误就好了 window.document.addEventListener('error',handler, true） 请求报错 请求报错的内容，也已经写过，具体可以参考 【前端监控
2.8K10发布于 2021-09-09 - 来自专栏Vue源码 & 前端进阶体系
【前端监控】监控数据都有什么
前端监控系列，SDK，服务、存储 ，会全部总结一遍，写文不易，点个赞吧 监控的内容我们已经说了很多了，那么我们一般上报一条监控内容都具体包含什么数据呢 今天就来详细列举一下 本文列出的数据会这样说明 1、有什么数据 2、作用是什么 3、怎么获取 我会给每个具体分个类，按分类来逐个说明 数据大概分为下面几类 1、监控点数据 2、用户信息 3、设备信息 4、项目信息 5、日志信息 下面就按这个分类来说明里面包含的详细数据 监控点数据 这个就是每个监控点类型相应的数据，像接口请求信息，静态资源，首屏测速等等 具体可以在相应的文章中查看 1、自动抓取接口请求数据 2、静态资源测速&错误上报 3、页面错误监控 4、单页首屏测速 所以这里就不一一列举了，本文主要是讲一些公共的监控数据 不过这里简单说个接口信息的监控数据 cgi 接口链接 status 状态码 body 请求体 responce 响应 reqHeader 请求header 生成方式和 aid 一样 设备信息 关于设备信息的数据就比较多了，对于前端比较重要，前端看重兼容性，各端的支持五花八门，定位问题需要考虑这一点 设备信息，一般我们可以通过 navigator.userAgent
1.8K50发布于 2021-09-10 - 来自专栏Article
前端性能监控
当我们谈及前端性能的时候，我们究竟想聊什么？ 最近在做前端性能监控的一些事，这篇文章算是前端性能方面的基础知识梳理。 如何监控？ Synthetic Monitoring：合成监控 合成监控是指在模拟环境中的监控，通常我们自己使用 Lighthouse 去跑一个页面，生成的性能报告就可以认为是合成监控。 Extends the base definition of the Performance interface defined by [HR-TIME-2]; 2. Level 2 里面主要有三方面的改进，上述引用的是文档中的表述，其实扩充的内容比较多的，有下面几点： [NAVIGATION-TIMING-2] 支持更高精度的时间，可以获取微秒，后续其他的 API ); await doTask2(); // Some developer code performance.mark("endTask2"); // Log them out const
2K20编辑于 2022-06-15 - 来自专栏Vue源码 & 前端进阶体系
【前端监控-序】简说腾讯团队的前端监控
小东西快快学快快记，大知识按计划学，不拖延 我现在是有参与到团队的日志系统的开发维护，所以今后打算把 前端监控 做成一个系列，把整个前端监控链路给总结一遍 帮助自己巩固知识，也帮助想了解这方面内容的同学 这篇文章将是一个序篇，总览地说一下 前端监控，大概分为5个部分 1、监控典型例子 2、为什么需要监控 3、监控上报什么内容 4、监控上报的完整链路 5、完整的上报系统包含什么 没有监控典型例子 说真的 如果你没有监控错误上报，谢谢，你可以溜溜球了 为什么需要监控 看了上面的例子，大家应该也体会到 前端监控的重要性了吧，再详细说，就是3个点 1、被动为主动，及时发现问题，以免造成损失 问题是不可避免的， 监控上报什么内容 那么我们前端监控，需要上报什么东西，才能对应用有一个完整的监控呢？ 分了两个部分 1、上报的类型 2、上报的具体内容 1上报类型 对于页面，我们通常将监控 分为 3个大类型 1、测速类监控 2、稳定性监控 3、计量类监控 1、测速类监控 顾名思义就是速度，包括 接口请求的响应速度
1.4K30发布于 2021-08-13 - 来自专栏Vue源码 & 前端进阶体系
【前端监控】日志池
前端监控系列，SDK，服务、存储 ，会全部总结一遍，写文不易，点个赞吧 前端监控上报数据的时候，是怎么发请求的呢，是每产生一条监控数据就上报一次吗 当然不是了，如果监控点很多，那估计请求都快发爆炸了， 请求发得多，不仅会加重服务器压力，数据丢失的概率也大，毕竟10条请求的成功率肯定比 一条请求 的成功率小嘛 所以才会出现日志池，这篇内容不属于前端监控的一部分，属于是其中的一个优化点 不多说了，开始正文 本文其实挺简单的，分为三个部分 1、基本思路 2、具体逻辑 3、代码Demo仓库 基本思路 最简单的说法就是 每次上报数据的时候，不会立即发送，把数据存到一个数组里面 然后设置 setTimeout， 上报请求发生错误的时候，会进行重试，以免日志就这么丢失，这里在离线日志中有过相关处理 2、页面关闭发送剩余日志。因为我们使用定时发送的方式，可能会存在用户关闭界面的时候，还有缓存的日志没有发送。 1、页面初始化时，读取本地数据，push 进数组 2、每次存本地时，会开启一个定时器，从本地读取数据，push 进数组 所以缓存进本地，是为了把数据延迟更久上报，同时保证数据不丢失 看下大概的实现代码
1K20发布于 2021-09-09 - 来自专栏前端那些趣事
前端监控那些事
监控这个词对于前端，个人觉得有三个定义，分别是“性能监控”、“异常监控”、“数据监控” 性能监控则是针对web应用的性能，涉及包括用户体验、用户交互时间等 异常监控则是指Web应用得不到预期效果结果的情况监控 使用及安装 npm install timing.js //安装 timing.getTimes(); //控制台模式 timing.printSimpleTable(); //控制台表格模式 复制代码 2. 2.1 Sentry Sentry是开源的前端异常监控上报工具，通过集成到项目中，你可以在不同环境（测试，生产等）中，帮你收集记录问题，并定位到问题所在代码 Sentry官方服务需要付费，建议自行搭建 sentry-report'; // 配置dsn const option = {dsn:http://753ce3bf82e94ab0aa7b5e62fae16d3c@sentry.***.com/2} （code） 前端项目中，异常监控分为异常捕获和异常上报 window.onerror（JS异常） 我们使用 window.onerror 捕获一般情况下 JS 错误的异常信息。
1.6K30发布于 2020-07-03 - 来自专栏前端技术研究和应用
浅析前端监控技术
日志监控普通上报日志上报的常见方式，各有优缺：fetch/xhr：最常见的上报方式，可能遇到跨域问题。页面卸载时，采用异步上报可能导致数据丢失，同步上报将阻塞浏览器的关闭，导致页面卡顿。 （2）Beacon上报我们需要一个 API 能保证在页面销毁之前发出请求，还不能阻塞页面，为了处理这个场景的问题，浏览器推出了 Beacon API。 WebWorker介绍参考：https://juejin.cn/post/7139718200177983524（3）img上报因为img资源浏览器不会阻止，跨域会针对xhr这种请求才会生效，一般前端监控上报通过一个 + $.param(data)}badjsbadjs-web是腾讯开源的一款前端监控系统。 本地部署：https://blog.csdn.net/zzddada/article/details/119716725落地方案：https://www.jianshu.com/p/559f70bbfcdc监控页面示例
1.3K40编辑于 2023-04-14 - 来自专栏腾讯云可观测专栏
前端性能监控（RUM）
简介 腾讯云前端性能监控 (RUM) 是一站式前端监控解决方案，用户只需要安装 sdk 到自己的项目中，通过简单配置化，即可实现对用户页面质量的全方位守护，真正做到了低成本使用和无侵入监控。 前端性能监控专注于 Web，小程序等大前端领域，主要关注用户页面性能（页面测速，接口测速，CDN 测速等）、质量（JS 错误，Ajax 错误等），并且通过联动腾讯云应用性能监控实现对前后端监控一体化的打通 相较于后端监控，前端监控更贴近于用户，能高效反馈真实用户使用我们产品过程中的体验，于开发者而言，前端监控是聚焦在技术领域的监控产品，对于产品性能质量提升、发现现网问题都是非常重要的工具。 03 低成本 使用腾讯云前端监控，几乎没有学习成本，只要您有过基础的前端知识，就可以放心的使用。 2. 抽样率可以控制用户侧性能数据上报的比例，其中 100% 表示不抽样，0% 表示完全不上报性能数据，性能数据包括：页面测速，接口测速和静态资源测速。 3.
3.4K30发布于 2021-07-16 - 来自专栏余生大大
Skywalking接入前端监控
前言 Skywalking从8.2版本开始了支持浏览器端的监控，也就是在仪表盘中的Web Browser选项，但是应用的人好像并不多，我在搜索相关文章时对配置Skywalking前端监控的文章很少，所以只能在组合有限的资料中进行配置 我的前一篇文章搭建的Skywalking为8.6版本的，如果有低版本的同学或者需要搭建的同学可以看一下，地址如下： Docker安装SkyWalking并监控Java程序 配置依赖 Skywaking 的浏览器接入需要引入一个客户端的js包，然后再需要采集信息的地方使用包内的函数，并不能像java一样无侵入性的进行监控 安装依赖 执行以下命令安装客户端依赖 npm install skywalking-client-js --save 安装完成后会在node_modules里出现skywalking-client-js的包，如下图 Router配置 router配置是配置监控触发位置，在router的配置内容中先引入
2.6K50编辑于 2022-11-02 - 来自专栏编程
前端异常监控系统
其实这个问题很常见，但是这次我觉得这个问题如果不是我们自己同事发现的，那就很恐怖，可能废很大精力才能查出问题，甚至会导致很严重的线上bug，细思极恐，刚好前不久成都FCC的大前端交流会上叶小钗谈到了监控这块 也可以通过其他方式拿到这些老版本浏览器的columnNo和error参数，目前监控主要是针对移动端，也没太大必要去兼容老版本的浏览器。 （图1） （图2） （图3） （图4） grunt生成sourcemap： sourcemap解析问题 思考的时候发现最大的难点应该在sourcemap解析。 引入监控的项目，由于业务原因可能需要上传一些业务信息方便分析，所以预留一个配置字段，上传错误的时候请求会带上业务相关信息。 现在第一版已经上线，并且在刚上线不到两个小时，就收到了报错邮件，吓得我急忙查找bug，很快查出来了问题来，这个bug应该存在很久了，但是因为没有阻塞性，并且没有影响到业务，也一直没被发现，结论是我们这个前端异常监控功能还是很成功
1.8K70发布于 2018-01-12 - 来自专栏Vue源码 & 前端进阶体系
【前端监控】离线日志
前端监控系列，SDK，服务、存储 ，会全部总结一遍，写文不易，点个赞吧 离线日志，一般指的是用户离线时产生的日志。 离线日志的作用主要有两点 第一，保证日志完整性。 本文分4部分 1、基本思路 2、api简介 3、具体处理 4、代码仓库 基本思路 最简化的说法就是，监控的数据存在本地 当然不是一股脑存了，也是有条件的。 1、上报失败的时候，把监控的数据存在本地，用于后续重试上报 2、用户离线 or 服务不稳定。减少频繁上报 3、上报等级不高的数据，会存在本地，提供方法供用户手动上传，定位更加细致的问题。 可以直接存一个js对象，数据都有一个独一无二的key，根据这个key就能拿到对应的value 2、异步操作。 为了区分离线日志类型，还有一个字段 offline_type 值为 fail_log，表示上报失败的日志 值为 common_log，表示等级不高存本地的日志 这个字段只是为了方便本地区分 离线日志，对于监控数据没有意义
2.1K50发布于 2021-09-09 - 来自专栏较真的前端
前端异常监控实践
此外，一个可靠的前端监控系统还可以化被动为主动，不再被动的等待客服来找，而是在问题出现时开发人员可以第一时间知道并解决。 图片来自《把前端监控做到极致》 利用Promise.prototype.catch()可以捕获Promise实例中发生的异常。 第5点完备性比较依赖于前端监控平台的“消费端”，即不同的应用场景对于完备性有不同程度上的要求。但是前4点应该所有前端监控平台有着大致相同的需求。 图片来自《把前端监控做到极致 总结 如果你已经部署了一套稳定的前端监控系统之后，你会发现bug的数量是无法想象的。大数据处理是个难点。 今后如果有时间，我会整理一下关于如何处理庞大的错误日志。 参考文章： 把前端监控做到极致 [浏览器端 JavaScript 异常监控 For Dummies.pdf](https://github.com/kof97/QCon/blob/master/全球软件开发大会
1.5K20发布于 2019-07-31 - 来自专栏细嗅蔷薇
使用前端性能监控平台FrontJS监控教程
FrontJS介绍 FrontJS 是一款用于监控前端性能的监控工具，其范围包括WEB和APP等。 FrontJS 为开发人员提供了包含错误收集、页面流向、性能分析、资源及请求监控等用户体验改进所需的信息，最主要的功能当然还是 JS 错误监控：我们会收集精细到 console.log 级别的任何 Javascript ，方便查找错误位置，在每个浏览器中都可以使用完整的堆栈追踪 自定义信任域，可以对跨域信息做出灵活调整有助于监控页面是否发生 XSS 或被植入病毒 页面性能监控，包含 DNS 时间， DOM 渲染时间等信息 参考 前端异常监控平台对比 国内有哪些较好的前端性能监控平台？ - 知乎 版权所有：可定博客 © WNAG.COM.CN 本文标题：《使用前端性能监控平台FrontJS监控教程》 本文链接：https://wnag.com.cn/1263.html 特别声明：除特别标注
1.9K20发布于 2020-04-20 - 来自专栏小泽的专栏
Web页面性能优化——前端监控监控
而前端性能监控则可以帮助我们实时监测和分析页面加载速度、交互性和视觉稳定性等指标，通过定位和解决性能问题，进一步提升页面的加载速度和用户体验。 而前端性能监控可以收集页面加载次数、完全加载耗时、慢加载占比、JS 错误次数等关键指标数据。这些数据可以帮助我们了解页面加载性能的具体情况，识别潜在的性能问题，并对页面进行有针对性的性能优化。 本文分为接入前端性能监控、使用前端性能监控、性能优化三部分，可以通过目录跳转到对应的部分浏览。 接入前端性能监控1.登录腾讯云可观测平台-前端性能监控控制台，首次使用需要创建业务系统图片2.业务系统用于分组管理您接入的应用，请根据业务需要进行相关信息的配置图片业务系统名称：根据需要填写，用以区分分组业务系统描述 ，可以在数据概览页面看到对应的数据，也可以查看网络请求验证数据是否正常上报数据总览：图片浏览器打开开发者工具查看请求，如正常上报，您应该能看到下述请求：图片至此，我们已经完成了RUM接入的全部流程使用前端性能监控完成接入后
1.7K110编辑于 2023-09-12 - 来自专栏技术杂记
RabbitMQ 监控2
打开防火墙 打开本地(RabbitMQ Server)防火墙 [root@rabbitmq ~]# netstat -ant | grep 15672 tcp 0 0 0.0.0.0:15672 0.0.0.0:* LISTEN [root@rabbitmq ~]# iptables -L -nv | grep 15672 [root@rabbitmq ~]# grep 15672 /etc/sysconf
26110编辑于 2022-02-09 - 来自专栏较真的前端
把前端监控做到极致
作者介绍： 扬森：阿里巴巴集团数据技术及产品部前端稳定性负责人，阿里前端监控平台Clue创始人。 本文将从 采集、数据处理、分析、报警 4 个维度进一步阐述如何把前端监控做到极致。 小福利 如果你还没有使用前端监控服务，那么可以先看看这个小福利。 只用两行代码就能打造一个前端异常实时监控平台，还带报错数统计功能。 异常波动一定有元凶 前端发生故障最常见的原因就是新发布的版本存在 Bug，那么这种问题在监控平台中如何提供分析思路呢？ 当然，也并不是所有的波动都是前端变更引起。 结语 前端监控看似简单，但想要监控真正发挥价值，还需要从各个方面进行不断的优化和打磨。当然，最重要的是，要意识到前端监控的必要性，及早开始进行监控，才能更好的避免线上故障的产生。
1.4K50发布于 2018-06-08 - 来自专栏编程技术分享
前端性能和错误监控
前言 这几天心血来潮，想了解一下前端监控的相关知识，可是在查看了很多资料之后，发现没有详细介绍前端监控的相关文章，都是讲个大概，反倒是现成的前端监控工具有不少。 为了深入学习前端监控的相关技术原理，这几天都在查阅相关的资料。现在打算写一篇文章详细介绍一下前端监控，对这几天的研究做一个总结（于是就有了本文）。 // 前端监控流程 数据采集 --> 数据上报 --> 服务端处理 --> 数据库存储 --> 数据监控可视化平台 不过，本文只讲监控中的数据采集和数据上报两个步骤，后续流程需读者自行研究探索（这也是一种乐趣 2 通过 window.onerror 捕捉 js 错误。 $store.state.pageLoadedStartTime) }) } 除了性能和错误监控，其实我们还可以做得更多。
1.9K20发布于 2020-09-28 - 来自专栏采云轩
浅谈前端埋点&监控
浅谈前端埋点&监控 https://www.zoo.team/article/monitor 一、为什么需要埋点&监控 在开始正文之前，我们先想想为什么需要埋点&监控？ 同时对于前端监控来说，大致可以分成三个方向：数据监控、性能监控、异常监控。 性能监控 性能监控主要是针对前端进行监控，比如不同用户在不同地区使用不同机型下的首屏加载时间、页面的白屏时间、静态资源下载时间等数据。 通过针对这些性能数据进行监控，可以大概反映前端性能的好坏，根据性能监测的结果可以进一步的去优化前端性能。 异常监控 前端代码在执行过程中也可能会发生异常，因此需要引入异常监控例如 sentry 等工具及时的上报异常情况，可以避免线上故障的发上。
3.9K40编辑于 2022-12-01 - 来自专栏用户4456933的专栏
SourceMap 与前端异常监控
加个关注，后续上新不错过~ 背景 我们从事 Web 开发工作中，异常监控系统已经是我们朝夕相处的好助手，但是这些异常处理工具通常都是建立在 Web 生态，或者是假定运行在浏览器环境下的，但是当我们需要给一套跨端系统搭建一套类似的异常监控系统 有经验的老司机，立马就可以定位到自己代码里哪里出了问题，但是有没有仔细思考过整套监控系统是如何打通的呢？或者说如果有一天你的监控系统出了问题，你知道如何追查是哪个环节出了问题吗？ 是的，监控系统要解决的一个核心问题就是代码反解。 出于一些性能和安全等的考虑，通常我们发布到线上的代码，通常并非原始的代码，而是经过混淆压缩后的代码，即使不经过压缩，大部分的前端工程都会经过一个 build 的过程，这个过程里通常会包括代码的转换、打包和压缩等 0 ], [ 1, 0, 2, 1 ], [ 2, 0, 2, 1 ] ] ] 双向映射 有了这个绝对位置映射，我们就可以构建源码和产物的双向映射了。
2.6K31发布于 2021-07-12 - 来自专栏程序员成长指北
如何实现前端白屏监控？
背景 不知从什么时候开始，前端白屏问题成为一个非常普遍的话题，'白屏' 甚至成为了前端 bug 的代名词：_喂，你的页面白了。 为什么单独监控白屏 不光光是白屏，白屏只是一种现象，我们要做的是精细化的异常监控。异常监控各个公司肯定都有自己的一套体系，集团也不例外，而且也足够成熟。 但是通用的方案总归是有缺点的，如果对所有的异常都加以报警和监控，就无法区分异常的严重等级，并做出相应的响应，所以在通用的监控体系下定制精细化的异常监控是非常有必要的。 但是也有缺点：「其一切建立在」 **白屏 === 根节点下 DOM 被卸载**「成立的前提下」，实际并非如此比如一些微前端的框架，当然也有我后面要提到的方案，这个方案和我最终方案天然冲突。 { var children = _ref2.children; return React.createElement("p", null, "hello"), children); };
2.2K20发布于 2021-07-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号