BetterMonitor SDK 使用文档

better-monitor 是一款专注于前端的日志监控 SDK，代码已完全开源在 GitHub 。如有帮助，欢迎 Star 支持 ⭐

💡

提示

SDK 需搭配后端服务使用。你可以自行实现后端，也可以使用我们的在线服务（适合访问量不大的站点，每月不到一杯奶茶钱）。

使用微信或企业微信扫码加入支持群

快速开始

方式一：CDN 引入（推荐）

<script
  crossorigin="anonymous"
  src="https://cdn.verysites.com/verybugs/better-monitor/better-monitor.min.js"
></script>

if ("BetterMonitor" in window) {
  window.BetterMonitor.init({
    projectId: 999, // 替换为你的项目ID
  });
}

✨

一行代码快速集成

如果你只需要上报 JavaScript 错误和访问统计，可以直接使用：

<script
  crossorigin="anonymous"
  data-project-id="你的项目ID"
  src="https://cdn.verysites.com/verybugs/better-monitor/better-monitor.min.js"
></script>

方式二：NPM 安装

npm install -S better-monitor

import BetterMonitor from "better-monitor";

BetterMonitor.init({
  projectId: 999, // 替换为你的项目ID
});

API 参考

init(options)

初始化 SDK，必须在其他 API 之前调用

interface ParamsInit {
  // 项目ID（必填）
  projectId: string | number;
  // 是否开启 debug 模式，默认 false
  debug?: boolean;
  // 是否上报接口日志，默认 false
  api?: boolean;
  // 是否上报页面访问，默认 true
  view?: boolean;
  // 是否上报错误日志，默认 true
  error?: boolean;
  // 是否上报行为日志，默认 true
  action?: boolean;
  // 是否上报埋点数据，默认 true
  statistics?: boolean;
  // 黑名单，匹配的日志不上报
  blackList?: Array<string | RegExp>;
  // 自定义获取用户ID的函数
  getUserId?: (defaultStrategy: () => string) => string;
}

addBug(params)

主动上报错误日志。通常 SDK 会自动捕获，你也可以手动调用。

interface IParamsAddBug {
  pageUrl: string;
  message: string;
  stack: string;
  source: string;
  type: string;
}

printLog / printWarn / printError

打印日志，用法与 console.log / console.warn / console.error 一致。同时还有 printLogDirectly 等直接打印版本。

logTime(label) / logTimeEnd(label)

性能测量，用法与 console.time / console.timeEnd 类似。

进阶特性

批量上报

SDK 采用批量上报机制，减少网络请求，提升性能：

API 日志：队列达到 5 条自动上报，或页面卸载时上报
行为日志：队列达到 10 条自动上报，或内容超过 10KB 立即上报，否则延迟 300ms 上报

SPA 路由支持

SDK 会自动监听单页应用的路由变化（pushState 和 hashChange），自动记录页面访问，无需手动调用。

SDK 使用文档