clintplay-sdk

Browser SDK for Clintplay — session replay, error tracking, network and console capture, rage-click detection, and Core Web Vitals — wired into a single small script that runs in your users' browsers.

npm install clintplay-sdk

Quick start

Bundled (Vite, webpack, Next.js, etc.)

import Clintplay from 'clintplay-sdk';

Clintplay.init({
  projectId: 'gp_xxxxxxxxxxxxxxxxxxxxxxxx', // from your project's API key page
  apiUrl: 'https://your-clintplay-domain.com/v1',
});

Drop-in script tag

<script src="https://your-clintplay-domain.com/sdk.js"></script>
<script>
  Clintplay.init({
    projectId: 'gp_xxxxxxxxxxxxxxxxxxxxxxxx',
    apiUrl: 'https://your-clintplay-domain.com/v1',
  });
</script>

The IIFE bundle (dist/index.global.js) exposes a global Clintplay.

API

Clintplay.init(config);              // start recording
Clintplay.identify(userId, traits?); // attach a user to the current session
Clintplay.tag(tag, data?);           // emit a custom tag (e.g. "checkout-failed")
Clintplay.setMetadata(metadata);     // attach arbitrary metadata to the session
Clintplay.stop();                    // stop recording + flush

Configuration

All fields beyond projectId are optional.

| Field | Default | Purpose | |---|---|---| | projectId | — | Required. Must start with gp_. | | apiUrl | — | Your Clintplay API base URL (https://…/v1). | | maskAllInputs | false | Mask every <input> value before sending. | | maskInputSelector | — | CSS selector for inputs to mask. | | blockSelector | — | CSS selector for elements to fully exclude from the replay. | | ignoreSelector | — | CSS selector for elements to ignore in interaction events. | | recordNetwork | true | Capture fetch / XHR request + response metadata. | | recordConsole | true | Capture console.log/warn/error calls. | | trackPerformance | true | Capture Core Web Vitals (LCP, CLS, INP, FCP, TTFB). | | trackRageClicks | true | Detect repeated clicks on the same element. | | trackNavigation | true | Track pushState / popstate URL changes. | | networkSanitize | — | { denyHeaders, denyBodyUrls } — strip sensitive fields from captured network calls. | | flushIntervalMs | 5000 | How often to flush buffered events. Clamped to a minimum of 1000. | | flushMaxBytes | 512000 | Max payload size before forcing a flush. | | compressEvents | true | gzip the payload before sending. |

Privacy controls

• Mask sensitive inputs: maskAllInputs: true, or scope it with maskInputSelector. Password fields and credit card / SSN / phone / email input types are masked unconditionally.
• Block whole elements from the replay: blockSelector: '.do-not-record'. The element is excluded from DOM snapshots and mutation events.
• Strip request bodies for specific endpoints: networkSanitize.denyBodyUrls: ['/api/auth/']. Headers are stripped via denyHeaders.
• Self-ingest endpoints are auto-skipped — calls to your own apiUrl aren't captured (otherwise the recorder would record itself sending events).

License

MIT — see LICENSE.