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 we provide for common cases, for example:

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:

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. There are some nuances, so it's worthwhile reading the JSDoc 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 eng@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.