0.7.1-beta.0 • Published 3 years ago

hops-agent-wa v0.7.1-beta.0

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

build

npm run build

example

参考 example 目录

功能

  • 上报 pv uv
  • 捕获 error
  • 上报性能 performance
  • 上报用户轨迹
  • 支持单页面
  • hack ajax fetch
  • 上报加载的资源
  • hack console
  • hack onpopstate
  • 暴露全局变量__bb
  • 埋点 sum avg msg
  • 无埋点方案

方法一

<script src="../dist/hops-agent-wa.min.js"></script>
<script>
  new ClientMonitor({
    token: 'xxx',
    reportUrl: 'http://127.0.0.1:7002/api/v1/report/web',
  });
</script>

方法二

npm i hops-agent-wa -S
import ClientMonitor from 'hops-agent-wa'
或 var ClientMonitor = require('hops-agent-wa')

new ClientMonitor({
  token: 'xxxx',
  reportUrl: 'http://127.0.0.1:7002/api/v1/report/web'
})

配置

{
  // 上报地址
  reportUrl: 'http://localhost:10000',
  // 提交参数
  token: '',
  // app版本
  appVersion: '1.0.0',
  // 环境
  environment: 'production',
  // 脚本延迟上报时间
  outtime: 300,
  // 开启单页面？
  enableSPA: true,
  // 是否自动上报pv
  autoSendPv: true,
  // 是否上报页面性能数据
  isPage: true,
  // 是否上报ajax性能数据
  isAjax: true,
  // 是否上报页面资源数据
  isResource: true,
  // 是否上报错误信息
  isError: true,
  // 是否录屏
  isRecord: true,
  // 是否上报行为
  isBehavior: true,
  ignore: {
    ignoreErrors: [],
    ignoreUrls: [],
    ignoreApis: ['/api/v1/report/web', 'livereload.js?snipver=1', '/sockjs-node/info'],
  },
  behavior: {
    console: ['log', 'error'], // 取值可以是"debug", "info", "warn", "log", "error"
    click: true,
  },
  // 最长上报数据长度
  maxLength: 1000,
}

HZERO 增强

集成探针代码

public/index.html

<head>
  ...
  <!-- 引入探针代码 start -->
  <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
  <script src='http://midnightapprentice.gitee.io/figurebed/img/bombay.js'></script>
  <!-- 引入探针代码 end -->
</head>

src/app.js

// 全局配置
export default {
  dvaAppInit: () => {
    ...
    // 注册监听代码
    window.ClientMonitor.register({
      serviceId: '231b3758ee5a455c971181eb2f83bfc6',
      service: 'hops-test',
      enableSPA: true,
      autoTracePerf: true,
      isAjax: true,
      isError: true,
      useFmp: true,
      isResource: true,
      collector: `${process.env.API_HOST}/opapm/v1/0/skywalking/front/trace`,
      reportUrl: `${process.env.API_HOST}/opwa/v1/up-log`,
    });
};

trace 信息处理（ 添加自定义标签）

src/app.js

// 全局配置
export default {
  dvaAppInit: () => {
    ...
    window.ClientMonitor.addTraceSegmentHandler((segment) => {
        const handledSegment = { ...segment };

        handledSegment.spans = handledSegment.spans.map((span) => {
          const handledSpan = { ...span, tags: [...span.tags] };
          handledSpan.tags.push({
            key: 'menuName',
            value: getTabFromKey(getActiveTabKey())?.title,
          });
          handledSpan.tags.push({ key: 'tenantNum', value: getCurrentTenant()?.tenantNum });
          handledSpan.tags.push({ key: 'userName', value: getCurrentUser()?.realName });
          handledSpan.tags.push({ key: 'roleName', value: getCurrentUser()?.currentRoleName });

          return handledSpan;
        });

        return handledSegment;
      });
  },
};
js-base64tslibtypescriptwhatwg-fetch
0.7.1-beta.0

3 years ago

0.7.1

3 years ago