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