前端错误收集方式
在讲错误收集方式之前，先理清一下前端编码时有那些常见错误 前端错误收集是保障用户体验、排查线上问题的关键手段。本文将从多个角度详解前端错误收集的各种方式，包括不同框架（如 React、Vue）、JavaScript 执行环境中的同步/异步/Promise 错误、资源加载错误（如图片、script 加载失败）等。以下是全面的错误捕获机制总结： 🌐 一、通...
前端小玩具~错误捕获定位工具
正文 我们在平时的工作中，开发功能的同时不可能把场景考虑的面面俱到，而生产环境往往情况是非常复杂的，用户录入进去的数据总是千奇百怪，那如果遇到问题的话，我们又要如何进行排查呢？总不可能让用户录个屏吧哈哈 所以我们就出现了 前端埋点 的操作，不过埋点的方向以及文章都挺多的，也都挺复杂的，这篇文章我们就讲一个比较有趣的 错误捕获思路 。 我们平时在使用框架开发 遇到bug 时，比如 Vue ，如果是在本地环境，我们在控制台可以很容易的找到出...
🍻 前端服务监控原理与手写开源监控框架SDK前端服务监控概述
前端监控的目的很明确，无非就是让我们的产品更完善，更符合我们和用户的需求。运营与产品团队需要关注用户在产品内的行为记录，通过用户的行为记录来优化产品，研发与测试团队则需要关注产品的性能以及异常，确保产品的性能体验以及安全迭代。 而一个完整的前端监控平台至少需要包括三个部分： 数据采集与上报、数据整理和存储、数据展示 。算上需要监控的项目的话，也就是说，至少需要4个项目才能完整的记录前端监控的内容。 下图是一个完整的前端监控平台需要处理和...
前端数据监控平台
比如客户说：你们的页面咋白屏了？ 开发：具体可以给我说一下，白屏之前你做了什么吗？ 客户：我就点了一下按钮 开发：你能告诉我是哪个页面的哪个按钮吗？ 最后，客户极其不耐烦的地丢过来一张没有缺少url的白屏给你看，试图证明他说的是真的，真白屏了。 最后不再理睬你！ 开发人员试图找到解决方案，想快速解决线上bug，但是客户却以为你在质疑他。 真的有点秀才遇上兵有理说不清，其实真的没有谁对谁错，只是双方立场不同，作为客户，你的系统bug了，我...
前端实现埋点&监控
实现埋点功能的意义主要体现在以下几个方面： 0. 数据采集：埋点是数据采集领域（尤其是用户行为数据采集领域）的术语，它针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。通过埋点，可以收集到用户在应用中的所有行为数据，例如页面浏览、按钮点击、表单提交等。 1. 数据分析：采集的数据可以帮助业务人员分析网站或者App的使用情况、用户行为习惯等，是后续建立用户画像、用户行为路径等数据产品的基础。通过数据分析，企业可以更好地了解...
前端埋点重要环节：前端如何录制用户的操作过程
前言 大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。 背景 公司有很多的项目，但是并不是每一个项目都很重要，其实重要的项目就那么几个，上面也是很重视这几个项目，尤其是对一些生产问题的关注度很高。 这几天上面交代下来了，需要对这些项目做一些用户行为的记录，主要是为了更好地还原用户在某一个时间点的操作过程 注意点 想要完成这个需求，仔细想了一下，需要注意几个点： 跨框架使用： 这些项目有vue、...
Web性能监测的利器Performance Observer
前言 前段时间在研究前端异常监控平台，在思考性能监控时，想到了浏览器自带的观察者以及页面生命周期API 。于是在翻查资料时发现了， API。正好趁着这个机会给大家好好讲讲Performance Observer API Performance Observer（性能观察者） 定义 是一种JavaScript API，用于监测页面性能指标，如资源加载时间、页面渲染时间等。它可以触发回调函数，以便你收集和分析页面性能数据。 优点 1. 性能...
自己搭建前端监控？一定要进来看看这篇文章
前言 在我们开发网站和应用程序的过程中，经常会遇到各种莫名其妙的错误。错误原因也五花八门，可能是浏览器兼容问题，可能是代码里面没做兜底，也可能是后端接口挂掉了等等错误，这些错误可能会直接影响到用户的使用体验，所以监控线上错误变得特别重要。 通过前端监控，我们能够实时监测 JavaScript 错误、性能问题和用户界面的 bug。这么一来，我们就可以迅速找到问题所在，及时解决错误。还有一些可视化报告、自动通知和...
拦截xhr进行http异常上报
拦截xhr