Document how to write a Fastify/Node.js tunnel that handles replay data

[GeekCornerGH]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

7.69.0

Framework Version

React 18.2.0, Vite 4.4.9

Link to Sentry event

No response

SDK Setup

import * as Sentry from "@sentry/react";

Sentry.init({
    dsn: import.meta.env.VITE_SENTRY_DSN,
    integrations: [new Sentry.BrowserTracing(), new Sentry.Replay({
        maskAllText: false,
        blockAllMedia: true,
    })],
    release: 1.0.0,
    environment: import.meta.env.MODE,
    // Performance Monitoring
    tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
    // Session Replay
    replaysSessionSampleRate: 0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
    tunnel: "http://127.0.0.1:3001/tunnel"
});

Steps to Reproduce

1. Create a Fastify app
2. Create a route which should proceed data. No need to actually do anything with it, just parse body. Example:

fastify.post("/tunnel", async (request, reply) => {
        try {
            const envelope = request.body as string;
            const piece = envelope.split("\n")[0];
            const header = JSON.parse(piece);
        }
        catch {
            return reply.code(204).send();
        }
        return reply.code(204).send();
    });

3. Open a react project with tunnel endpoint, and open it in your browser.

Expected Result

Fastify should return a 204

Actual Result

{"level":30,"time":1695121324894,"pid":1984,"hostname":"redacted","reqId":"req-4","res":{"statusCode":500},"responseTime":2.3399999737739563,"msg":"request completed"}```

[Lms24]

Hi @GeekCornerGH thanks for writing in!

Is the resulting 500 error one you return from your fastify endpoint or is this returned by Sentry?

Are you able to identify what kind of envelope causes this errors? i.e. one for an error, transaction or replay?
If have a hunch that this might be related to Replay sending compressed data but not sure yet.

[GeekCornerGH]

Hi @Lms24,
According to my devtools, the envelope causing issues seems to be a replay_event type.
Hope it helps!

[Lms24]

To make sure this is it, can you try setting the useCompression option to false in the Replay constructor options?

// from your Sentry.init:

new Sentry.Replay({
    maskAllText: false,
    blockAllMedia: true,
    useCompression: false,
})

Curious if this changes something