> Meticulous records real user sessions from a web app and replays them against each commit to catch visual regressions.
>
> Full AI-readable docs index (complete project setup journey + every page as markdown): https://app.meticulous.ai/llms.txt

# Redacting/filtering data before it leaves the browser

By default Meticulous will redact any data entered into a password field from both the user input recorded (keystrokes etc.) and the value
from the network requests and responses recorded. You can add additional redaction rules by passing in middleware when initializing the
Meticulous recorder. These can be used via a [library of helper functions](https://github.com/alwaysmeticulous/meticulous-sdk/tree/main/packages/redaction)
we provide for common cases, for example:

```typescript
import { tryLoadAndStartRecorder } from '@alwaysmeticulous/recorder-loader'
import { dropRequestHeader, transformJsonResponse, redactRecursively, asterixOut } from "@alwaysmeticulous/redaction";

...

const middleware = [
  dropRequestHeader("Authorization"),
  transformJsonResponse({
    urlRegExp: /https:\/\/api\.example\.com\/sensitive.*/,
    transform: (data) => redactRecursively(data, {
      redactString: str => asterixOut(str),
    }),
  }),
];

await tryLoadAndStartRecorder({
  recordingToken: '<your recording token>',
  middleware
});
```

Or directly by writing custom transformation functions:

```typescript
import { tryLoadAndStartRecorder } from '@alwaysmeticulous/recorder-loader'

...

await tryLoadAndStartRecorder({
  recordingToken: '<your recording token>',
  middleware: [
    {
      transformNetworkResponse: (response, metadata) => {
        if (!metadata.request.url.endsWith("get-credit-card-details")) {
          return response;
        }
        return {
          ...response,
          content: {
            ...response.content,
            text: JSON.stringify({ creditCardNumber: "REDACTED" }),
          }
        };
      }
    }
  ]
})
```

The full API and documentation for the middleware is available [here](https://github.com/alwaysmeticulous/meticulous-sdk/blob/main/packages/sdk-bundles-api/src/record/middleware.ts).
There are some nuances, so it's worthwhile reading the [JSDoc](https://github.com/alwaysmeticulous/meticulous-sdk/blob/main/packages/sdk-bundles-api/src/record/middleware.ts) before implementing custom middleware.

In addition to redacting the network requests, responses and application state, you will also need to add the `meticulous-redact-recording`
class to any elements that contain data you do not want to record. This will:

 1. Stop Meticulous recording the data inside the element in DOM snapshots. These are used for the video replays of the recorded sessions.
 2. Stop Meticulous recording text inside the element to identify the elements clicked on when the user clicks on an element.
 3. Stop Meticulous from recording keyboard events sent to any widget inside the element.

You can use the `meticulous-mask-recording-preview` class to stop (1) without stopping (2) and (3).

Please reach out to [support@meticulous.ai](mailto:support@meticulous.ai) before implementing custom redaction. We can help
make sure it is implemented in a way that still allows comprehensive test coverage of all edge cases for your codebase.