Repro React SDK

Capture user sessions with rrweb, tie network requests to user actions, and share a viewer link for fast debugging.

Install

npm i repro-react rrweb
# or
yarn add repro-react rrweb
# or
pnpm add repro-react rrweb

Peer requirements:

• react >= 17
• react-dom >= 17
• rrweb >= 1 < 2

Configure

1. Get your appId and tenantId from Repro.
2. Wrap your app with the provider.

import ReproProvider from "repro-react";

export default function App() {
  return (
    <ReproProvider appId="app_123" tenantId="tenant_abc">
      <YourApp />
    </ReproProvider>
  );
}

Optional configuration and full interface coverage:

import ReproProvider, { attachAxios, type MaskingOptions } from "repro-react";
import axios from "axios";

const masking: MaskingOptions = {
  maskAllInputs: true,
  maskTextSelector: ".pii",
  maskInputOptions: { password: true },
};

const api = axios.create({ baseURL: "https://api.example.com" });
attachAxios(api);

export default function App() {
  return (
    <ReproProvider
      appId="app_123"
      tenantId="tenant_abc"
      apiBase="https://repro.example.com"
      logCollectorUrl="https://collector.example.com"
      ingest={{
        mode: "staging",
        actorType: "browser",
        actorLabels: { env: "prod", platform: "web" },
      }}
      button={{ text: "Report issue" }}
      masking={masking}
    >
      <YourApp />
    </ReproProvider>
  );
}

Notes:

• apiBase defaults to https://repro-api-d7288.ondigitalocean.app/api.
• logCollectorUrl defaults to https://log-collector-5rj86.ondigitalocean.app.
• ingest.mode defaults to live.
• In live mode, rrweb, frontend action events, and a final session-end marker are sent through ingest (/v1/ingest/events). The API reconstructs only after that marker is visible and the ClickHouse session stream is stable.
• Set ingest.mode = "staging" to send rrweb chunks and frontend action events into ClickHouse via POST /v1/ingest/events without automatic reconstruction.
• Legacy mode names api and log-collector are still accepted as aliases for live and staging.
• ingest.logCollectorUrl, ingest.logCollectorUri, and legacy ingest.baseUrl can override the log-collector URL per provider instance.
• REPRO_LOG_COLLECTOR_URL, REPRO_LOG_COLLECTOR_URI, and legacy REPRO_INGEST_BASE are also accepted when exposed to the browser through globalThis.__REPRO_SDK_ENV__ or a compatible runtime env shim.
• button.text overrides the floating button label (same label for Record and Stop).
• Recording controls are collapsed by default behind a small "Repro" button at the bottom right. Click it to show controls, then click "Hide" to collapse them again.
• Saved user tokens are validated before recording controls are shown. Expired tokens are cleared and require the user to sign in again.
• attachAxios works with any Axios instance; window.axios is auto-attached if present.
• This SDK runs in the browser; for Next.js use a client component.

Run

1. Start your app (for example, npm run dev).
2. Open the page, click the bottom-right "Repro" button, then click "Authenticate to Record".
3. Sign in with your Repro user credentials.
4. Click "Record", reproduce the issue, then click "Stop & Report".

Verify it works

• The floating controls open from the bottom-right "Repro" button. "Stop & Report" is visible while recording.
• After stopping, a share card appears with a https://getrepro.io/viewer?sessionId=... link you can copy.
• In DevTools -> Network, app requests include Repro context through same-origin headers or safe cross-origin query params by default.
• If request mutation must be disabled, set ingest.requestContextPropagation to "off".
• Requests to your apiBase succeed (for example, POST /v1/sessions and POST /v1/sessions/:id/finish).

API

ReproProvider

type Props = {
  appId: string;
  tenantId: string;
  apiBase?: string; // default: https://repro-api-d7288.ondigitalocean.app/api
  logCollectorUrl?: string; // default: https://log-collector-5rj86.ondigitalocean.app
  logCollectorUri?: string; // alias for logCollectorUrl
  ingest?: {
    mode?: "live" | "staging" | "api" | "log-collector"; // default: "live"
    logCollectorUrl?: string;
    logCollectorUri?: string;
    baseUrl?: string; // legacy alias for logCollectorUrl
    path?: string; // default: /v1/ingest/events
    appSecret?: string;
    appName?: string;
    actorId?: string;
    actorType?: string;
    actorLabels?: Record<string, string>;
    schemaVersion?: number; // default: 1
    requestContextPropagation?: "off" | "headers" | "query" | "auto"; // default: "auto"
    rrwebCaptureMode?: "off" | "final-snapshot" | "continuous"; // default: "continuous"
    rrwebFlushDuringRecording?: boolean; // default: false
  };
  children: React.ReactNode;
  button?: { text?: string };
  masking?: MaskingOptions;
};

attachAxios

attachAxios(axiosInstance: any): void

Attach request/response interceptors to an Axios instance so it can inject Repro context during active recordings when requestContextPropagation is set to headers, query, or auto. The default is auto, which uses same-origin headers and safe cross-origin query params.

MaskingOptions

Supported rrweb masking options:

• maskAllInputs
• maskTextClass
• maskTextSelector
• maskInputOptions
• maskInputFn
• maskTextFn