Sniper-web NPM

Sniper-SDK

前端监控 SDK 【毕设项目，还在迭代】

📦 Installation

npm i sniper-web

🎯 Quickstart

在项目的顶层

const webmonitor = new WebMonitor({
  appid: "appid",
});
// 只有 appid 是必填项

webmonitor.start();

⭐️ 支持特性

错误捕获：代码报错、资源加载报错、接口请求报错
性能数据：FCP、LCP、CLS、TTFB、FID、LongTask
网络测速：接口测速、资源测速
用户行为：跳出率、PV
页面崩溃：基于 worker 的心跳检测
个性化指标：Long Task、Memory 页面内存、首屏加载时间
日志容灾：localstorage 备份
插件机制：所有特性都可以自定义选择
支持的 Web 框架：React

TODO:

日志去除重复
Fetch 监控

🎲 具体配置项

type Options = {
  appid: string;
  waitUidFilled: boolean;
  longtask_time?: number;
  sample_rate?: number;
  plugins?: Plugin[];
  threshold?: number;
  endpoint?: string;
  method: "post" | "get";
  senderType: "xhr" | "beacon";
};

参数名称	作用	默认值
appid	应用标识	/ 【必填项】
waitUidFilled	是否等待 uid 获取后统一上报	false
longtask_time	longtask_time	50(ms)
sample_rate	采样频率, 要求 0-1 之间	0.5
plugins	插件列表	下面说明的全部插件
threshold	统一日志上报数量	20
endpoint	日志请求地址	https://bdul0j.laf.dev/logger
method	日志上报方法	post
senderType	日志上报工具	xhr

已经内置实现的插件

插件名称	作用	注意事项
RrwebPlugin	现场录制插件	取消配置后，将不再上传用户行为录像，适合有安全要求的项目
CrashPlugin	页面崩溃
HTTPPlugin	网络接口错误和测速
JSErrorPlugin	运行时错误
ResourcePlugin	资源错误和测速
LongTimeTaskPlugin	长任务监测
WebVitalsPlugin	webvital 指标检测
EventsPlugin	用户行为数据记录	不会上报，作为其他 plugin 的数据源，会把数据存到 Monitor.eventStack
BounceRatePlugin	页面跳出率	页面跳出率，依赖 Monitor.eventStack

注意: 如果有自定义的插件，例如 CustomPlugin, 需要将默认的插件全部 import 一遍

const webmonitor = new WebMonitor({
  appid: "appid",
  plugins: [
      new CustomPlugin(this),
      new RrwebPlugin(this),
      new HTTPPlugin(this),
      ...
  ]
});