# ProdBeat

> ProdBeat is a session recording, replay, and product-analytics platform: pixel-accurate session replays (DOM, network, console, errors, Web Vitals) plus heatmaps, funnels, and custom events. The SDK ships as a single UMD script from a CDN — there is no npm package — and it masks PII/credentials in the browser before any data is sent.

Key facts for agents:

- Install = one script tag: `<script src="https://pub-60b02f367ac941aab7bfc8cec136001a.r2.dev/session-recorder.umd.js" async></script>` then `window.SessionRecorder.init({ apiKey: "pk_live_…", enableSessionGate: true, recordNetwork: true, recordConsole: true })`.
- The API key is created with a project in the ProdBeat dashboard, shown once, and rotatable from Settings → Projects. Project + organization are derived from the key — never set a tenant/project id manually.
- Works in any framework (React, Next.js, Vue, Nuxt, Angular, Svelte) and any server-rendered stack (Rails, Django, Laravel, PHP, WordPress) — same script tag.
- Privacy masking (inputs, rendered PII, network bodies/headers, console, WebSocket) is always on and not configurable. Sensitive regions can additionally be excluded with `data-ps-block` / `data-ps-mask` / `.ps-ignore`.
- Product analytics API: `SessionRecorder.track(name, props)` and `SessionRecorder.identify(userId, traits)`.

## Docs

- [Welcome](https://www.prodbeat.com/docs#home): 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.
- [Quickstart](https://www.prodbeat.com/docs#quickstart): Create a project in the ProdBeat dashboard.
- [API keys](https://www.prodbeat.com/docs#api-keys): Your API key is the only credential the SDK needs.
- [Script tag (any site)](https://www.prodbeat.com/docs#install-script): The plain script tag is the canonical install, and for most sites it's also the best one.
- [React](https://www.prodbeat.com/docs#install-react): Inject the script once on mount from your root component.
- [Next.js](https://www.prodbeat.com/docs#install-nextjs): Use next/script in a client component and render it in your root layout.
- [Vue](https://www.prodbeat.com/docs#install-vue): Append the script from your app entry.
- [Nuxt](https://www.prodbeat.com/docs#install-nuxt): Create a client-only plugin — the .client suffix keeps it out of server-side rendering entirely.
- [Angular](https://www.prodbeat.com/docs#install-angular): Load the script in ngOnInit of your root component, guarded by isPlatformBrowser so Angular Universal SSR never touches it.
- [Svelte](https://www.prodbeat.com/docs#install-svelte): Load the script in onMount of your root layout — onMount only runs in the browser, so it's SSR-safe by construction.
- [Rails · Django · Laravel · PHP](https://www.prodbeat.com/docs#install-server): 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.
- [WordPress & CMS](https://www.prodbeat.com/docs#install-wordpress): Any platform that lets you add custom HTML or a footer script can run ProdBeat — WordPress, Webflow, Shopify, Wix, Squarespace, Framer.
- [Configuration](https://www.prodbeat.com/docs#configuration): Everything is passed to SessionRecorder.init({ … }).
- [track()](https://www.prodbeat.com/docs#track): Record an app-defined event at a meaningful moment — a signup completed, a checkout started, a feature used.
- [identify()](https://www.prodbeat.com/docs#identify): Tie the current anonymous visitor to a known user, right after login.
- [Session replay](https://www.prodbeat.com/docs#session-replay): Every session is a pixel-accurate DOM recording — not a video — so it's small, sharp at any zoom, and searchable.
- [Heatmaps](https://www.prodbeat.com/docs#heatmaps): 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.
- [Errors](https://www.prodbeat.com/docs#errors): 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.
- [Performance](https://www.prodbeat.com/docs#performance): 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.
- [Events & funnels](https://www.prodbeat.com/docs#events-funnels): 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.
- [Automatic PII masking](https://www.prodbeat.com/docs#privacy-masking): Masking runs inside the SDK, in the browser, before any data is transmitted — sensitive values never reach our servers in the first place.
- [Excluding elements](https://www.prodbeat.com/docs#privacy-optout): Pattern matching catches structured PII on its own, but it can't know that 'Jane Doe, 42 Baker Street' is a customer record.

## Full content

- [Complete docs as markdown](https://www.prodbeat.com/llms-full.txt): every section of the documentation in one markdown file.
- [Docs page (markdown mirror)](https://www.prodbeat.com/docs.md): same content, .md URL.

## Site

- [Pricing](https://www.prodbeat.com/pricing)
- [Changelog](https://www.prodbeat.com/changelog)
- [About](https://www.prodbeat.com/about)