Feedback widget with screenshot via tunnelling not working

[anatoliy-t7]

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/sveltekit

SDK Version

9.13.0

Framework Version

2.20.7

Link to Sentry event

No response

Reproduction Example/SDK Setup

src/hooks.client.ts

Sentry.init({
  dsn: env.PUBLIC_SENTRY_DSN,
  tunnel: `${env.PUBLIC_URL}/sentry`,
  environment: env.PUBLIC_ENV,
  release: version.sha,
  tracesSampleRate: 1,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  enabled: isSentryEnabled,
  integrations: isSentryEnabled
    ? [
        replayIntegration(),
        feedbackIntegration({
          colorScheme: 'system',
          showBranding: false,
          themeLight: {
            accentBackground: '#1D74E3'
          },
          themeDark: {
            accentBackground: '#1D74E3',
            background: '#1c1b1d'
          }
        })
      ]
    : [],
  debug: false
});

src/routes/(public)/sentry/+server.ts

export const POST: RequestHandler = async ({ request }) => {
  const envelopeBytes = await request.arrayBuffer();
  const envelope = new TextDecoder().decode(envelopeBytes);

  try {
    const piece = envelope.split('\n')[0];
    const header = JSON.parse(piece);
    const dsn = new URL(header['dsn']);
    const project_id = dsn.pathname?.replace('/', '');

    if (dsn.hostname !== SENTRY_HOST) {
      throw new Error(`Invalid sentry hostname: ${dsn.hostname}`);
    }

    if (!project_id || !SENTRY_PROJECT_IDS.includes(project_id)) {
      throw new Error(`invalid sentry project id: ${project_id}`);
    }

    const upstream_sentry_url = `https://${SENTRY_HOST}/api/${project_id}/envelope/`;

    await fetch(upstream_sentry_url, {
      method: 'POST',
      body: envelopeBytes
    });

    return json({ status: 200 });
  } catch (e) {
    logger.error('error tunneling to sentry', e);

    return json({ error: 'error tunneling to sentry' }, { status: 500 });
  }
};

Steps to Reproduce

1. set up feedback widget https://docs.sentry.io/platforms/javascript/guides/sveltekit/user-feedback/
2. choose to take screenshot via a feedback widget
3. add a message
4. send feedback

Expected Result

A feedback should reach sentry with a screenshot attached

Actual Result

• a feedback did not reach Sentry
• get a message Unable to send Feedback. This could be because of network issues, or because you are using an ad-blocker
• a tunnel backend endpoint gets error from sentry response -> SyntaxError Unexpected end of JSON input

Sentry gets a feedback without a screenshot, but a tunnel backend endpoint gets error from sentry response too SyntaxError Unexpected end of JSON input

[mydea]

hey, I guess the tunnel is not handling attachments properly 🤔 cc @ryan953 or @AbhiPrasad any idea how the tunnel has to be adjusted so that tunneling an attachment would work?

[AbhiPrasad]

attachments should work afaik, we shouldn't do anything with the envelope. @timfish do any problems here ring a bell for you?

[timfish]

I think the issue is that you can't safely convert entire envelopes containing non-text attachments to a string like this:

  const envelopeBytes = await request.arrayBuffer();
  const envelope = new TextDecoder().decode(envelopeBytes);

You need to slice the header from the envelope at the first newline in bytes before converting in to text:

export const POST: RequestHandler = async ({ request }) => {
  try {
    const envelopeBytes = new Uint8Array(await req.arrayBuffer());
    const headerEnd = envelopeBytes.indexOf(0x0a); // Find the first newline
    const headerBytes = envelopeBytes.subarray(0, headerEnd);
    const header = JSON.parse(new TextDecoder().decode(headerBytes));
    const dsn = new URL(header['dsn']);
    const project_id = dsn.pathname?.replace('/', '');

    if (dsn.hostname !== SENTRY_HOST) {
      throw new Error(`Invalid sentry hostname: ${dsn.hostname}`);
    }

[timfish]

I'll test the code changes above and make the appropriate changes to the docs where that code sample comes from:
https://docs.sentry.io/platforms/javascript/guides/nextjs/troubleshooting/#using-the-tunnel-option

[anatoliy-t7]

@timfish thank you for helping, but I still getting same error after changed the code

export const POST: RequestHandler = async ({ request }) => {
  try {
    const envelopeBytes = new Uint8Array(await request.arrayBuffer());
    const headerEnd = envelopeBytes.indexOf(0x0a); // Find the first newline
    const headerBytes = envelopeBytes.subarray(0, headerEnd);
    const header = JSON.parse(new TextDecoder().decode(headerBytes));
    const dsn = new URL(header['dsn']);
    const project_id = dsn.pathname?.replace('/', '');

    if (dsn.hostname !== SENTRY_HOST) {
      throw new Error(`Invalid sentry hostname: ${dsn.hostname}`);
    }

    if (!project_id || !SENTRY_PROJECT_IDS.includes(project_id)) {
      throw new Error(`invalid sentry project id: ${project_id}`);
    }

    const upstream_sentry_url = `https://${SENTRY_HOST}/api/${project_id}/envelope/`;

    await fetch(upstream_sentry_url, {
      method: 'POST',
      body: envelopeBytes
    });

    return json({ status: 200 });
  } catch (e) {
    logger.error('error tunneling to sentry', e);

    return json({ error: 'error tunneling to sentry' }, { status: 500 });
  }
};

ERROR: error tunneling to sentry:
SyntaxError: Unexpected end of JSON input

[timfish]

Looks like I need to do more testing!

[timfish]

@anatoliy-t7 can you share a project that reproduces this error or log the result of new TextDecoder().decode(headerBytes) so I can see why it cannot be converted to JSON?

[anatoliy-t7]

@timfish
Looks like when I send it with a screenshot, it does not go through the tunnel

Without a screenshot:

TUNNEL LOG of new TextDecoder().decode(headerBytes) ->  {"event_id":"9c3b730f7fc749f492678f137cc781a9","sent_at":"2025-04-24T10:26:29.807Z","sdk":{"name":"sentry.javascript.sveltekit","version":"9.13.0"},"dsn":"hidden","trace":{"environment":"dev","release":"dev","public_key":"hidden","trace_id":"1003740a940c7217cbadb09f8da0a1a4","transaction":"GET /(protected)/surveys","sampled":"true","sample_rand":"0.6976181215617028","sample_rate":"1"}}

2025-04-24 10:26:34.877 ERROR   /src/hooks.server.ts:59 dev     handle error {
  status: 500,
  message: 'Internal Error',
  error: SyntaxError: Unexpected end of JSON input

With a screenshot:

2025-04-24 10:28:56.447 ERROR   /src/hooks.server.ts:59 dev     handle error {
  status: 500,
  message: 'Internal Error',
  error: SyntaxError: Unexpected end of JSON input

[tcurdt]

@anatoliy-t7 can you please also share the content of new TextDecoder().decode(headerBytes) for both cases?

[anatoliy-t7]

@tcurdt log on /sentry does not catch anything when I send feedback with a screenshot, this is why I wrote it does not go through the tunnel

[timfish]

No idea what's going on here, doesn't make much sense on the surface.

If you can supply a reproduction I can take a look and debug it!

[tcurdt]

@timfish since it sounds like the frontend code is not even reaching the tunnel - maybe you could just have a look on our test environment?

https://test.edkimo.com/

If that's an option we can enable the feedback widget.
And if that does not help we need to see how we can create a test case.

[tcurdt]

We could make the browser transport include a content-type when sending via the tunnel. We can't include this by default because it can impact CORS.

Sounds like a plan.
Here is the SvelteKit issue btw:

sveltejs/kit#11842

[timfish]

It's also worth noting that in my testing it looks like the tunnel endpoint gets instrumented by Sentry. If transactions are being captured for these incoming requests you're going to have a server transaction for every frontend envelope sent!

[tcurdt]

It's also worth noting that in my testing it looks like the tunnel endpoint gets instrumented by Sentry. If transactions are being captured for these incoming requests you're going to have a server transaction for every frontend envelope sent!

You mean the transaction itself will also show up in sentry?
IIRC there is some URL filtering to avoid that, right?

[timfish]

Sentry automatically instruments the Node http server, so every POST to /sentry captures a transaction:

[tcurdt]

Right ... but wasn't there a way to remove some of those?
I remember reading about that somewhere?
What about:

tracePropagationTargets
shouldCreateSpanForRequest

[timfish]

but wasn't there a way to remove some of those?

Yes, you can manually filter these out via ignoreTransactions in the server Sentry.init.

We are planning some improvements to the tunnel option, including making it simpler and more streamlined to setup. Filtering out these transactions automatically can go on that list!

[tcurdt]

Ok, you can actually work around this already by adding the headers to the transportOptions:

First tests show this to be working. I'll wait for some more testing.
But I am carefully optimistic this resolves this issue for for us for now.

Thanks for your help!

[Lms24]

Thanks for the response! I added the Waiting for: Community label which will auto-close this issue in a few weeks if there are no more replies. Feel free to let us know if it's working and/or close the issue yourself. In case there are still problems, just let us know, too :)