Retrospect-client-agent NPM

retrospect-client-agent

Retrospect Client Agent is a node.js package for recording browser events and adding identifying headers to outgoing requests to enable backend tracing.

Installation

This is a Node.js module available through the npm registry. Installation is done using the npm install command:

$ npm install retrospect-client-agent

Configuring Recording

Import the Recorder object from 'retrospect-client-agent' into your entry point file (ex. index.js) and call Recorder.init()

import Recorder from 'retrospect-client-agent'
Recorder.init();

Fetch will automatically be patched to add chapter/session/user id headers to outgoing requests. Axios will be patched in the same manner.

Session Ids expire after 30 minutes, or when the tab/window is closed

Edit the config.json file inside retrospect-client-agent package folder in node_modules.
Configuration Options
- endpoint: configures the event data to be sent to a backend that is provided by [add our group backend name here and link to docker compose repo]
- fullSnapshotEndpoint: configures a separate endpoint for snapshot event data provided by [add our group backend name here and link to docker compose repo]
- sampling: configuration settings for which browser events should be recorded.
- fullSnapshotEveryNthEvent: configures how frequently a full snapshot of the DOM is sent to the fullSnapshotEndpoint
Configuration Steps
- Edit the endpoint and fullSnapshotEndpoint properties to contain the name of the backend. By default, the Retrospect api is listening on port 80 for event data.
Example of config.js using a domain as an endpoint
```
{
  "endpoint": "http://myawesomeapp.com/events",
  "fullSnapshotEndpoint": "http://myawesomeapp.com/events/snapshots",
  "sampling": {
    "mousemove": false,
    "mouseInteraction": {
      "MouseUp": false,
      "MouseDown": false,
      "Click": true,
      "ContextMenu": false,
      "DblClick": true,
      "Focus": true,
      "Blur": true,
      "TouchStart": false,
      "TouchEnd": false
    },
  "input": "last"
  },
  "fullSnapshotEveryNthEvent": 10
}
```