dlnu2015250622的博客

采用内核+插件的插件式设计，内核和插件一起组成了 SDK实例 Instance，最后暴露给客户端使用；数据上报，数据格式化，配置初始化等非平台的公共逻辑和基础逻辑，而配置初始化是SDK运行的一个基础逻辑；错误监控，性能，用户行为等公共逻辑以及上层拓展业务。每一个小功能都是一个插件；

数据采集层:SDK: 在前端集成的SDK 负责采集数据，包括性能指标、用户行为、错误日志等。数据收集: 实现高效的数据采集机制，支持实时数据传输，可能使用fetch、XHR 或 Beacon等 API。数据处理层:数据通过 HTTP 或 WebSocket 发送到服务器，确保传输的可靠性和安全性。数据存储数据存储在数据库中，例如关系型数据库（MySQL）或 NoSQL 数据库（MongoDB）根据需要选择。数据分析层（需要借助大数据，目前不需要提）:数据处理: 对采集到的数据进行处理和分析。

分析：这里对于真正做过监控的人来说，会回答直接忽略掉，不上报，不统计，因为上报丢失很正常，不可能一条不差，而且对于大数据量的上报来说，这些是不会影响全局的数据准确性的，如果在面试中针对这个去说解决方法，会有点本末倒置，注意！3. 写demo.html, mock一些图片，promise，js的错误，用于测试错误上报。4.引入WebEyeSDK包，初始化（init）上报接口，获取请求的上报数据。4.还有一些语法写法上的细节，调用时机，封装的函数，检查是否遗漏。2.创建server.js，写服务，并且启动。

rollup-plugin-babel：同babel/preset-env，进行智能预设，会根据版本，浏览器进行语法编译。4.打包编译用babel，同时安装babel/preset-env智能预设（可去webpack专栏查看）2.WebEyeSDK.js暴露方法，同时定义init方法，去初始化config里的上报参数。rollup/plugin-json 上报数据采用json格式保存，Rollup 会将。6.其他格式，esm，cjs打包，静态异步和同步方式进行打包。rollup打包文件。

hash是URL中#后面那部分，同时修改hash值不会引起页面的刷新，也不会向服务器重新发送请求。通过hashchange事件可以监听它的变化。备注：以上三种方式均可以触发hashchang事件, pushState和replaceState均不能触发hashchang事件。history提供了popstate监听事件，但是只有以下两种情况会触发该事件。分为hashchange和popstate，根据是否有#进行分别，区别如下。监听mousedown，touchstart进行监听点击事件，

一般token生成，hash生成的格式，是36进制，也就是0至9和A至Z。// sendBeacon，如果不兼容，再使用图片上传。// 普通ajax发送请求数据。

Vue的有自己的错误监控方法 Vue.config.errorhandler。React的方法是errorBoundary。

1.用window.addEventListener('error', ...) 去捕获 js，css，img资源加载失败的错误* 2.用window.onerror 捕获js错误* 3.用unhandledrejection 捕获promise的错误详细代码，内含丰富的代码解析，一看就懂！最下面记录路径，还未跑通搞懂！！！// 捕获资源加载失败的错误： js css img// 非js css img资源加载的报错， 如果为null，可能是以下三种原因。

底层实现：axios 是一个基于的库。在浏览器环境下，它利用 XMLHttpRequest 来处理 HTTP 请求。它封装了 XMLHttpRequest，提供了更简洁的 API 和更强大的功能，如请求拦截器、响应拦截器和自动转换 JSON 数据等。特性：支持请求和响应拦截器、请求取消、自动转换 JSON、处理超时等。底层实现：fetch 是一个现代的 Web API，基于浏览器内建的 fetch 函数，而不是 XMLHttpRequest。

这个就是每个静态资源在渲染，加载中的“痕迹”，开始渲染时间，结束时间，DNS解析时间，TCP链接时间，请求时间，响应时间，首字节加载时间，协议，各种资源大小等等等等，只要涉及到的数据，都会被记录在相应对象里。FP(First Paint)首次绘制：页面开始绘制的时间，包括任何文本、图像（包括背景图片）、非白色的canvas和svg元素。4.服务器响应时间：您的服务器响应用户请求所需的时间，其中爆哭哟从用户所在位置连接到您的服务器所需的网络时间。知道了这些所有的数据了，下面要做的，就是先统计需要的指标。

整篇文章侧重于性能监控方面，关于用户行为监控可能更多的需要和产品经理探讨，根据监控数据改变业务策略，来不断提升用户的留存和转化。性能监控，涉及的面比较广、链路比较长，针对前端开发要掌握常见的监控指标，理解监控的整个链路。