Browser Recording

Record user-browser interactions on exception moments, so you can have a 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 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 the 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")
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 the RevDeBug NPM module as a dependency:

npm install @revdebug/revdebug

To Instrument the project with RevDeBug you need to execute the 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 it locally or redeploy it 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 the 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.