@uxsense/recorder
v0.1.1
Published
UXSense session recorder — captures rrweb session replays and forwards them to the UXSense platform.
Readme
@uxsense/recorder
Session recorder for UXSense — captures user interactions with rrweb and forwards them to the UXSense platform for replay and analysis.
Install
npm install @uxsense/recorderQuick Start
Next.js
Drop the component into your root layout:
import { UXSenseRecorder } from "@uxsense/recorder/next";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<UXSenseRecorder workspaceId="your-workspace-id" />
</body>
</html>
);
}Vanilla JavaScript
import { initUXSense, stopUXSense } from "@uxsense/recorder";
initUXSense({ workspaceId: "your-workspace-id" });
// To stop recording:
stopUXSense();Script Tag
Add a one-line snippet to any page — no build step required:
<script>window.__UXSENSE_ID__="your-workspace-id";</script>
<script src="https://app.uxsense.ai/api/r.js" defer></script>Segment
Use as a Segment source middleware to run alongside your existing analytics:
import { createUXSenseMiddleware } from "@uxsense/recorder/segment";
analytics.addSourceMiddleware(
createUXSenseMiddleware({ workspaceId: "your-workspace-id" })
);Configuration
| Option | Type | Default | Description |
|---|---|---|---|
| workspaceId | string | — | Required. Your workspace ID from the UXSense dashboard. |
| apiUrl | string | https://app.uxsense.ai | Override the API endpoint. |
| flushInterval | number | 10000 | How often (ms) to send buffered events. |
How It Works
- Records DOM changes and user interactions via rrweb
- Buffers events in memory and flushes them in batches (up to 100 events per batch)
- Generates a unique session ID per recording
- Captures metadata (user agent, URL, timestamp) automatically
- Re-queues events on failed network requests to prevent data loss
- SSR-safe —
initUXSenseis a no-op whenwindowis undefined
License
MIT