Record user-browser interactions on exception moments, 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:
"solution": "React Project",
"application": "React Project Example Application",
"excludeInst": "import", // needed for React
And change the “host” value to where your RevDeBug Server is installed.
- adjust the name of your application in the “solution” and “application” configuration settings
- “index” configuration variable should point to the main page template where RevDeBug will inject an 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 number 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")
Enable or disable screen recording, can be
Minimum number of seconds of screen recording for crash reports.
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:
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 it locally or redeploy it to the testing environment.
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:
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.
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.
Last modified 2mo ago