Skip to main content

Full stack session recordings

đź“Ś If you have any questions shoot us an email or join us on Discord! đź’ś

Overview​

The Multiplayer full stack session recordings capture everything: frontend screens, user actions, backend traces, metrics, logs, and full request/response content and headers. No data is left behind.

Multiplayer supports multiple install options, recording modes, and use cases across the entire software development lifecycle.

All recording modes (on-demand, continuous, remote) support all features, including:

  • Auto-correlation of full-stack data per session
  • Recording annotations
  • MCP-ready full stack context
  • Auto-generated, interactive test scripts

You can find example session recordings in our free sandbox: sandbox.multiplayer.app

Screenshot of session recorder

Getting started​

🔑 Pro tip: The quickest way to get started and capture full stack session recordings is to install the Multiplayer browser extension.

You can create a new Multiplayer account at any time: go.multiplayer.app

If you already have one, follow these steps to set up full stack session recordings:

  • Open your project
  • In the left-side menu, click "Sessions"
  • Click "Set up Multiplayer"
  • Follow these steps to configure Multiplayer

Multiplayer is very versatile and offers 3 other options for capturing session recordings besides the browser extension:

Recording modes​

You can record full stack session recordings in 3 modes:

→ On-demand: Manually start and stop session replays to capture the exact reproduction steps

→ Continuous: Automatically create session recordings for both frontend and backend exceptions and errors in the background. You can also manually save the recording is something doesn't work as expected and then continue working.

→ Remote: Silently enable recording of user experiences, ensuring nothing gets lost in translation from vague bug reports. (coming soon - contact us if you’re interested in early beta).

FAQs:

Data captured per session​

Multiplayer session recordings are full stack by default. After following all the configuration steps you can expect this data automatically correlated per session:

Frontend data:

  • User clicks + inputs
  • Page navigations + loads
  • Session metadata
    • Browser information
    • OS information
    • Device type
    • Screen size
    • Pixel ratio
    • Cookies
    • Harware concurrency
    • Package version
  • DOM events
  • Console messages (message + stack trace)
  • Network requests
  • HTML source code

ℹ️ For a detailed overview guide, please refer to: How Multiplayer records and replays user interactions and data. Please note that Multiplayer is built with privacy in mind and, by default, all user inputs are masked.

Backend data:

  • Backend errors
  • Correlated distributed traces per session, with no sampling
  • Request / response content per session, including from inside the system components (e.g. going from one service to another)
  • Header content per session, including from inside the system components (e.g. going from one service to another)

ℹ️ For a detailed overview guide, please refer to: How Multiplayer backend tracing works

Additional context:

  • User comments / feedback
  • Service and dependency maps (components, dependencies, APIs, etc.)
  • Repositories

🔑 Pro tip: Multiplayer is backend agnostic and supports OpenTelemetry: you can seamlessly integrated it with whichever observability stack you already use.

Performance & overhead​

Modern teams are rightly sensitive to anything that could slow users down. Multiplayer is designed to capture useful context without adding noticeable latency or chewing through bandwidth/CPU.

ℹ️ Please refer to this detailed explaination of how we do that and what controls you have: How Multiplayer stays lightweight

Sessions functionalities overview​

These are the main functionalities in Sessions:

  • Review session recording to see the exact users / system behavior
  • See auto-correlated full stack data for each session: everything that happened in your system from console events, to backend traces, logs, request/response and header content
  • Annotate recordings with sketches and notes: turn session recordings into actionable development plans to share with your team or your AI coding assistant
  • View the service and dependency map to understand which components, dependencies, etc. were involved
  • Auto-generate test scripts - Generate a notebook directly from your session recording to create a runnable test script.
  • Share insights with your team

Top navigation overview​

Screenshot of session top nav

Left:

  • Views: Per each session recording you can create filtered view(s) of events and data. Select specific events in the recording and click "Create a view".

Center:

  • Open Session Information: Opens the session information panel to review and edit the session metadata, user and team comments, device details, etc.
  • Enter Fullscreen
  • Switch to Vertical / Horizontal layout: Move the data panel to the bottom of the screen (switching from vertical to horizontal layout) for a better deep dive into events, console, traces, logs.
  • Hide Data: Hide the data panel.
  • Recording: Show/Hide the recording of the user steps / system behavior.
  • Map: Show/Hide the service and dependency map to understand which components, dependencies, etc. were involved in the recording
  • None: Show only the data panel and hide the recording or map panel

Right:

  • Notes: Open the notes panel with the recording sketches, timestamp notes, or annotated frontend and backend data points
  • Notebook: This will auto-generate a runnable test script in a notebook based on that specific full stack session recording.

Add sketches and notes on a recording​

Screenshot of session notes

Annotations in Multiplayer let you turn raw session recordings into actionable development plans.

Whether you’re fixing a bug, clarifying requirements, or sketching a new feature idea, annotations help capture context directly on the timeline and make it reusable for your team or your AI IDE / AI coding assistant.

When to use notes​

  • Go from session replay to development plan: Transform session data into precise, contextualized instructions.

  • Collaborate across roles: Share annotated replays with devs, QA, PMs, or vendors for clear handoffs of new feature requests and suggestions.

  • Supercharge your AI tools: Feed annotated sessions into your AI IDE or copilot to generate code, tests, or feature implementations with minimal prompting.

Annotations feature set​

Screenshot of session notes features

After you’ve recorded a session, you can enrich it with additional context.

  • Navigate to Sessions
  • Open your desired full stack session recording
  • Navigate to the desired timestamp

For each timestamp you can add multiple:

  • Sketches: Draw directly on the session replay, add shapes and arrows. This allows you to visually highlight the UI elements you want edited or mark problem areas. As a tip, use different colors to communicate different intentions (e.g. red for bugs, green for feature ideas).

  • On-screen text: Add written details to your sketches: explanations of the desired behavior, or what the updated UI text should be.

  • Timestamp notes: Attach one or more notes at specific points in the timeline. These can clarify reproduction steps, mark requirements, clarify design intentions, or simply leave comments for your team.

  • Full-stack context: Because Multiplayer auto-correlates frontend and backend data, annotations can be directly added to your

    • User interactions (clicks, inputs, navigation)
    • API calls (with request/response details)
    • Traces and spans (service-level performance and errors)
    • …

Adding multiple sketches​

Each session recording supports multiple sketches throughout the recording or on the same timestamp.

Different timestamps:

  • Select the recording timestamp
  • Start sketching

Same timestamps:

  • To add a n- sketch on the same time timestamp, select “Sketch 1”
  • Click “Add new sketch” from the drop down menu
  • Start sketching

Adding annotations to traces, API calls, user interactions, etc.​

To add notes to specific data points auto-correlated to a session replay:

  • Click the ✨ notes icon next to each data point
  • Write your comment
  • The data point will appear in the Notes tab
  • You can now move it or add further context

Adding general notes​

Notes in full stack session recordings support the same blocks supported by notebooks, including:

  • Text blocks
  • Code blocks
  • Visualization blocks

To add general notes:

  • Click on the "+" button in the body of the note
  • Type "/" on a new line of text

Pulling sketches and notes into an AI coding tool​

Use the Multiplayer MCP server to pull your full stack session recording screenshots and instructions into your AI coding tools.

Each annotation carries its own metadata, ensuring your context is precise, reproducible, and linked directly to the system events it relates to.

Review and edit session information​

Screenshot of session info panel

The Session Information Panel has two tabs:

About - where you can:

  • Edit the session name
  • Add tags to a session (type the tag name and press enter)
  • Review user comments (optional and available by default for all session recordings) and reporter username
  • Review the session details (browser, device, etc.)
  • Delete a session

Comments - where you can leave comments for your team.

Create custom views of events​

Screenshot of session view panel

Within each session recording you can create a custom view of a selection of events. Follow these steps:

  • Open a session
  • Open the "Views" panel
  • Select the events you want to group within a view
  • Click "Create a view" in the "Views" panel

Filter / search session events​

Screenshot of session filtering and search

Events within session recording can be filtered by:

  • Type (trace, log, event, console)
  • Starred events
  • Component
  • Level (info, error, warn, debug)

Levels are assessed automatically. Here's an overview what each means:

  • INFO: Indicates a general informational messages about the application’s state and workflow. Used for key checkpoints and expected operations.
  • DEBUG: Indicates a detailed diagnostic information useful for developers when troubleshooting issues.
  • WARN: Indicates a potential issue that is not currently breaking the application but may cause problems in the future.
  • ERROR: Indicates a serious issue that could point to failures in execution, preventing normal operation.

Automatically create test scripts from a session​

Screenshot of session notebook generation

Generate a notebook directly from a session replay of your bug. This will auto-generate a runnable test script.

You can find a selection of example notebooks in our free sandbox: sandbox.multiplayer.app

View the service and dependency map​

Screenshot of session map

View the map of the system components and dependecies involved in a specific session recording.

System information is automatically detected and kept up-to-date when connecting your backend to Multiplayer (STEP 2 of the configuration guide).

Review all session recordings​

Screenshot of session navigation

The "Sessions" provides a full list of all session recordings captured within your project, regardless of the installation method (see configuration step 1).

If you're viewing an individual session recording recordings, you can view the full list by:

  • Clicking "Sessions" in the left side menu
  • Clicking "Sessions" in the top navigation path, before your individual session name

Next steps​

You did it! What’s next?