@devbie/web-monitor-sdk (英语)

浏览器-侧面网络监控 SDK. 它自动收集页面视图和页面 性能数据, AJAX 调用(均为 XMLHttpRequest 财务报告和审定财务报表 fetch),资源 加载、 JavaScript 错误和自定义事件, 并将其报告给收藏家 终点 SDK只处理监控——没有心跳和证书 逻辑.

特征

• 页面使用情况 负载时间、第一输入元数据、屏幕大小、, 裁判员和业绩条目.
• AJAX 监测 - 透明文书 XMLHttpRequest 财务报告和审定财务报表 fetch、记录方法、URL、状态、响应大小、时间和可选性 追踪身份.
• 资源监测 – 资源负载缓慢而失败通过 PerformanceObserver 资源 error 事件.
• 错误监测 —— 说 window.onerror, (中文(简体) ), unhandledrejection,资源负荷 失败和 console.error,带有已解析的堆栈痕迹.
• 自定义事件 ——以节制批量报告商务活动.
• 商业错误代码 插入一个 errcodeReport 确定标记 hTTP 200 内部的工商级失败.
• 匿名身份 ——每个用户,每页,唯一访问者和设备标记 在浏览器中生成.

安装

npm install @devbie/web-monitor-sdk

快开始

在您的应用程序中尽早初始化 SDK —— 例如 您的根布局或应用程序条目 :

import init from "@devbie/web-monitor-sdk";

init({
  api: "https://collector.example.com/api/web-monitor/report",
  token: "<report token>",
});

这个 init 为手动报告调用返回帮助函数 :

const monitor = init({
  api: "https://collector.example.com/api/web-monitor/report",
  token: "<report token>",
});

monitor.addCustom({
  customName: "checkout",
  customContent: { orderId: "1001", amount: 99 },
});

与 Next.js 一起使用

少比框架装有现成的登记册包装:

npx @devbie/fewbie-cli add web-monitor-sdk

然后加上脚手架 <WebMonitor /> 组件到根布局和 配置 NEXT_PUBLIC_WEB_MONITOR_ENDPOINT 财务报告和审定财务报表 NEXT_PUBLIC_WEB_MONITOR_TOKEN。 。 。 . 在两种环境变量都存在之前,该组件都是不开放的.

输入选项

返回的 API

init() 返回带有下列成员的对象:

addError(error)

手动按下脚本错误以立即报告 :

monitor.addError({
  msg: "Something went wrong",
  line: 42,
  col: 10,
  resourceUrl: "https://example.com/app.js",
});

addCustom(event)

队列自定义事件 。 对象内容被序列化为 JSON; 队列事件为 冲出(并分批出) customsThrottleMs数字 :

monitor.addCustom({
  customName: "button-click",
  customContent: "pay-now",
  customFilter: { page: "checkout" }, // optional, must be an object
});

setConfig(config)

初始化后更新用户身份 。 何时 p 提供它 存储前加密 :

monitor.setConfig({ uid: "10086", p: "plain-text-secret" });

商业错误报告

HTTP 200的响应仍然可以代表企业的失败. 提供 errcodeReport 确定检查解析的响应数据并决定是否 报告出错 :

init({
  api: "https://collector.example.com/api/web-monitor/report",
  token: "<report token>",
  errcodeReport: (responseData) => {
    return {
      isReport: responseData.code !== 0,
      errMsg: responseData.message,
      code: responseData.code,
    };
  },
});

报告类型和运输

报告有以下一种类型:

有效载荷带有 Content-Type: text/plain 通过 fetch (监测) 请求从未重新提出) Unload 报表使用 navigator.sendBeacon 当可用时。 如果收藏家无法接触到, 报告暂停,以避免请求风暴.

全球接入

对于无法直接导入模块的集成, 默认 初始化器也在浏览器上被曝光为 window._frontendMonitor。 。 。 .

相关软件包

• @devbie/heartbeat-sdk ——服务器侧安装活性报告.
• @devbie/newbie - 纽比 后端框架运行时间 .
• @devbie/newbie-cli —— 说 Newbie框架命令行工具.
• @devbie/fewbie-cli —— 说 在 Next.js 工程中安装 Web-Monitor 包装组件.

许可证

麻省理工学院