site-collector

site-collector is a convenient tool for collecting all kinds of data of websites.

Simple Example

import { createCollector } from "site-collector"

// pass config object
const collector = createCollector({

  // request properties
  url: ""
  headers: {},

  // global properties
  global: {  

    // static property
    signalType: "4G",

    // dynamic property
    // fn will be recalled when collect
    custom: () => store.custom
  }
})

// collect data
collector.collect({ myProperty: 'value' })

Multi Collector

import { createCollector } from "site-collector";

const collectorA = createCollector({
  url: "/a",
});
const collectorB = createCollector({
  url: "/b",
});

collectorA.collect({ name: "zxfan" });
collectorB.collect({ name: "king" });

Two request will be sent.

Advance

Override Config

collector.useConfig({
  url: ""
  headers: {},
  global: {},
})

Deprecate Report

set collector config

const collector = createCollector({

  // request properties
  url: ""
  headers: {},
  global: {}, // global properties
  deprecateRate: 1 // 0-1
})

deprecateRate:

• if set 1, collector will deprecate all reports.
• if set 0.5, collector will deprecate half reports.

Auto Collect

set these key to true. collector will collect these data automatically.

// all default false
collector.useAuto({
  scriptError: true,
  resourcesError: true,
  unhandledrejection: true,
  xhrAndFetchError: true,
  first: true,

  // web-vitals
  fcp: true,
  lcp: true,
  cls: true,
  network: true,
  fid: true
})

Options description:

• scriptError: script error will be caught by window.onerror
• resourcesError: Error that failed to load resource
• unhandlerejection: uncatched Promise error
• xhrAndFetchError: status of xmlHttpRequest and fetch is not 200
• first: Time about page loading calculated by MutationObserver
• fcp: First Contentful Paint
• lcp: Largest Contentful Paint
• cls: Cumlative Layout Shift
• fid: First Input Delay
• network: network data fetched by performance api(include ttfb)

Looking for more information about fcp lcp, Please read doc web-vitals

Transform properties

collector.useTransformer((task) => {
  return task;
});