`Sentry.diagnoseSdkConnectivity()` ignores "tunnel" setting

[abuinitski]

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?

Self-hosted/on-premise

Which SDK are you using?

@sentry/nextjs

SDK Version

10.20.0

Framework Version

15.5.6

Link to Sentry event

No response

Reproduction Example/SDK Setup

No response

Steps to Reproduce

1. Create blank Next.js app: pnpm create next-app@latest my-app --yes
2. Add sentry integration: npx @sentry/wizard@latest -i nextjs --saas --org {redacted} --project {redacted}
   • "Do you want to route Sentry requests ... avoid ad blockers?" - NO (intentionally not using built-in integration since final intent is to use a self-hosted Sentry instance, which is not compatible with tunnelRoute option according to the documentation)
   • "Do you want to create an example page..." - YES
   • all other options - NO
3. update instrumentation-client.ts: add tunnel: "/monitor" option
4. install zod pnpm add zod (not necessary, but needed for route implementation)
5. implement monitoring route handler under /monitor
6. start the server pnpm dev and navigate to sample page: http://localhost:3000/sentry-example-page

/src/app/monitor/route.ts implementation:

import z from 'zod'

import {NextRequest} from 'next/server';

const SentryHeaderSchema = z.object({
    dsn: z.url(),
});

type SentryInfo = {
    host: string;
    projectId: string;
};

export async function POST(req: NextRequest) {
    let envelope: string;
    try {
        envelope = await req.text();
        if (!envelope) return new Response('Empty envelope', {status: 400});
    } catch {
        return new Response('Invalid body', {status: 400});
    }

    const info = parseSentryEnvelope(envelope);
    if (!info) return new Response('Invalid envelope', {status: 400});

    const upstreamSentryUrl = `https://${info.host}/api/${info.projectId}/envelope/`;
    await fetch(upstreamSentryUrl, {
        method: 'POST',
        body: envelope,
    });

    return Response.json({}, {status: 200});
}

export function parseSentryEnvelope(envelope: string): SentryInfo | undefined {
    const [headerRaw] = envelope.split('\n');
    if (!headerRaw) return undefined;

    try {
        const dsnText = SentryHeaderSchema.parse(JSON.parse(headerRaw)).dsn;
        const dsnUrl = new URL(dsnText);
        return {
            host: dsnUrl.hostname,
            projectId: dsnUrl.pathname.split('/').pop() ?? '',
        };
    } catch (e) {
        console.error('invalid Sentry envelope header', e);
        return undefined;
    }
}

Expected Result

In presence of an Ad Blocker, sample page displays no errors after load. Test error can be simulated by pressing "Throw Sample Error", and relevant event can be successfully delivered to Sentry via /monitor tunnel.

Actual Result

Sentry SDK fires a fetch request to https://o447951.ingest.sentry.io/api/{redacted}/envelope/?sentry_version=7&sentry_key={redacted}&sentry_client=sentry.javascript.browser%2F1.33.7 which gets blocked by the Ad Blocker. Sample page displays the error and "Throw Sample Error" button is disabled:

It looks like network requests to Sentry are being blocked, which will prevent errors from being captured. Try disabling your ad-blocker to complete the test.

Additional Context

Removing useEffect which calls Sentry.diagnoseSdkConnectivity() in /src/app/sentry-example-page/page.tsx resolves the issue. Sample page does not show any errors, and test error can be successfully delivered to Sentry as expected via /monitor tunnel.

_{Tip: React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.}

[linear]

JS-1075

[s1gr1d]

Hello and thanks for writing in!
This API was originally added to diagnose general connectivity issues and problems with ad-blockers. The tunnel option would be an option you would add after detecting problems with the connectivity here.

#15821

Think of it as

1. Try capturing an error -> does not show up in Sentry
2. Does Sentry in general work -> test connectivity
3. Default connectivity does not work -> Add tunnel
4. Capture an error again -> shows up in Sentry now

We will discuss this internally if we would rather update the documentation around that or add the tunneling function.

[abuinitski]

Thanks @s1gr1d !

Few comments in case these would be useful in your thought process.

I assume the next.js project generator wizard is intended to guide you through checking / troubleshooting plan you expressed. Which it doesn't do currently. So this "example page" might be a good candidate for a low-hanging-fruit fix here.

1. Try capturing an error -> does not show up in Sentry - an example page here tests no-tunnel connectivity first, and blocks the rest of the path if sentry is not reachable without a tunnel. So might be worth extracting it into a separate button "Check connectivity without tunnel". Separate action not executed automatically, and not blocking other steps. "Check connectivity with tunnel" is a nice option, but likely out of scope.
2. Does Sentry in general work -> test connectivity - this does not resolve even with tunnel. Unclear without additional helper message (might be straight in the example page).

So I think that reworking UX of the example page - to guide the user through a step-by-step process which you explained - might actually help without major modification to the "check connectivity" function.

Additionally, might consider some handling of the self-hosted Sentry installations. So that "check connectivity" function actually attempts to validate availablility of a self-hosted Sentry host, instead of defaulting to the cloud installation.