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