# Browser Recording

Replay user actions and see through their eyes.

![](/files/VLXUcKhI3ZlwffDIqjh3)

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:

{% tabs %}
{% tab title="revdebug.json" %}

<pre class="language-json"><code class="lang-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", 
<strong>    "excludeInst": "import", // needed for React
</strong>    "target":      "web", 
    "entrySpan":   "single", 
    "useFMP":      true
}
</code></pre>

{% endtab %}
{% endtabs %}

And change the “host” value to where your RevDeBug Server is installed.

Additionally:&#x20;

* adjust the name of your application in the “solution” and “application” configuration settings&#x20;
* 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](https://revdebug.gitbook.io/revdebug/revdebug-features/pages/-MTlI_zqo5hcMBoUiROc#configure-revdebug.json-with-your-project).

The next step is to add RevDeBug’s npm module to your application, to do so:

Configure RevDeBug repository:

```bash
npm config set @revdebug:registry https://nexus.revdebug.com/repository/npm/
```

Then install the RevDeBug NPM module as a dependency:

```bash
npm install @revdebug/revdebug
```

To Instrument the project with RevDeBug you need to execute the command:

```bash
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:

{% tabs %}
{% tab title="revdebug.json" %}

```json
[...]
   "screen": true,
   "screenTime":  10,
   "screenOptions": {
      "blockClass": "rdb_block"
       },
[...]
```

{% endtab %}
{% endtabs %}

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](https://revdebug.gitbook.io/revdebug/supported-langauges/javascript/data-masking#masking-variables-values)

If you hide an element using the above, the recording will not show the hidden page element at all:

<div align="center"><img src="https://lh4.googleusercontent.com/Lmboae4DGZ-g7rdZrMKcgDSvS8h7NO9eYoz7Zt8aMsAau3OO2mhO0eAPieGt4BWRIjrr1lz5fBJi3kcp5tMozKEw-Zwnfd3wh3srO0YRkJ5V9783iINHGUiAeCDx_yQQvH_gTDsQDAQRgAPm76Nztqk" alt=""></div>

As you can see, the field with the password has been masked and the recording does not show it at all.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://revdebug.gitbook.io/revdebug/revdebug-features/browser-recording.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.