%20(2).svg)
项目简介
本项目是基于TypeScript编写的前端监控系统，专门为React和Vue项目设计。它可实时捕捉前端错误、收集性能参数，还能记录用户行为，助力开发者优化网站和应用性能。
项目的主要特性和功能
- 数据采集：利用JavaScript收集监控数据和性能参数。
- 异常监控：捕获运行时错误、Promise错误、框架错误和资源错误。
- 白屏错误录像：借助rrweb实现错误时的场景回放。
- 用户行为监控：记录路由变化、点击事件等用户行为。
- 性能数据：收集首屏时间、LCP、FMP等关键性能指标。
- 自定义配置：支持多种配置选项，满足不同项目需求。
安装使用步骤
安装依赖
确保已下载本项目的源码文件，在项目根目录下运行以下命令安装依赖：
bash
npm install
编译项目
运行以下命令编译项目：
bash
npm run build
运行示例
在本地运行示例代码，使用http-server启动本地服务器：
bash
http-server ./se-data-monitor/
然后在浏览器中访问http://localhost:8080/demo/xxx.html查看示例。
初始化监控
在项目中引入se-data-monitor，并进行初始化配置：
```jsx
import seMonitor from "se-data-monitor";
const seMonitorInstance = seMonitor.setParams({ src: "/ma.gif", psrc: "/pe.gif", token: "ITE", crash: { isOpen: false, }, record: { isOpen: false, }, console: { isOpen: false, }, });
window.seMonitor = seMonitorInstance;
// 主动打点 window.seMonitor.track("首页概览"); ```
配置参数
setParams方法支持多种配置参数，包括错误过滤、性能监控、用户行为监控等。具体参数及其作用请参考使用指南部分。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】