Masking inputs

Input values are masked by default on every platform. This page covers how the default works and how to change it.

Default behavior

Password fields (<input type="password">) are always masked on web, regardless of maskInputs. rrweb enforces this at the recorder level — there is no way to unmask a password field.

What "masked" looks like

Characters are replaced with asterisks in the captured event:

Original: jane@example.com
Captured: ****************

The field layout, length, and type are preserved. In the replay you see the input widget, but not the value.

Unmasking everything (not recommended)

If your app has no sensitive inputs at all, you can opt out:

Web

<GalachaProvider projectKey="..." maskInputs={false} />

React Native

Galacha.init({ projectKey: "...", maskTextInputs: false });

Don't do this on a production app that has any email, phone, address, or card fields. Once captured, values are persisted in your project storage.

Unmasking a single field (web)

The web SDK doesn't currently support per-element allow-lists. If you need a searchable input captured (e.g., a global search bar), one of:

1. Keep masking on and live without captured values.
2. Use a <PrivateBlock> wrapper to mask sensitive parts of the page and rely on the default-off mode. (Not yet supported.)
3. Email kelvin@galacha.me if you need this — it's on the roadmap.

Blocking a single subtree (web)

Use <PrivateBlock> to wrap sensitive subtrees. Everything inside is masked:

<PrivateBlock>
  <CreditCardForm />
</PrivateBlock>

For a stronger guarantee (the subtree doesn't even get serialized into the DOM snapshot), use block:

<PrivateBlock block>
  <SSNInput />
</PrivateBlock>

See PrivateBlock for the full API.

React Native equivalent

Wrap with <GalachaPrivate>:

import { GalachaPrivate } from "@galacha/react-native";
 
<GalachaPrivate>
  <CreditCardForm />
</GalachaPrivate>

The view is rendered as a solid block in the captured frame.

Related

• Privacy overview
• PrivateBlock
• Full privacy mode