JavaScript client library & widget

ℹ️ GitHub repo for reference: multiplayer-session-recorder-javascript ℹ️

Multiplayer is a full stack session recorder that captures everything you need to develop new features, fix bugs, and work with AI coding tools. Multiplayer collects front-end screens, user actions, backend traces, metrics, logs and full request/response content and headers - all auto-correlated in a single session.

Recording options overview

Multiplayer is versatile by design and you can select between 4 options how to capture your full stack session recordings:

Install our Chrome browser extension
Install our JavaScript client library (including optional in-app widget)
Install language specific libraries to record from your CLI apps
Mobile (coming soon - contact us if you’re interested in early beta).

‼️ In this guide we only cover how to install our JavaScript client library ‼️

JavaScript client library overview

Use the Multiplayer JavaScript Client Library when you need an in-app reporting feature for developers, QA, or end-users. It automatically records full stack session replays and captures their notes and feedback in an (optional and customizable) widget. It’s ideal for your own SaaS product or internal applications.

This approach also gives you fine-grained enterprise privacy controls and lets you scale issue reporting seamlessly across your organization without requiring anyone to install the browser extension.

Check live examples of the in-app widget:

In the Multiplayer UI, for our users to report issues to us
In the Multiplayer free sandbox, to report issues about the sandbox project
In the Multiplayer demo app "Time Travel" that feeds data to our sandbox, as a real-world app would. This is a customized version.

Platform Debugger widget

Setup steps

Generate your API Key

Generating an API key is necessary to complete the CLI Apps setup and send frontend data to Multiplayer.

In the onboarding setup wizard:

Select "CLI Apps"
(Optional) Rename your API key
Click "Create"

ℹ️ For a detailed step-by-step overview guide, please refer to: Multiplayer API keys setup & best practices

Installation

npm i @multiplayer-app/session-recorder-browser @opentelemetry/api
# or
yarn add @multiplayer-app/session-recorder-browser @opentelemetry/api

Web client quickstart

import SessionRecorder from '@multiplayer-app/session-recorder-browser'

SessionRecorder.init({
  application: 'my-web-app',
  version: '1.0.0',
  environment: 'production',
  apiKey: '<YOUR_FRONTEND_OTEL_TOKEN>',
  // IMPORTANT: in order to propagate OTLP headers to a backend
  // domain(s) with a different origin, add backend domain(s) below.
  // e.g. if you serve your website from www.example.com
  // and your backend domain is at api.example.com set value as shown below:
  // format: string|RegExp|Array
  // propagateTraceHeaderCorsUrls: [new RegExp('https://api.example.com', 'i')],
})


// add any key value pairs which should be associated with a session
SessionRecorder.setSessionAttributes({
  userId: '12345',
  userName: 'Jane Doe',
})

// optionally control via API (widget is enabled by default)
// if you're not using widget (see: `showWidget: true/false`)
// then you can programatically control the session recorder
// by using the methods below
SessionRecorder.start()
SessionRecorder.pause()
SessionRecorder.resume()
SessionRecorder.stop('Finished session') // optional: pass reason for stopping the session

Advanced config

‼️ Follow the steps in this GitHub readme to set up: multiplayer-session-recorder-javascript ‼️

You did it! What’s next?

You’ve successfully configured the Multiplayer JavaScript Client Library, congratulations! 🎉

To leverage the Multiplayer full stack session recordings at their fullest, make sure to:

If you have any questions or trouble with the configuration, contact us.

Recording options overview​

JavaScript client library overview​

Setup steps​

Login​

Generate your API Key​

Installation​

Web client quickstart​

Advanced config​

You did it! What’s next?​