The challenge
Strategy
Impact
Session Replay was our #1 request — so I began by defining what great looks like.
What it is
Session Replay is our number one requested feature from current and prospective customers. It provides visual context of what the end user was doing alongside the telemetry data of how the application was behaving.
It also expands New Relic's capability from traditional app monitoring into Digital Experience Monitoring (DEM).
Understanding the ask
Before starting, I needed to understand what customers expect from a session replay tool — so I ran a competitive analysis, mapping the functional landscape and identifying opportunities for differentiation.
Jobs-to-be-Done
I also conducted internal qualitative research with our engineers who use Fullstory session replay on a daily basis. The interviews revealed they prioritise time-to-insight — specifically the immediate visibility of key events on the replay timeline — and they appreciate the ability to quickly link errors, the user action, and data together for incident triaging. I synthesised these findings into Jobs-to-be-Done statements:
- The reproduction: As a front-end engineer, when a JavaScript error occurs, I need to see exactly what the user was doing leading up to it, so I can recreate the issue.
- The impact: As a front-end engineer, I need to see how the application behaved during the error to determine if this was an isolated incident or a critical failure affecting the entire user journey.
- The root cause: As a full-stack engineer, I need to correlate user actions with back-end technical events on a single timeline, so I can pinpoint the source of a bug without switching contexts.
"The thing I'd love to see is some kind of summary that ties errors together with the sessions."
Developers were losing time to context-switching — the fix was one synchronized view.
Troubleshooting means reconstructing what the user did — from data scattered across three disconnected places, each jump a context switch that costs time:
- Logs
- Traces
- Timeline
The approach: one synchronized view
The biggest productivity killer in a debugging flow is context-switching — matching a timestamp in a video to a line in a log file. So I unified three layers that move together in real time:
- Replay player — the visual experience the user saw
- Event trail — route changes, JavaScript errors & custom events
- Session traces — the underlying logs & network calls
This mirrors how developers actually troubleshoot:
- See the problem in the UI
- Identify the high-level event
- Reach for the granular logs to find the root cause
Keeping the three layers side-by-side and in sync removes the friction of context-switching — letting developers move from what happened to why it happened in one fluid motion.
Long sessions are noisy — so the timeline surfaces only the signals that matter.
Navigating the noise
Reviewing session replays is traditionally labour-intensive. By overlaying event markers like JavaScript errors and route changes onto the timeline, we provide engineers with clear visual cues. Here are some explorations around designing a scrubber that doesn't just play back a video, but actively surfaces the critical signals, allowing engineers to jump straight to the root cause.
Designing for high-density data
To help users parse long sessions without cognitive fatigue, I developed a chapter system that organises dense route changes into a scannable timeline. By clustering rapid-fire interactions, we reduce visual noise while maintaining a 10px minimum hit-area for accessibility. This diagram illustrates three logic models for grouping sub-second events — balancing a high-level overview with granular accuracy.
Responsive markers for better legibility
To ensure the timeline and error markers remain useful on any screen size, I designed a merging mechanism for error markers — much like how a map groups landmarks as you zoom out. This eagle-eye view automatically clusters overlapping errors into a single interactive marker, maintaining a clean workspace while preserving the detail within a tooltip.
Stakeholders disagreed on grouped vs. overlay markers — so I let user research decide.
Partnering with the PM, I tested two ways to show errors on a crowded timeline in a small space. The result was decisive.
Option A — Overlay
Every marker stacked on the timeline. Overlapping error sets fight for the same space, and the view gets cluttered fast.
Option B — Grouped ✓
Markers cluster into squares. Scannable and precise, and the deepening red forms a natural heatmap of where issues concentrate.
Grouping won on every dimension we tested:
- Cognitive ease: the grouped view was "easier for the brain to digest" and "keeps things less cluttered" than the overlay approach.
- Precision: participants liked that they could click a single square to see exactly what happened in that timeframe without overlapping with other error sets.
- Efficiency in investigation: the red deepens as more errors cluster together, creating a natural heatmap that shows users where the most issues occurred and where to start.
How it fits into a real troubleshooting flow.
Session Replay gives engineers a direct way to replay a user's actions and behavior and quickly identify what went wrong. The steps below follow one real error from a monitoring alert to its root cause — the kind of end-to-end visibility that lets engineers correlate the actions leading up to an error faster and reduce time to resolution.
The result isn't a video player — it's a synchronized diagnostic tool.
The final design of New Relic Session Replay is not just a video player but a synchronised diagnostic tool. By unifying the video player (with timeline scrubber) and the Event Trail and Session Trace components, I ensured that every technical signal is perfectly in sync with the user's visual journey. It lets developers see an error and the user's behaviour side-by-side, at the exact moment it happened. This balance of granular detail and intuitive context is what ultimately cuts time-to-insight from minutes to seconds.
Shipped
The impact: a new revenue pillar, and troubleshooting in seconds.
Session Replay scaled to 1,000+ active accounts and 7M weekly sessions within six months of launch, generating $3.52M in monthly recurring revenue and establishing it as a core pillar of New Relic's Browser capability.
By giving developers a single source of truth, it eliminated context-switching — turning a symptom into a diagnosed root cause in one fluid motion. Time-to-insight dropped from minutes to seconds.