Description

收集web性能数据和web错误的sdk

Development

npm run watch  // Watch tsfile change and compile by rollup
npm run server // Start a nodejs test server

Then visit localhost:3000 for example test

Build

npm run build

Test

npm run test

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>

<script>
const monitor = FeMonitor.WebMonitor.init({
        error: {
            repeat: 10000
        },
        reportUrl: "/api/reportUrl",
        performance: true
    });
    //使用vue
    monitor.useVueErrorListener(Vue);
    monitor.on("event", (eventName, emitData) => {
        console.log(eventName, emitData);
    });
</script>

NPM

npm i xb-tracking-sdk -S

Usage

Minimal options

import { WebMonitor } from "xb-tracking-sdk";
const monitor = Monitor.init();
/* Listen single event */
monitor.on([event], (emitData) => {});
/* Or Listen all event */
monitor.on("event", (eventName, emitData) => {});

Full options

// Default full options
export const defaultTrackerOptions = {
  env: "dev",
  reportUrl: "",
  data: {},
  error: {
    watch: true, // If listen all error
    random: 1, // Sampling rate from 0 to 1, 1 means emit all error
    repeat: 5, // Don't emit sample error events when exceed 5 times
    delay: 1000 // Delay emit event after 1000 ms
  },
  performance: false, // If want to collect performance data
  http: {
    fetch: true, // If listen request use fetch interface
    ajax: true // If listen ajax request
  },
  behavior: {
    watch: false,
    console: [ConsoleType.error],
    click: true, // If set to true will listen all dom click event
    queueLimit: 20 // Limit behavior queue to 20
  },
  /**
   * rrweb use mutation observer api, for compatibility see:
   * https://caniuse.com/mutationobserver
   */
  rrweb: {
    watch: false,
    queueLimit: 50, // Limit rrweb queue to 20
    delay: 1000 // Emit event after 1000 ms
  },
  isSpa: true // If watch is true, globalData can get _spaUrl for report when route change
};
const monitor = Monitor.init(defaultTrackerOptions);

Vue project

Sdk support Vue.config.errorHandler to handle error for get detail component info. You just need to call useVueErrorListener before create Vue instance.

monitor.useVueErrorListener(Vue)

Support events

| EventName | Description | | -------------------- | ----------------------------------------------------------------------- | | jsError | js执行错误 winodw.onerror | | vuejsError | Vue执行错误 Vue.config.errorHandler | | unhandleRejection | 处理promise异常错误 window.onunhandledrejection | | resourceError | 资源加载错误 Resource request error | | reqError | http请求出错 Network request error | | | performanceInfoReady | 性能数据 Performance data is ready |