Session Replay for Single-Page Applications (SPA) — What Breaks and How to Fix It

Single-page applications load once and then update the page with JavaScript. Users experience dozens of "pages," but traditional analytics may record one pageview—or count things inconsistently. Modals, drawers, tabs, and wizards that never change the URL are invisible entirely.

Session replay doesn't care how the page changes. It records what the user saw.

Table of Contents

1. Why SPAs Break Traditional Analytics
2. How Replay Handles SPAs
3. Heatmaps on Dynamic Views
4. Funnels Without Unique URLs
5. Framework Setup
6. Common SPA Issues Replay Reveals
7. Key Takeaways

Why SPAs Break Traditional Analytics

How Replay Handles SPAs

DeepSync records a DOM snapshot and every mutation after it, so every view, modal, and state appears in replay. It also hooks the History API, so client-side route changes show as page views in the session timeline, heatmaps, and funnels.

Heatmaps on Dynamic Views

Heatmaps on SPAs need care:

• Group dynamic routes (e.g., /projects/123 and /projects/456) when analyzing a template.
• Watch for hidden states—clicks on a modal overlay land on the same URL as the page underneath.
• Segment by device, as SPA layouts often change a lot on mobile.

Funnels Without Unique URLs

When steps don't change the URL (a multi-step modal, an in-page wizard), use custom events:

deepsync("track", "wizard_step_completed", { step: 2 });

Then build funnel steps on those events. See goals and conversions.

Framework Setup

• React (Vite, CRA)
• Next.js
• Vue / Nuxt
• Angular, Svelte, SvelteKit
• TanStack Start

Common SPA Issues Replay Reveals

1. Infinite spinners — a request failed and the UI never handled it.
2. Back button breaks — users press back and lose their progress.
3. Stale state — a list doesn't refresh after an edit.
4. Double submits — no disabled state on buttons.
5. Route errors — a blank screen after a deploy because of a chunk load failure.

Check JavaScript errors ranked by affected sessions to find these quickly.

Key Takeaways

• SPAs break pageview-based analytics.
• Replay records every view and state, regardless of URL.
• Use custom events for steps that don't change the URL.
• Replay plus JS errors finds SPA-specific bugs fast.

Conclusion

Your SPA is a rich, stateful product. Your analytics should see it that way.

Start free.