Skip to content

Network Recording

Nveal allows you to capture XHR and fetch network requests made by the browser during a session. This empowers your engineering teams to debug complex user issues by correlating front-end behavior with backend API failures.

Why use Network Recording?

Session replay is fantastic for answering "What did the user click?" but falls short when trying to answer "Why did the page break after they clicked?"

By enabling network recording, you can look at the timeline of a session and see exactly when a 500 Internal Server Error occurred, what endpoint was called, and how long it took to respond. This instantly bridges the gap between frontend UX and backend health.

Network Demo

Interactive Timeline Navigation

The network panel isn't just a static list—it is deeply integrated with the session replay player:

  • Jump to Event: Clicking on any specific network request in the list will instantly jump the video timeline to the exact millisecond that request was made, saving you from having to scrub through the whole video.
  • Auto-Highlighting: As you watch the session replay, network requests will automatically highlight in real-time exactly as they occur in the video.

The Enterprise Privacy Pipeline

Network recording is a highly sensitive matter. To satisfy strict security and compliance audits (e.g., SOC2, HIPAA), Nveal employs a robust 4-layer privacy pipeline out of the box.

Hard-coded Security Guarantees

Before diving into the configuration, you should know that Nveal NEVER records request headers or request/response bodies.

This is a hard-coded internal safeguard to ensure that highly sensitive payloads (like Authorization tokens, API keys, passwords, or credit card details) can never be accidentally captured or transmitted to Nveal servers. We only capture the Method (e.g., GET), URL, and Status Code (e.g., 200).

Configuration (network)

The network recording engine is fully configurable via the network block in your nveal.init() call.

record

  • Status: Optional
  • Type: boolean
  • Default: false

Master toggle to enable or disable network recording.

ignoreUrls

  • Status: Optional
  • Type: (string | RegExp)[]
  • Default: []

A list of URL patterns that should be completely ignored. If a network request matches a pattern in this list, the event is completely dropped and never recorded.

Why use this?

  1. To avoid cluttering the timeline with noisy, high-frequency endpoints (e.g., /healthz or /metrics).
  2. To strictly prevent the recording of highly sensitive endpoints where even the existence of the network call at a given timestamp might be considered a privacy leak (e.g., /oauth/token or /mfa/verify).

(Note: The SDK automatically drops any internal network calls made to the Nveal telemetry apiBaseUrl to prevent infinite recording loops).

stripQueryParams

  • Status: Optional
  • Type: boolean
  • Default: true

By default, the SDK chops off everything after the ? in a URL. Query strings are the number one culprit for accidental PII leakage (e.g., [email protected] or ?token=abc). Enabling this flag instantly fixes 90% of privacy concerns.

smartMasking

  • Status: Optional
  • Type: boolean
  • Default: true

Even if you choose to set stripQueryParams: false to preserve some query parameters, smartMasking provides an automatic safety net.

When enabled, the SDK runs built-in regex over the URL to automatically:

  1. Replace any email addresses with [REDACTED_EMAIL].
  2. Mask the values of common sensitive query keys (token, auth, password, secret, key, ssn, session) with ***.

sanitizeUrl

  • Status: Optional
  • Type: (url: string) => string

A custom developer hook that runs as the final step before the URL is recorded.

Why use this?

Many modern enterprise applications use RESTful path variables instead of query parameters (e.g., /api/users/83749-abc-9283/billing-info). A query string stripper cannot fix this. You can use this hook to write a single regex rule that replaces any ID or UUID in a path string with [REDACTED_ID].

Example Configuration

nveal.init({
  apiKey: 'YOUR_API_KEY',
  network: {
    record: true,
    // Drop noisy health checks completely
    ignoreUrls: ['/healthz', /auth/],
    // Preserve query strings but let smartMasking redact tokens
    stripQueryParams: false, 
    smartMasking: true,
    // Custom logic to redact UUIDs in REST paths
    sanitizeUrl: (url) => url.replace(
      /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i, 
      '[REDACTED_UUID]'
    )
  }
});