Browser Recording
Record user-browser interactions on exception moment, so you can have full picture of situation. No more asking clients what they did to trigger the error.
Replay user actions and see through their eyes.
Create a file revdebug.json in your front-end application folder where the package.json is located.
Fill-in the revdebug.json file with the sample configuration listed below:
revdebug.json
{
"host": "revdebug.server.address",
"apm": true,
"screen": true,
"screenTime": 10,
"version": "1.0.0",
"solution": "React Project",
"application": "React Project Example Application",
"type": "module",
"mode": "onevent",
"sourceMap": true,
"path": "src",
"files": "pages/**/*.{js,ts}",
"index": "public/index.html",
"excludeInst": "import", // needed for React
"target": "web",
"entrySpan": "single",
"useFMP": true
}
And change the “host” value to where your RevDeBug Server is installed.
Additionally:
  • adjust the name of your application in the “solution” and “application” configuration settings
  • adjust “files” to point to JavaScript / TypeScript file paths of your frontend application
  • “index” configuration variable should point to the main page template where RevDeBug will inject appropriate reference to include “__revdebug.js” runtime library that’s required for RevDeBug monitoring to take place
Already present in the above example option “screen” controls whether RevDeBug should make user’s frontend actions recordings when errors happen. ScreenTime controls the amount of seconds the recording will cover counting back from the moment the error was registered by the frontend.
Browser screen recording:
("web" target only, ignored for "node")
screen
Enable or disable screen recording, can be true or false, default is false.
screenTime
Minimum number of seconds of screen recording for crash reports.
More information about the revdebug.json file configuration can be found here.
The next step is to add RevDeBug’s npm module to your application, to do so:
Configure RevDeBug repository:
npm config set @revdebug:registry https://nexus.revdebug.com/repository/npm/
Then install RevDeBug NPM module as a dependency:
npm install @revdebug/revdebug
To Instrument the project with RevDeBug you need to execute command:
npx revd
You should add this command to your build scripts before ‘npm build’ or similar command, but for the test you can just build the application locally.
After building your instrumented application, run locally or redeploy to the testing environment.

Setting up data masking

Additionally you might want to exclude/mask parts of your frontend from being recorded, to do so extend the above revdebug.json configuration as follows:
revdebug.json
[...]
"screen": true,
"screenTime": 10,
"screenOptions": {
"blockClass": "rdb_block"
},
[...]
Where “rdb_block” should be the name of a CSS class of HTML container or elements that should be excluded from user’s frontend recording.
More information about data masking can be found here
If you hide an element using the above, the recording will not show the hidden page element at all:
As you can see, the field with the password has been masked and the recording does not show it at all.
Copy link