Naturally Produced Modules

    xb-tracking-sdk
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    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/xb-tracking-sdk@1.0.0/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

    Install

    npm i xb-tracking-sdk

    DownloadsWeekly Downloads

    5

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    731 kB

    Total Files

    35

    Last publish

    Collaborators

    • ankouyang