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, backend traces, metrics, logs, and full request/response content and headers. No data is left behind.

It helps your team pinpoint and resolve bugs faster and save time combing through APM data.

Screenshot of Platform Debugger

Getting started​

To set up, follow these steps:

  • Open your project
  • In the left-side menu, click "Debbuger"
  • Click "Set up Debugger"
  • Name your integration
  • Hit "Create"
  • An OpenTelemetry (OTel) token will be created for your OTel integration.
  • Follow these steps to configure OpenTelemetry

Once you click “Confirm”, we will proceed with the Multiplayer OpenTelemetry integration and start adding backend data (e.g. traces and logs) to your full-stack session recordings. Please note that if you close the set up window before finishing the set up, new OTel tokens will be generated when you re-open it.

🔑 Pro tip: You'll need to download the browser extension OR incorporate the web library into your application (and enable the widget) in order to start recording a debugger session. See below for more information.

Browser extension​

Start debugging with Multiplayer directly from your browser, no widget integration required.

  1. Install the extension from the Chrome Web Store.
  2. Log in to your Multiplayer account (new or existing).
  3. Enable debugging for the website you want to record.
  4. Select a workspace and project where OpenTelemetry is configured
  5. Start recording a bug (session data will be tied to a single tab and domain).

⚠️ Some websites may block script injection or restrict CORS access. If you run into issues, contact support.

Browser extension

Widget​

To provide users the ability to start recording and send a debug session through a widget, follow the steps in the configure OpenTelemetry setup.

Here's an example of how the widget looks like:

Platform Debugger widget

Main Functionalities​

These are the main functionalities:

  • Record sessions to see the exact steps to reproduce an issue.
  • See deep platform insights for each session: everything that happened in your backend platform - metrics, traces, and logs - not just front end APIs.
  • Review user issues: Enable your end-users to record deep session replays of any bugs / unexpected behaviours they come across.
  • Share insights with your team — skip the long tickets, emails and endless Slack threads.
  • Auto-generate test scripts - Generate a notebook directly from a deep session replay of your bug. This will auto-generate a runnable test script — complete with real API calls, payloads, and code logic.

Top Navigation Overview​

Screenshot of Platform Debugger top navigation bar

Left:

  • Views Panel: Create a list of filtered views within a session, by selecting specific session events you want to group together.

Center:

  • Session Information Panel: Open the session information panel to review and edit the session name, comments, browser details, etc.
  • Enter Fullscreen
  • Switch to List View: Move the insights panel to the bottom of the screen (switching from vertical to landscape view) for a better deep dive into events, console, traces, logs.
  • Hide the Recording: Hide the recording of the user steps.

Right:

  • Generate Notebook: This will auto-generate a runnable test script in a notebook based on that specific full-stack session recording.
  • [Coming soon] AI Assistant
  • [Coming soon] Share session: View-only sharing is coming soon. In the meantime, you can invite your team members to collaborate within your Multiplayer project and review all debugger sessions.

Review and Edit Session Information​

Screenshot of Platform Debugger Session Information 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 any comments users included in the session recording
  • Review the recorder's information (name, browser info, etc.)
  • Delete a session

Comments - where you can leave comments for your team.

Create Custom Views of Events​

Screenshot of Platform Debugger custom views

To create a custom view of a selection of events within a full-stack session recordings 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

Review Information per Session Event​

Screenshot of Platform Debugger session events

For each session we capture backend traces, metrics, logs, and full request/response content and headers.

To view the information for each event recorded, double click on the desired session event.

Filter Session Events​

Screenshot of Platform Debugger filtering events

Events within session recording can be filtered by:

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

Screenshot of Platform Debugger filtering levels

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​

Generate a Notebook directly from a session replay of your bug. This will auto-generate a runnable test script — complete with real API calls, payloads, and code logic.

Creating a Notebook test script

Next Steps​

You did it! What’s next?