# 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安装管理

```javascript
    npm install jad-mon
```

## Examples

#### 一个简单的使用例子

```javascript
import Tracer from "jad-mon";
const tracerInstance = new Tracer({
  serviceName: "wk-test-1",
  serverUrl: "xxxxx",
  agentVersion: "demo"
});
tracerInstance.setUserInfo({
  id: "9527",
  username: "王凯",
  email: "xxxx@xxxx.cn"
});
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](https://gitlab.jpushoa.com/front-end/jad-mon/blob/master/document/config.md)**
- **api:** **[api](https://gitlab.jpushoa.com/front-end/jad-mon/blob/master/document/api.md)**