!Description

Multiplayer Full Stack Session Recorder

The Multiplayer Full Stack Session Recorder is a powerful tool that offers deep session replays with insights spanning frontend screens, platform traces, metrics, and logs. It helps your team pinpoint and resolve bugs faster by providing a complete picture of your backend system architecture. No more wasted hours combing through APM data; the Multiplayer Full Stack Session Recorder does it all in one place.

Install

``bash
npm i @multiplayer-app/session-recorder-node


or

`javascript
import {
SessionRecorderHttpTraceExporter,
SessionRecorderHttpLogsExporter,
SessionRecorderTraceExporterWrapper
SessionRecorderLogsExporterWrapper,
} from "@multiplayer-app/session-recorder-node"
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http"
import { OTLPLogExporter } from "@opentelemetry/exporter-logs-otlp-http"

// set up Multiplayer exporters. Note: GRPC exporters are also available.
// see: SessionRecorderGrpcTraceExporter and SessionRecorderGrpcLogsExporter
const multiplayerTraceExporter = new SessionRecorderHttpTraceExporter({
apiKey: "MULTIPLAYER_API_KEY", // note: replace with your Multiplayer API key
})
const multiplayerLogExporter = new SessionRecorderHttpLogsExporter({
apiKey: "MULTIPLAYER_API_KEY", // note: replace with your Multiplayer API key
})

// Multiplayer exporter wrappers filter out session recording atrtributes before passing to provided exporter
const traceExporter = new SessionRecorderTraceExporterWrapper(
// add any OTLP trace exporter
new OTLPTraceExporter({
// ...
})
)
const logExporter = new SessionRecorderLogsExporterWrapper(
// add any OTLP log exporter
new OTLPLogExporter({
// ...
})
)
`

$3

If you're scalling or a have a large platform, consider running a dedicated collector. See the Multiplayer OpenTelemetry collector repository which shows how to configure the standard OpenTelemetry Collector to send data to Multiplayer and optional other destinations.

Add standard OpenTelemetry code to export OTLP data to your collector.

See a basic example below:

`javascript
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http"
import { OTLPLogExporter } from "@opentelemetry/exporter-logs-otlp-http"

const traceExporter = new OTLPTraceExporter({
url: "http:///v1/traces",
headers: {
// ...
}
})

const logExporter = new OTLPLogExporter({
url: "http:///v1/logs",
headers: {
// ...
}
})
`

$3

In addition to sending traces and logs, you need to capture request and response content. We offer two solutions for this:

In-Service Code Capture: You can use our libraries to capture, serialize, and mask request/response and header content directly within your service code. This is an easy way to get started, especially for new projects, as it requires no extra components in your platform.

Multiplayer Proxy: Alternatively, you can run a Multiplayer Proxy to handle this outside of your services. This is ideal for large-scale applications and supports all languages, including those like Java that don't allow for in-service request/response hooks. The proxy can be deployed in various ways, such as an Ingress Proxy, a Sidecar Proxy, or an Embedded Proxy, to best fit your architecture.

$3

The Multiplayer Session Recorder library provides utilities for capturing request, response and header content. See example below:

`javascript
import {
SessionRecorderHttpInstrumentationHooksNode,
} from "@multiplayer-app/session-recorder-node"
import {
getNodeAutoInstrumentations,
} from "@opentelemetry/auto-instrumentations-node"
import { type Instrumentation } from "@opentelemetry/instrumentation"

export const instrumentations: Instrumentation[] = getNodeAutoInstrumentations({
"@opentelemetry/instrumentation-http": {
enabled: true,
responseHook: SessionRecorderHttpInstrumentationHooksNode.responseHook({
// list of headers to mask in request/response headers
maskHeadersList: ["set-cookie"],
// set the maximum request/response content size (in bytes) that will be captured
// any request/response content greater than size will be not included in session recordings
maxPayloadSizeBytes: 500000,
isMaskBodyEnabled: false,
isMaskHeadersEnabled: true,
}),
requestHook: SessionRecorderHttpInstrumentationHooksNode.requestHook({
maskHeadersList: ["Authorization", "cookie"],
maxPayloadSizeBytes: 500000,
isMaskBodyEnabled: false,
isMaskHeadersEnabled: true,
}),
}
})
`

$3

The Multiplayer Proxy enables capturing request/response and header content without changing service code. See instructions at the Multiplayer Proxy repository.

Set up CLI app

The Multiplayer Full Stack Session Recorder can be used inside the CLI apps.

The Multiplayer Time Travel Demo includes an example node.js CLI app.

See an additional example below.

$3

Use the following code below to initialize and run the session recorder.

The example relies on opentelemetry.ts. Copy that file and put it next to quick start code.

$3

`javascript
// IMPORTANT: set up OpenTelemetry
// for an example see ./examples/cli/src/opentelemetry.ts
// NOTE: for the code below to work copy ./examples/cli/src/opentelemetry.ts to ./opentelemetry.ts
import { idGenerator } from "./opentelemetry"
import SessionRecorder from "@multiplayer-app/session-recorder-node"
import {
SessionRecorderHttpInstrumentationHooksNode,
SessionRecorderTraceIdRatioBasedSampler,
SessionRecorderIdGenerator,
SessionRecorderHttpTraceExporter,
SessionRecorderHttpLogsExporter,
} from "@multiplayer-app/session-recorder-node"

SessionRecorder.init({
apiKey: "MULTIPLAYER_API_KEY", // note: replace with your Multiplayer API key
traceIdGenerator: idGenerator,
resourceAttributes: {
componentName: "{YOUR_APPLICATION_NAME}",
version: "{YOUR_APPLICATION_VERSION}",
environment: "{YOUR_APPLICATION_ENVIRONMENT}",
}
})
`

$3

Below is an example showing how to create a session recording in MANUAL mode. Manual session recordings stream and save all the data between calling start and stop.

`javascript
await sessionRecorder.start(
SessionType.MANUAL,
{
name: "This is test session",
sessionAttributes: {
accountId: "1234",
accountName: "Acme Corporation"
}
}
)

// do something here

await sessionRecorder.stop()
`

$3

Below is an example showing how to create a session in CONTINUOUS mode. Continuous session recordings stream all the data received between calling start and stop -
but only save a rolling window data (90 seconds by default) when:

- an exception or error occurs;
- when save is called; or
- programmatically, when the auto-save attribute is attached to a span.


`javascript
await sessionRecorder.start(
SessionType.CONTINUOUS,
{
name: "This is test session",
sessionAttributes: {
accountId: "1234",
accountName: "Acme Corporation"
}
}
)

// do something here

await sessionRecorder.save()

// do something here

await sessionRecorder.save()

// do something here

await sessionRecorder.stop()
`

Continuous session recordings may also be saved from within any service or component involved in a trace by adding the attributes below to a span:

`javascript
import { trace, context } from "@opentelemetry/api"
import SessionRecorder from "@multiplayer-app/session-recorder-node"

const activeContext = context.active()

const activeSpan = trace.getSpan(activeContext)

activeSpan.setAttribute(
SessionRecorder.ATTR_MULTIPLAYER_CONTINUOUS_SESSION_AUTO_SAVE,
true
)
activeSpan.setAttribute(
SessionRecorder.ATTR_MULTIPLAYER_CONTINUOUS_SESSION_AUTO_SAVE_REASON,
"Some reason"
)

``

Replace the placeholders with your application’s version, name, environment, and API key.