ProdBeat Docs

ProdBeat records what your users actually experience — pixel-accurate session replays with the network requests, console output, errors, and Web Vitals behind them — and turns that into heatmaps, funnels, and product analytics.

There is exactly one thing to install: a single script served from our CDN. No npm package, no build-step integration, no framework adapters to keep in sync. The same bundle works in React, Next.js, Vue, Nuxt, Angular, Svelte, Rails, Django, WordPress — anything that renders HTML in a browser.

Sensitive data is masked in the browser before anything is sent: passwords, tokens, credit cards, emails, and API secrets never leave the page. Masking is always on — there is no privacy configuration to get wrong.

1. Create a project in the ProdBeat dashboard. Your SDK API key (pk_live_…) is generated with it and shown once — copy it somewhere safe.

2. Paste the snippet below before the closing </body> tag of your site. Replace pk_live_xxx with your key. That's the whole install.

3. Deploy, open your site, click around, then check Sessions in the dashboard — your first replay appears within a minute.

Your API key is the only credential the SDK needs. Your project and organization are derived from it on our servers — you never set a project id or tenant id by hand.

Keys are created with the project and shown once, at creation or rotation. After that the dashboard only shows a masked version (pk_live_••••), so store the raw key in your secrets manager or deploy config when you first see it.

Lost a key, or worried it leaked? Rotate it from Settings → Projects → your project. Rotation invalidates the old key immediately; update the snippet with the new key and redeploy.

The plain script tag is the canonical install, and for most sites it's also the best one. It loads async (never blocks your page), initializes after the load event, and works regardless of what framework — if any — rendered the page.

Inject the script once on mount from your root component. The id guard makes the hook safe under StrictMode double-mounting and hot reloads.

Use next/script in a client component and render it in your root layout. strategy="afterInteractive" keeps it off the critical path; the component is SSR-safe because the script only ever runs in the browser.

Append the script from your app entry. The typeof window guard makes the same file safe if you later adopt SSR.

Create a client-only plugin — the .client suffix keeps it out of server-side rendering entirely.

Load the script in ngOnInit of your root component, guarded by isPlatformBrowser so Angular Universal SSR never touches it.

Load the script in onMount of your root layout — onMount only runs in the browser, so it's SSR-safe by construction.

If your backend renders HTML, you don't need a JavaScript build at all — the script tag goes in your base layout template and every page inherits it. The SDK runs entirely in the visitor's browser; your server language is irrelevant to it.

Rails: app/views/layouts/application.html.erb. Django: your base.html. Laravel: resources/views/layouts/app.blade.php. Plain PHP: your shared footer include. In every case it's the same snippet, before </body>:

Any platform that lets you add custom HTML or a footer script can run ProdBeat — WordPress, Webflow, Shopify, Wix, Squarespace, Framer.

WordPress: add the snippet with your theme's footer.php, a code-snippets plugin, or your theme's 'custom scripts' panel. Webflow/Shopify/etc.: paste it into the site-wide footer code setting. It's the same script-tag snippet from the Quickstart — nothing platform-specific.

Everything is passed to SessionRecorder.init({ … }). Only apiKey is required. Errors, performance, forms, engagement, and gestures are captured by default; network and console capture are the two you opt into explicitly.

Record an app-defined event at a meaningful moment — a signup completed, a checkout started, a feature used. Events power the Events explorer and funnels, and every event links back to the session replay where it happened.

Name events object_action style (test_created, plan_upgraded). Props take up to 20 keys; values are coerced to string/number/boolean and truncated at 200 characters.

Tie the current anonymous visitor to a known user, right after login. Everything from that moment on — events, sessions, funnels — is attributed to your user id instead of an anonymous visitor.

Use a stable, opaque internal id rather than an email where you can: you control what the identifier reveals.

Every session is a pixel-accurate DOM recording — not a video — so it's small, sharp at any zoom, and searchable. Scrub the timeline and watch exactly what the user saw, alongside everything the page was doing underneath.

The replay view shows the activity timeline (clicks, navigation, rage/dead clicks, errors) next to the network and console panes, all synchronized to the playhead. When a user reports 'it broke', you watch it break — with the failing request and the stack trace on the same screen.

Click heatmaps are rendered over a real snapshot of your page, split by device — mobile and desktop get their own maps, because they're different UIs.

ProdBeat separates clicks by what happened after them: a dead click produced no response within ~500ms ('is this broken?'), a rage click is three or more rapid clicks in the same spot (definitely frustrated). Both rank above raw click volume, and both link to the replays where they happened.

Compare mode puts two versions of a page side by side — before and after a release — and tells you what changed: which elements gained or lost clicks, where new frustration appeared, and whether the difference is statistically meaningful or just noise.

Uncaught JS errors, unhandled promise rejections, and failed resource loads (broken images, scripts) are captured automatically and grouped by fingerprint, so a thousand occurrences of one bug is one row, not a thousand.

Each error group shows its trend, affected pages and browsers, and — the part that actually helps — links to session replays where it fired. You don't reproduce the bug; you watch it happen.

Web Vitals — LCP, INP, CLS, FCP, TTFB — plus navigation timing and long tasks, captured from real users (not lab runs), with percentile summaries and trends per page.

Because vitals live in the same system as replays, a slow-LCP page isn't just a number: open the sessions behind the p90 and watch what those users actually experienced while it loaded.

Everything you track() lands in the Events explorer: counts, unique users, trend sparklines, and a property breakdown — slice sign_up_completed by plan, or test_created by subject, without writing a query.

Funnels chain events into an ordered sequence and show where users leak. Order matters (step 2 counts only after step 1), the window is yours (1h to 30d), and you can count by user or by session.

The step that drops 75% of your users is a fact; why they drop is in the replays — every funnel step links to the sessions that made it and the sessions that gave up there.

Masking runs inside the SDK, in the browser, before any data is transmitted — sensitive values never reach our servers in the first place. It's always on: there is no flag to disable it, so there's no configuration mistake that leaks data.

What gets masked, automatically: every input value (passwords never leave the field); PII rendered into the page by your APIs — credit cards, emails, phone numbers, national IDs — even in plain text; network request and response bodies (sensitive keys like password/token/apiKey, recognizable secrets like JWTs and API keys, and unknown high-entropy strings all become [REDACTED:…]); auth headers like Authorization and Cookie, which are dropped outright; secrets in URL query strings; console logs; and WebSocket messages. Canvas is never recorded at all.

Masking is surgical, not destructive: in a JSON body, {"password":"hunter2","plan":"pro"} is captured as {"password":"[REDACTED]","plan":"pro"} — you lose the secret, you keep the debugging context. In page text, only the matched characters become *, so replays stay readable.

Pattern matching catches structured PII on its own, but it can't know that 'Jane Doe, 42 Baker Street' is a customer record. For those, add one attribute to a wrapper element — it cascades to everything inside, and needs nothing in init():