@reproapp/react-sdk 0.0.1

package/README.md

@@ -0,0 +1,119 @@
+# Repro React SDK
+
+Capture user sessions with rrweb, tie network requests to user actions, and share a viewer link for fast debugging.
+
+## Install
+
+```bash
+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.
+
+```tsx
+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:
+
+```tsx
+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"
+      button={{ text: "Report issue" }}
+      masking={masking}
+    >
+      <YourApp />
+    </ReproProvider>
+  );
+}
+```
+
+Notes:
+- `apiBase` defaults to `http://localhost:4000`.
+- `button.text` overrides the floating button label (same label for Record and Stop).
+- `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 and 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 appear at the bottom right. "Stop & Report" is visible while recording.
+- After stopping, a share card appears with a viewer link you can copy.
+- In DevTools -> Network, app requests include `X-Bug-Session-Id` and `X-Bug-Action-Id` while recording.
+- Requests to your `apiBase` succeed (for example, `POST /v1/sessions` and `POST /v1/sessions/:id/finish`).
+
+## API
+
+### ReproProvider
+
+```ts
+type Props = {
+  appId: string;
+  tenantId: string;
+  apiBase?: string; // default: http://localhost:4000
+  children: React.ReactNode;
+  button?: { text?: string };
+  masking?: MaskingOptions;
+};
+```
+
+### attachAxios
+
+```ts
+attachAxios(axiosInstance: any): void
+```
+
+Attach request/response interceptors to an Axios instance so it can inject
+`X-Bug-Session-Id` and `X-Bug-Action-Id` during active recordings.
+
+### MaskingOptions
+
+Supported rrweb masking options:
+- `maskAllInputs`
+- `maskTextClass`
+- `maskTextSelector`
+- `maskInputOptions`
+- `maskInputFn`
+- `maskTextFn`

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { record } from "rrweb";
+/**
+ * Repro React SDK (MVP)
+ * - Floating "Record / Stop & Report" button
+ * - Bootstrap -> start session -> rrweb capture
+ * - Intercepts window.fetch to inject X-Bug-Session-Id / X-Bug-Action-Id
+ * - Generates Action IDs on clicks; posts minimal action events
+ * - Uses ORIGINAL fetch for SDK-internal calls to avoid recursion
+ */
+type RrwebRecordOptions = NonNullable<Parameters<typeof record>[0]>;
+export type MaskingOptions = Pick<RrwebRecordOptions, "maskAllInputs" | "maskTextClass" | "maskTextSelector" | "maskInputOptions" | "maskInputFn" | "maskTextFn">;
+type Props = {
+    appId: string;
+    children: React.ReactNode;
+    button?: {
+        text?: string;
+    };
+    masking?: MaskingOptions;
+};
+/** Manually attach Repro to any Axios instance (no recursion). */
+export declare function attachAxios(axiosInstance: any): void;
+export declare function ReproProvider({ appId, children, button, masking }: Props): import("react/jsx-runtime").JSX.Element;
+export default ReproProvider;