一个完整的前端监控平台包括三个部分：数据采集与上报、数据整理和存储、数据展示。 本文要讲的就是其中的第一个环节——数据采集与上报。下图是本文要讲述内容的大纲，大家可以先大致了解一下： 仅看理论知识是比

感兴趣的读者可以点击阅读。 本文通过梳理前端错误监控知识、介绍sentry错误监控原理、sentry初始化、Ajax上报、window.onerror、window.onunhandledrejection几个方面来学习sentry的源码。 开发微信小程序，想着搭建小程序错误监…

每一层的监控的侧重点都有所差异，本篇文章把范围限定在“前端应用监控(不含node，node实际上可以归为‘后端服务监控’)”。 前端应用程序监视是一个相对较新的术语，用于描述开发人员，工程师和产品所有者用来跟踪，维护和修复Web应用程序，本机应用程序和网站的工具。前端应用程序监…

在上一篇文章《前端监控SDK开发分享》中，对客户端SDK的实现做了分享。这篇文章将会分成四节（需求背景、系统架构与融合、数据收集与分析、问题发现与解决）分享介绍我们是如何打造前端监控系统的。 为了实现收集功能，我们需要提供一个前端监控平台，它能够收集数据、处理数据、存储数据、查…

本文将结合工作，描述一下前端监控系统Sentry搭建过程中，背景、设计、实现、思考四个方面的感悟及问题。 监控从字面含义来看包含两方面内容：监，监测的是代码；控，控制的是质量。监控是工具而不是目的，不是为了具有功能而监控，而是要通过监控，真正了解页面运行情况，以达到代码运行质量…

首先先看看如何捕获异常。 js异常的特点是,出现不会导致JS引擎崩溃 最多只会终止当前执行的任务。比如一个页面有两个按钮，如果点击按钮发生异常页面，这个时候页面不会崩溃，只是这个按钮的功能失效，其他按钮还会有效。 上面的例子我们用setTimeout分别启动了两个任务，虽然第一…

上述性能监控的结果集，可以分析出前端性能的好坏，监测性能的结果可以指向性的去优化各块性能，比如常见的加快首屏加载等等。 2.页面的性能直接关乎用户体验，开发设备的测试数据具有局限性，结合大量线上用户性能数据能更好的佐证页面性能，并对应优化。 3.资源（cdn）加载的异常能实时体…

HI!，你好，我是zane，zanePerfor是一款最近我开发的一个前端性能监控平台，现在支持web浏览器端和微信小程序段。 我定义为一款完整，高性能，高可用的前端性能监控系统，这是未来会达到的目的，现今的架构也基本支持了高可用，高性能的部署。实际上还不够，在很多地方还有优化…

上一篇相关文章介绍了 Sentry 的基础篇 —— 本地安装，本篇文章以实际项目出发使用 Sentry 进行前端监控实践。实践案例选择 Next.js 项目，具体项目地址next-sentry-easy。 Next.js 官方示例仓库里有两个关于 sentry 的 Demo，这…