jad-mon(极光广告前端监控 sdk)

这是一个应用于 web 端中的监控服务

• 关于 jad-mon:

  1. 这是一个基于 elastic-apm-js-core 底层库封装编写的用于线上生产环境监控,适用于 web 无感嵌入监控，
  2. 上报功能基于 elastic-apm-js-core 底层 transaction 上报模式 - 扩展 transaction 部分功能，提供 network request 监控, element-action 监控, urlChange(spa->PageChange)监控

• 功能:

  • 新增 transaction 相关服务,以下服务都会产生一个上报 transaction,但是不提供时间轴周期

    1. network_task: 全局监听 network request
    2. elementAction_task: 分为全量 element 动作捕获和标记 element 动作捕获，默认标记 element 动作捕获, 全量捕获: 全局 element -> trigger Event -> catch Event 标记捕获: element 标签 attribute 添加标记数据 -> jad-mon-flag='{这里是标记的 key}'-> flag element -> trigger Event -> catch Event

    3.pageChange_task: 监听 urlChange 相关事件,这里 spa 应用必须使用 hash 模式,不支持 h5-Model

    4.customEvent_task : 通过 api->createCustomLog 创建的自定义 transaction

  • 扩展 transaction 相关服务

    1. Pageload: transaction 自带服务
    2. PageRun: 整合的 transaction 服务,包含 network_task,elementAction_task,完整的用户操作时间轴周期,以 pageChange_task 为一次循环周期
    3. Errors :transaction 自带服务

• 兼容与支持: 兼容目前所有主流框架运行版本, vue angular react等框架。IE 678 暂未测试

install

请使用npm安装管理

    npm install jad-mon

Examples

一个简单的使用例子

import Tracer from "jad-mon";
const tracerInstance = new Tracer({
  serviceName: "wk-test-1",
  serverUrl: "xxxxx",
  agentVersion: "demo"
});
tracerInstance.setUserInfo({
  id: "9527",
  username: "王凯",
  email: "[email protected]"
});
setTimeout(function() {
  var log = tracerInstance.createCustomLog("wk-test");
  log.addTags({ title: "oy" });
  log.addTags({ value: "我测试一下" });
  log.addTags({ xPath: "自定义事件" });
  log.end();
  tracerInstance.captureError(
    "测试一下，发出一个自定义错误信息, 这个api对接框架库等提供的onError中使用"
  );
  //暂停相关监听
  tracerInstance.stopElementActionCatch();
  tracerInstance.stopPageChangeEventCatch();
  tracerInstance.stopRequestCatch();
  setTimeout(function() {
    //恢复相关监听
    tracerInstance.resumeElementActionCatch();
    tracerInstance.resumePageChangeEventCatch();
    tracerInstance.resumeRequestCatch();
  }, 30000);
}, 20000);

更多 config 配置详情，以及相关 api 等，请参考 Documentation。

Documentation

相关文档说明

• config: config
• api: api