- 综合排序
- 最热优先
- 最新优先
- 来自专栏织云平台团队的专栏
H5前端监控实践
为了便捷的衡量H5页面的速度、质量，高效定位问题，给用户提供更优质的服务。我们建设了自己的H5前端监控——天网云ilook。 天网云 iLOOK 是什么 天网云 ilook (以下简称 ilook )是天网监控体系中的一部分，专注于用户端 H5监控，主要分3部分： 1. 返回码系统 在最接近用户的场景，监控前端页面http请求的成功率和延时，从时间、平台、网络环境、地域等维度详细分析，快速定位请求失败和耗时长的具体环境，优化应用。 3. 前端展示 常用的天趋势对比： 还可以有很多展现，比如慢用户画像： 计算测速点延时正太分布： 点击测速点，可以从时间、平台、运营商、APN、省份等维度帮助分析用户访问H5页面的速度以及用户分布。 最后 H5 监控作为业务质量的重要一环，意义重大。问题定位，性能优化都需要基于上报的数据进行。这里总结了一下我们在前端监控的一些尝试，怎样让监控系统更高效的定位问题，是我们一直在思考解决的问题。
6.6K20发布于 2017-06-28 - 来自专栏Vue源码 & 前端进阶体系
【前端监控】页面错误监控
一个多级不判空取值就很可能导致严重的白屏bug 你以为这种错误很少吗，就我们团队就这种bug就出现好多次，被大佬骂惨了，看看我们现在线上监控到的错误 一大半都是 of undefined,of null PAGE_ERROR/index.js:87:1" 可以看到所有的函数调用栈，getuserInfo 和 JSError 上报什么数据 除了我们常规的上报基础数据 如你上面看到的数据，都需要上报上去 可以看一下我们监控系统最终上报的数据 ，具体可以看 【前端监控】静态资源测速&错误上报 这里再简单描述下 前面我们用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 去跑一个页面，生成的性能报告就可以认为是合成监控。 优点： 实现简单 采集到的数据维度更高，包括硬件的 对用户无影响 能够生成丰富的图标信息，瀑布图 缺点： 无法还原现实场景 样本数据无法代表现实情况 Real User Monitoring：真实用户监控
2K20编辑于 2022-06-15 - 来自专栏Vue源码 & 前端进阶体系
【前端监控-序】简说腾讯团队的前端监控
小东西快快学快快记，大知识按计划学，不拖延 我现在是有参与到团队的日志系统的开发维护，所以今后打算把 前端监控 做成一个系列，把整个前端监控链路给总结一遍 帮助自己巩固知识，也帮助想了解这方面内容的同学 这篇文章将是一个序篇，总览地说一下 前端监控，大概分为5个部分 1、监控典型例子 2、为什么需要监控 3、监控上报什么内容 4、监控上报的完整链路 5、完整的上报系统包含什么 没有监控典型例子 说真的 如果你没有监控错误上报，谢谢，你可以溜溜球了 为什么需要监控 看了上面的例子，大家应该也体会到 前端监控的重要性了吧，再详细说，就是3个点 1、被动为主动，及时发现问题，以免造成损失 问题是不可避免的， 监控上报什么内容 那么我们前端监控，需要上报什么东西，才能对应用有一个完整的监控呢？ 监控系统包含什么 一个完整的上报系统是怎么样的 通过上面这个上报的流程，我们应该可以简单了解到上报系统的组成 大致可以分为 5 个部分 1、页面引入的上报SDK 2、上报数据的存储系统 3、上报数据的查询系统
1.4K30发布于 2021-08-13 - 来自专栏Vue源码 & 前端进阶体系
【前端监控】日志池
前端监控系列，SDK，服务、存储 ，会全部总结一遍，写文不易，点个赞吧 前端监控上报数据的时候，是怎么发请求的呢，是每产生一条监控数据就上报一次吗 当然不是了，如果监控点很多，那估计请求都快发爆炸了， 请求发得多，不仅会加重服务器压力，数据丢失的概率也大，毕竟10条请求的成功率肯定比 一条请求 的成功率小嘛 所以才会出现日志池，这篇内容不属于前端监控的一部分，属于是其中的一个优化点 不多说了，开始正文
1K20发布于 2021-09-09 - 来自专栏前端那些趣事
前端监控那些事
监控这个词对于前端，个人觉得有三个定义，分别是“性能监控”、“异常监控”、“数据监控” 性能监控则是针对web应用的性能，涉及包括用户体验、用户交互时间等 异常监控则是指Web应用得不到预期效果结果的情况监控 2.1 Sentry Sentry是开源的前端异常监控上报工具，通过集成到项目中，你可以在不同环境（测试，生产等）中，帮你收集记录问题，并定位到问题所在代码 Sentry官方服务需要付费，建议自行搭建 项目中使用导入 import Report from 'sentry-report'; // 配置dsn const option = {dsn:http://753ce3bf82e94ab0aa7b5e62fae16d3c （code） 前端项目中，异常监控分为异常捕获和异常上报 window.onerror（JS异常） 我们使用 window.onerror 捕获一般情况下 JS 错误的异常信息。 主要用于捕获偶现的难以捕获的异常情况，最适合处理那些我们无法控制的错误，不过大部门前端代码少依赖环境，比较少用到，用node开发后端的同学，经常会有非常多的异步调用，需要对异常作捕获处理 try {
1.6K30发布于 2020-07-03 - 来自专栏腾讯云可观测专栏
前端性能监控（RUM）
简介 腾讯云前端性能监控 (RUM) 是一站式前端监控解决方案，用户只需要安装 sdk 到自己的项目中，通过简单配置化，即可实现对用户页面质量的全方位守护，真正做到了低成本使用和无侵入监控。 前端性能监控专注于 Web，小程序等大前端领域，主要关注用户页面性能（页面测速，接口测速，CDN 测速等）、质量（JS 错误，Ajax 错误等），并且通过联动腾讯云应用性能监控实现对前后端监控一体化的打通 为什么要有前端监控 作为一名前端开发者，想必你一定遇到过这些问题。 业务报错无处查，用户环境复杂多变，线上问题复现困难。 相较于后端监控，前端监控更贴近于用户，能高效反馈真实用户使用我们产品过程中的体验，于开发者而言，前端监控是聚焦在技术领域的监控产品，对于产品性能质量提升、发现现网问题都是非常重要的工具。 03 低成本 使用腾讯云前端监控，几乎没有学习成本，只要您有过基础的前端知识，就可以放心的使用。
3.4K30发布于 2021-07-16 - 来自专栏前端技术研究和应用
浅析前端监控技术
日志监控普通上报日志上报的常见方式，各有优缺：fetch/xhr：最常见的上报方式，可能遇到跨域问题。页面卸载时，采用异步上报可能导致数据丢失，同步上报将阻塞浏览器的关闭，导致页面卡顿。 WebWorker介绍参考：https://juejin.cn/post/7139718200177983524（3）img上报因为img资源浏览器不会阻止，跨域会针对xhr这种请求才会生效，一般前端监控上报通过一个 + $.param(data)}badjsbadjs-web是腾讯开源的一款前端监控系统。 badjs-webbadjs-report GItHub：https://github.com/BetterJS/badjs-reportsentrysentry是一款开源的支持多语言（JS、Go、Python等）的错误日志监控系统 本地部署：https://blog.csdn.net/zzddada/article/details/119716725落地方案：https://www.jianshu.com/p/559f70bbfcdc监控页面示例
1.3K40编辑于 2023-04-14 - 来自专栏技术杂记
Elasticsearch 监控5
修改nginx配置 修改nginx配置文件 [root@es_node conf]# vim nginx.conf [root@es_node conf]# grep -v "#" nginx.conf | grep -v "^$" user nginx; worker_processes 1; error_log logs/error.log; events { worker_connections 1024; } http { include mime.types;
28810编辑于 2022-02-10 - 来自专栏余生大大
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 - 来自专栏Vue源码 & 前端进阶体系
【前端监控】离线日志
前端监控系列，SDK，服务、存储 ，会全部总结一遍，写文不易，点个赞吧 离线日志，一般指的是用户离线时产生的日志。 离线日志的作用主要有两点 第一，保证日志完整性。 本文分4部分 1、基本思路 2、api简介 3、具体处理 4、代码仓库 基本思路 最简化的说法就是，监控的数据存在本地 当然不是一股脑存了，也是有条件的。 1、上报失败的时候，把监控的数据存在本地，用于后续重试上报 2、用户离线 or 服务不稳定。减少频繁上报 3、上报等级不高的数据，会存在本地，提供方法供用户手动上传，定位更加细致的问题。 一般有 250MB 以上，localstorage 只有5MB 下面我们来简单说下 indexDB 的使用 其实把 indexdb 介绍完都能写一篇文章了，因为知识点实在挺多的，所以本文只会简单讲使用到的 "act", time: 11 }) addRequest.onsuccess = ()=>{} // 成功事件 addRequest.onerror= ()=>{} // 失败事件 } 5、
2.1K50发布于 2021-09-09 - 来自专栏编程
前端异常监控系统
其实这个问题很常见，但是这次我觉得这个问题如果不是我们自己同事发现的，那就很恐怖，可能废很大精力才能查出问题，甚至会导致很严重的线上bug，细思极恐，刚好前不久成都FCC的大前端交流会上叶小钗谈到了监控这块 也可以通过其他方式拿到这些老版本浏览器的columnNo和error参数，目前监控主要是针对移动端，也没太大必要去兼容老版本的浏览器。 后来想到给报错的文件路径+行+列信息拼在一起字段做md5生成，根据这个唯一值生成md5，最后查询的时候只需要查询当前md5字段就能知道这一条报错一个有多少条记录。 引入监控的项目，由于业务原因可能需要上传一些业务信息方便分析，所以预留一个配置字段，上传错误的时候请求会带上业务相关信息。 现在第一版已经上线，并且在刚上线不到两个小时，就收到了报错邮件，吓得我急忙查找bug，很快查出来了问题来，这个bug应该存在很久了，但是因为没有阻塞性，并且没有影响到业务，也一直没被发现，结论是我们这个前端异常监控功能还是很成功
1.8K70发布于 2018-01-12 - 来自专栏技术杂记
RabbitMQ 监控5
创建集群 当前的集群为单节点 [root@rabbitmq ~]# rabbitmqctl cluster_status Cluster status of node 'rabbit@rabbitmq' ... [{nodes,[{disc,['rabbit@rabbitmq']}]}, {running_nodes,['rabbit@rabbitmq']}, {cluster_name,<<"rabbit@rabbitmq">>}, {partitions,[]}] [root@rabbitmq
31720编辑于 2022-02-09 - 来自专栏较真的前端
前端异常监控实践
此外，一个可靠的前端监控系统还可以化被动为主动，不再被动的等待客服来找，而是在问题出现时开发人员可以第一时间知道并解决。 图片来自《把前端监控做到极致》 利用Promise.prototype.catch()可以捕获Promise实例中发生的异常。 第5点完备性比较依赖于前端监控平台的“消费端”，即不同的应用场景对于完备性有不同程度上的要求。但是前4点应该所有前端监控平台有着大致相同的需求。 图片来自《把前端监控做到极致 总结 如果你已经部署了一套稳定的前端监控系统之后，你会发现bug的数量是无法想象的。大数据处理是个难点。 今后如果有时间，我会整理一下关于如何处理庞大的错误日志。 参考文章： 把前端监控做到极致 [浏览器端 JavaScript 异常监控 For Dummies.pdf](https://github.com/kof97/QCon/blob/master/全球软件开发大会
1.5K20发布于 2019-07-31 - 来自专栏技术杂记
Mysql 监控5
然后重启 zabbix-agent ，只有重启，zabbix-agent 才能读到变化后的配置
1.1K40编辑于 2022-06-30 - 来自专栏细嗅蔷薇
使用前端性能监控平台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 - 来自专栏编程技术分享
前端性能和错误监控
前言 这几天心血来潮，想了解一下前端监控的相关知识，可是在查看了很多资料之后，发现没有详细介绍前端监控的相关文章，都是讲个大概，反倒是现成的前端监控工具有不少。 为了深入学习前端监控的相关技术原理，这几天都在查阅相关的资料。现在打算写一篇文章详细介绍一下前端监控，对这几天的研究做一个总结（于是就有了本文）。 // 前端监控流程 数据采集 --> 数据上报 --> 服务端处理 --> 数据库存储 --> 数据监控可视化平台 不过，本文只讲监控中的数据采集和数据上报两个步骤，后续流程需读者自行研究探索（这也是一种乐趣 $store.state.pageLoadedStartTime) }) } 除了性能和错误监控，其实我们还可以做得更多。 clearError() { monitor.errors = [] }, // 上传监控数据
1.9K20发布于 2020-09-28 - 来自专栏较真的前端
把前端监控做到极致
作者介绍： 扬森：阿里巴巴集团数据技术及产品部前端稳定性负责人，阿里前端监控平台Clue创始人。 本文将从 采集、数据处理、分析、报警 4 个维度进一步阐述如何把前端监控做到极致。 小福利 如果你还没有使用前端监控服务，那么可以先看看这个小福利。 只用两行代码就能打造一个前端异常实时监控平台，还带报错数统计功能。 异常波动一定有元凶 前端发生故障最常见的原因就是新发布的版本存在 Bug，那么这种问题在监控平台中如何提供分析思路呢？ 当然，也并不是所有的波动都是前端变更引起。 结语 前端监控看似简单，但想要监控真正发挥价值，还需要从各个方面进行不断的优化和打磨。当然，最重要的是，要意识到前端监控的必要性，及早开始进行监控，才能更好的避免线上故障的产生。
1.4K50发布于 2018-06-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号