​

React — Configuration

​

Provider props

​

Browser SDK options

​

Transport and batching

​

Features

​

sessionRecordingMasking

• blockClass / blockSelector — Elements matching the class or selector are fully hidden in the replay (replaced with a placeholder). Use for entire sections you don’t want visible (e.g. sidebar with PII, payment forms). Default class: signal-no-capture.
• maskTextClass / maskTextSelector — Text content of matching elements is replaced with asterisks (***) in the replay. Use for sensitive text (names, emails, IDs) that you still want to show layout for. Default class: signal-mask.
• maskTextFn — Optional (text, element?) => string. Called for each masked text node; return the string to show in the replay (e.g. '[REDACTED]' or partial mask). If you return the original text, it is not masked.
• ignoreClass — Inputs/textarea with this class do not have their values recorded; only focus and interaction are. Use when you want to hide what the user typed but keep the fact they used the field. Default class: signal-ignore-input.
• maskAllInputs — When true, all <input> and <textarea> values are masked in the replay (replaced with asterisks). When false (default), only inputs matching maskInputOptions or password type are masked.
• maskInputOptions — Per–input-type control when maskAllInputs is false. Keys: text, email, tel, textarea, number, search, url, password, etc. Set to true to mask that type. Password is always masked. Use this to mask only email/tel/text and leave number/search visible if needed.
• maskInputFn — Optional (text, element?) => string. Called for each masked input value; return the string to show in the replay (e.g. last 4 digits only).

<SignalProvider
  options={{
    apiKey: '...',
    projectId: '...',
    // endpoint is optional (defaults to https://api.trysignal.ai/)
    sessionRecordingMasking: {
      blockClass: 'signal-no-capture',
      blockSelector: '[data-private]',
      maskTextClass: 'signal-mask',
      maskAllInputs: false,
      maskInputOptions: {
        text: true,
        email: true,
        tel: true,
        textarea: true,
        password: true,
      },
    },
  }}
>
  <App />
</SignalProvider>

<div className="signal-no-capture">This block is fully hidden in replay.</div>
<span className="signal-mask">Sensitive text becomes ***</span>
<input type="email" className="signal-ignore-input" />  {/* value not recorded */}

​

networkCaptureOptions

• recordHeaders — When true, request and response headers are included in the captured payload. Turn on only if you need to debug headers; many headers (e.g. Authorization, Cookie) should be redacted via sensitiveHeaders.
• recordBody — When true, request and response bodies are captured (up to payloadSizeLimitBytes). Useful for API debugging but increases payload size and may contain PII; use with maskRequestFn or avoid for sensitive endpoints.
• sensitiveHeaders — Array of header names (case-insensitive) to redact in captured data. Their values are replaced with a placeholder (e.g. [REDACTED]). Always include authorization, cookie, x-api-key, and any custom auth headers if you enable recordHeaders.
• urlDenyList — Array of URL strings or RegExp. Requests whose URL matches are excluded from capture (no URL, headers, or body stored). Default excludes Signal ingestion: ['api.trysignal.ai']. Add your own entries to skip health checks, third-party analytics, or any URL that must not appear in replays.
• payloadSizeLimitBytes — Max size (in bytes) of request/response body to capture. Larger bodies are truncated. Default 1000000 (1 MB). Prevents huge bodies from bloating the replay.
• maskRequestFn — Optional (request) => request \| null. Receives the captured request object (URL, method, headers, body). Return a modified object to redact or transform fields, or return null to drop this request from capture (e.g. for sensitive endpoints).

options={{
  // ...
  networkCaptureOptions: {
    recordHeaders: true,
    recordBody: true,
    sensitiveHeaders: ['authorization', 'cookie', 'x-api-key', 'x-auth-token'],
    urlDenyList: ['/api/health', /^https:\/\/analytics\.example\.com/],
    payloadSizeLimitBytes: 500000,
    maskRequestFn: (req) => {
      if (req.url?.includes('/api/payment')) return null;
      return req;
    },
  },
}}

​

consoleCaptureOptions

​

Session and advanced

​

See also

• Initialization — Provider setup