@arextest/web-record-sdk

AREX RECORD SDK

This is the official SDK for the Arex Frontend Record API.

Installation

npm install @arextest/web-record-sdk

Basic Usage

CDN

<script>
  (function (w, d, c) {
    var s = document.createElement('script');
    s.src = c;
    s.onload = function () {
      new w.AREX_WEB_RECORD_SDK({
        appId: '<appId>',
        tenantCode: '<tenantCode>',
      });
    };
    d.body.appendChild(s);
  })(window, document, 'https://unpkg.com/@arextest/web-record-sdk');
</script>

npm

import WebRecordSdk from '@arextest/web-record-sdk';

new WebRecordSdk({
    appId: '<appId>',
    tenantCode: '<tenantCode>'
});

Advanced Usage

import WebRecordSdk from '@arextest/web-record-sdk';

const skd = new WebRecordSdk({
  appId: '<appId>',
  tenantCode: '<tenantCode>',
  serverUrl: '<serverUrl>',
  timeout: 10000,
  manual: true, 
  tags: {
    userId: '<userId>',
    clientId: '<clientId>',
    mobileNo: '<mobileNo>'
  },
  maskAllInputs: true
});

// set extra tags, also can be set in skd.record method
skd.setTags({
  ext: {
      extKey: 'extValue'
  }
});

const { stop } = skd.record();

// stop record after 10s
setTimeout(() => {
  stop();
  console.log('Stop record!');
}, 20000);

Sdk Options

key	default	description
tenantCode	required	The code of tenant
appId	required	A unique id used to identify the application
interval	5000	Interval time for sending data to server. The minimum value is 5000
manual	false	Manual control record start and stop
tags	{}	A range of additional custom tags
serverUrl	built-in	The url of web record service
enableTraceHeader	false	Creating back-end api trace
checkoutEveryNth	-	take a full snapshot after every N events refer to the checkout chapter
checkoutEveryNms	-	take a full snapshot after every N ms refer to the checkout chapter
blockClass	'rr-block'	Use a string or RegExp to configure which elements should be blocked, refer to the privacy chapter
blockSelector	null	Use a string to configure which selector should be blocked, refer to the privacy chapter
ignoreClass	'rr-ignore'	Use a string or RegExp to configure which elements should be ignored, refer to the privacy chapter
ignoreSelector	null	Use a string to configure which selector should be ignored, refer to the privacy chapter
ignoreCSSAttributes	null	array of CSS attributes that should be ignored
maskTextClass	'rr-mask'	Use a string or RegExp to configure which elements should be masked, refer to the privacy chapter
maskTextSelector	null	Use a string to configure which selector should be masked, refer to the privacy chapter
maskAllInputs	false	mask all input content as *
maskInputOptions	{ password: true }	mask some kinds of input * refer to the list
maskInputFn	-	customize mask input content recording logic
maskTextFn	-	customize mask text content recording logic
slimDOMOptions	{}	remove unnecessary parts of the DOM refer to the list
dataURLOptions	{}	Canvas image format and quality ,This parameter will be passed to the OffscreenCanvas.convertToBlob(),Using this parameter effectively reduces the size of the recorded data
inlineStylesheet	true	whether to inline the stylesheet in the events
hooks	{}	hooks for events refer to the list
packFn	-	refer to the storage optimization recipe
sampling	-	refer to the storage optimization recipe
recordCanvas	false	Whether to record the canvas element. Available options: false, true
recordCrossOriginIframes	false	Whether to record cross origin iframes. rrweb has to be injected in each child iframe for this to work. Available options: false, true
recordAfter	'load'	If the document is not ready, then the recorder will start recording after the specified event is fired. Available options: DOMContentLoaded, load
inlineImages	false	whether to record the image content
collectFonts	false	whether to collect fonts in the website
userTriggeredOnInput	false	whether to add userTriggered on input events that indicates if this event was triggered directly by the user or not. What is userTriggered?
plugins	[]	load plugins to provide extended record functions. What is plugins?
errorHandler	-	A callback that is called if something inside of rrweb throws an error. The callback receives the error as argument.

Development

pnpm install
pnpm run dev
pnpm run build # build sdk
pnpm run build:demo # build demo project
pnpm run build:dem-cdn # build demo project for cdn usage
pnpm run preview # preview demo project