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:

  • Auto-Documentation: When enabled, it automatically discovers all components, APIs, dependencies, platforms, and environments within your software system and lists them within the System Dashboard and your individual Platform architecture diagrams

  • Platform Debugger: Record and share deep session replays that include relevant data from frontend screens to distributed traces metrics and logs from your backend platform.

ℹ️ 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: If you're setting up the Platform Debugger, you'll need to incorporate the web library into your application (and enable the widget) in order to start recording a debugger session.


  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?