Skip to main content

JavaScript client library & widget

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

To automatically detect and record bugs in your application, we recommend to use the Multiplayer debugging agent CLI.

Overview​

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

  • On-demand: Manually start/stop recordings to capture bugs or unexpected behaviors
  • Continuous: Manually enable/disable a rolling capture of your work. Recordings for errors and exceptions are auto-saved. You can also manually save recordings for your last 2 minutes of work

Check live examples of the in-app widget:

⚠️ 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​

Login​

Login into your Multiplayer account. If you don't already have one, create a free trial at go.multiplayer.app.

Generate your API Key​

Navigate to:

  • "Agents" tab > "API keys" or "Settings" to open the project settings
  • In "API keys" create an API key to authenticate the Multiplayer CLI. Copy the key immediately. For security reasons, you won’t be able to view it again later. If you lose it, you’ll need to generate a new one.
  • In "Session Recorder" create an API key to authenticate your application when sending session data to Multiplayer. Copy the key immediately. For security reasons, you won’t be able to view it again later. If you lose it, you’ll need to generate a new one.

ℹ️ 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?​

🚀 If you’re ready to trial Multiplayer with your own app, you can follow the steps in the quickstart.

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