1. Project Overview

A self-developed front-end monitoring SDK, can be used to collect and report: code error, performance data, user behavior, loading resources, personalized indicators, etc. data

Highlights: support multiple error recovery methods: locate source code, play recording, record user behavior

2. Open Source License

Author has not specified open source protocol

3. Screenshots

Demonstration

Background page

Demonstration effect

4. Feature Overview

Function

• [√] ✈️ Error capture: code error, resource loading error, interface request error
• [√] ✈️ Performance data: FP, FCP, LCP, CLS, TTFB, FID
• [√] ✈️ User behavior: page click, route jump, interface call, resource loading
• [√] ✈️ Personalized indicators: Long Task, Memory page memory, first screen loading time
• [√] Manual report error
• [√] Support multiple configurations: custom hook and options
• [√] Supported Web frameworks: vue2, vue3, React

5. Tech Stack

Installation

$ npm i web-see

Vue

import webSee from 'web-see';

Vue.use(webSee, {
  dsn: 'http://localhost:8083/reportData', // Report address
  apikey: 'project1', // Project unique id
  userId: '89757', // User id
  silentRecordScreen: true // Enable recording
});

React

import webSee from 'web-see';

webSee.init({
  dsn: 'http://localhost:8083/reportData',
  apikey: 'project1',
  userId: '89757'
});

Configuration Item

Name

Type

Default

Description

dsn

string

""

(Required item) Report interface address, post method

apikey

string

""

(Required item) Each project corresponds to an apikey, unique identifier

userId

string

""

User id

disabled

boolean

false

Default is enabled state, true will disable the sdk

useImgUpload

boolean

false

True will use image dotting report method, parameters through data=encodeURIComponent(reportData) concatenated to url, default is false

throttleDelayTime

number

0

Default will collect click to label, this parameter can set button click throttle time

overTime

number

10

Set interface timeout duration, default 10s

maxBreadcrumbs

number

20

User behavior storage maximum capacity, exceeding 20, earliest record will be covered

recordScreentime

number

10

Single recording duration, silentRecordScreen set to true, this setting is only valid when recording

silentXhr

boolean

false

Default will monitor xhr, true will not monitor

silentFetch

boolean

false

Default will monitor fetch, true will not monitor

silentClick

boolean

false

Default will listen click event, when user click label is not body will be put into breadcrumb, true will not listen

silentHistory

boolean

false

Will monitor popstate, pushState, replaceState by default, and will not monitor when true.

silentError

boolean

false

Will monitor error by default, and will not monitor when true.

silentUnhandledrejection

boolean

false

Will monitor unhandledrejection by default, and will not monitor when true.

silentHashchange

boolean

false

Will monitor hashchange by default, and will not monitor when true.

silentPerformance

boolean

false

Will report performance metrics by default, and will not report when true.

silentRecordScreen

boolean

false

Note: Will not enable screen recording by default, and will enable when true.

filterXhrUrlRegExp

regExp

null

Will be empty by default, and all interface requests will be monitored, and will filter when not empty and filterXhrUrlRegExp.test(xhr.url) is true.

beforePushBreadcrumb

function

null

(Custom hook) The hook added to the behavior list before, has a value when true, and all user behaviors will go through this hook for processing, and will not add to the list if returns false.

beforeDataReport

function

null

(Custom hook) The hook before data reporting, has a value when true, and all reporting data will go through this hook for processing, and will not report if returns false.

Custom hook example

beforePushBreadcrumb

// Add user behavior
push(data) {
  if (typeof this.beforePushBreadcrumb === 'function') {
    /**
      * Execute user-defined hook, and will not add to the list if returns false,
      * @param { object } this The current user behavior instance
      * @param { object } data The data to be added to the user behavior list
      */
    let result = this.beforePushBreadcrumb(this, data);
    if (!result) return;
    this.immediatePush(result);
    return;
  }
  this.immediatePush(data);
}

beforeDataReport

// Hook before data reporting
async beforePost(data) {
  let transportData = this.getTransportData(data);
  /**
  * Execute user-defined hook, and will not report if returns false,
  * @param { object } transportData The data to be reported
  */
  if (typeof this.beforeDataReport === 'function') {
    transportData = this.beforeDataReport(transportData);
    if (!transportData) return false;
  }
  return transportData;
}

Manual error reporting example

import webSee from 'web-see';

webSee.log({
  type: 'custom',
  message: 'Manual error information',
  error: new Error('Error')
});