Wrap anything that must never appear in a report:
import { Sensitive } from '@traceitx/react';
<Sensitive>
<CardNumberField />
</Sensitive><Sensitive> renders a display: contents wrapper, so it does not change
layout; className and style are passed through if you need a real box.
Anything you cannot wrap takes the data-traceitx-sensitive attribute instead;
both feed one registry. (markSensitive on the hook is a no-op on the web —
use one of these two.)
The masking happens in the producer, before capture — masked content never enters the screenshot buffer or the replay stream, let alone the upload. It is not a flag a viewer is trusted to honour.
What it covers
| Screenshot | The region is painted as a solid block. |
| Session replay | The element is blocked (rrweb rr-block): the recording carries a same-sized placeholder and the player shows a blank box. |
| Console & network | Not covered — those are text streams. Use Redaction. |
That last row is the one to remember: <Sensitive> is about pixels. A card
number that also appears in a fetch body needs a redaction rule as well.
Secure inputs
<input type="password"> is masked automatically — you do not need to wrap it.
Anything else that happens to hold a secret does need marking.
Choosing what to wrap
Wrap the smallest element that contains the secret. Wrapping a whole page makes the report useless without making it meaningfully safer, and a blanked screenshot is a common reason a report gets closed as unreproducible.
The default posture is already deny-by-default for text streams — see Redaction — so this component is for the visual layer, where the SDK cannot infer intent from shape alone.