Skip to main content

Configure OpenTelemetry

πŸ“Œ If you have any questions shoot us an email or join us on Discord! πŸ’œ

Overview​


Multiplayer leverages OpenTelemetry for two features:

ℹ️ These two features share the same set up window and the following OpenTelemetry configuration steps.

1. Set up the OpenTelemetry Integration​


  • Open your project
  • In the left-side menu, click "System" to open the System Dashboard
  • Click "Configure Auto-Docs + Debugger"
  • Name your integration
  • Hit "Create"
  • An OpenTelemetry (OTel) token will be created for your OTel integration.

Once you click β€œConfirm”, we will proceed with the Multiplayer OTel integration and start automatically documenting your system and adding backend data (e.g. traces and logs) to your Platform Debugger sessions.

Please note that if you close the set up window before finishing the set up (or before copying the generated tokens), you will no longer be able to see the Otel tokens. You need to delete the integration and start again to generate new OTel tokens.

2. Configuring OTel​

πŸ”‘ Pro tip: To record deep session replays, you can choose between a widget or a browser extension.

If you choose the widget, set up the web library into your application (and enable the widget) using the instructions included below πŸ‘‡.


  1. Install session debugger library with following command:
  npm i -S @multiplayer-app/session-debugger
  1. Initialize session debugger library:
  // NOTE: this import should be done before all other imports in your main file.
import SessionDebugger from "@multiplayer-app/session-debugger";

SessionDebugger.init({
version: "<web-app-version>",
application: "<web-app-name>",
environment: "<web-app-environment>",
apiKey: "<multiplayer-key>",
canvasEnabled: true,
showWidget: true,
ignoreUrls: [
/https:\/\/domain\.to\.ignore\/.*/, // can be regex or string
/https:\/\/another\.domain\.to\.ignore\/.*/,
],
// NOTE: if frontend domain doesn't match to backend one, set backend domain to `propagateTraceHeaderCorsUrls` parameter
propagateTraceHeaderCorsUrls: [
new RegExp("https://your.backend.api.domain", "i"), // can be regex or string
new RegExp("https://another.backend.api.domain", "i")
],
schemifyDocSpanPayload: true,
maskDebSpanPayload: true,
docTraceRatio: 0.15 // 15% of traces will be sent for auto-documentation
});


// Optional
window["mpSessionDebuggerMetadata"] = {
userId: "12345",
userName: "John Doe",
};

Next Steps​


You did it! What’s next?