JavaScript client library & widget

Multiplayer is a full stack session recorder that captures everything from front-end screens, user actions, backend traces, metrics, logs, to full request/response content and headers - all auto-correlated in a single session.

JavaScript client library overview

The Multiplayer JavaScript client Library is ideal for in-app reporting of bugs and unexpected feature behaviours. End-users can use the (optional and customizable) widget to start/stop full-stack session recordings, adding their notes and feedback before saving the replay.

Using the JavaScript client Library gives you fine-grained enterprise privacy controls and lets you scale issue reporting seamlessly across your organization.

The in-app widget allows end-users to select between two recording modes:

On-demand recording - Start/stop a recording manually
Continuous recording - Record in the background while you work

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.

⚠️ Please note that this library does NOT mobile application, only browser-based applications. If you need web support, consider using the React Native client library.

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 "JavaScript Client Library"
(Optional) Rename your API key
Click "Create"

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

Supported frameworks

The session-recorder-browser library is framework-agnostic and can be used with almost any framework.

However, we have here framework specific readmes for more detailed 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: 'MULTIPLAYER_API_KEY' // note: replace with your Multiplayer API key
  // 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: 'John Doe'
})

Advanced config

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

Other languages & CLI Apps

Language specific libraries support any type of application and give full control to power users. Use your CLI to capture full-stack session replays across environments, get deeper integrations, CI/CD use cases, or backend-triggered sessions.

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.

JavaScript client library overview​

Setup steps​

Login​

Generate your API Key​

Supported frameworks​

Installation​

Web client quickstart​

Advanced config​

Other languages & CLI Apps​

You did it! What’s next?​