The INP parameter is not displayed on the dashboard if the tunnel option is active

[andreamaiolo]

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

SDK Version

7.110.1

Framework Version

React 18.2.0

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

When browsing a page with the tunnel option enabled, our server receives envelopes which we then POST to Sentry.

Expected Result

We expect all information that our server processes to be displayed on the dashboard, including the INP parameter.

This is, for example, an envelope that we receive on the server and POST it to Sentry, it gets lost.

{"sent_at":"2024-04-17T08:02:11.023Z","dsn":"https://xxx.ingest.sentry.io/xxx"}
{"type":"span"}
{"data":{"sentry.origin":"manual","sentry.op":"ui.interaction.click","release":"unknown","environment":"twbox","transaction":"/places"},"description":"<unknown>","op":"ui.interaction.click","span_id":"8a7171204d3da7bc","start_timestamp":1713340917.8902,"timestamp":1713340918.1701999,"trace_id":"ff475ce1d41b4f32955fb9e44e5fd749","origin":"manual","exclusive_time":280,"measurements":{"inp":{"value":280,"unit":"millisecond"}}}

Another thing is that the description is <unknown>, not sure why.

Actual Result

No INP information is shown, as in the screenshot:

[lforst]

How did you configure your tunnel? What does it look like, and to which exact url/dsn does it forward the events?

[andreamaiolo]

This is our tunnel:

import { SENTRY_HOST, SENTRY_PROJECT } from 'js/constants/sentry';
import { Request, Response } from 'express';
import { httpPost } from 'js/common/http';

class SentryDsnError extends Error {
  constructor(message: string) {
    super(message);

    this.name = 'SentryDsnError';
  }
}

const getDsn = (envelope: string) => {
  const piece = envelope.slice(0, envelope.indexOf('\n'));
  const header = JSON.parse(piece);
  const dsn = new URL(header.dsn);

  if (dsn.hostname !== SENTRY_HOST) {
    throw new SentryDsnError(`Invalid Sentry host: ${dsn.hostname}`);
  }

  return dsn;
};

const getProjectId = (dsn: URL) => {
  const projectId = dsn.pathname.substring(1);

  if (projectId !== SENTRY_PROJECT) {
    throw new SentryDsnError(`Invalid Project ID: ${projectId}`);
  }

  return projectId;
};

export const sentryTunnel = async (req: Request, res: Response) => {
  const envelope = req.body;

  try {
    const dsn = getDsn(envelope);
    const projectId = getProjectId(dsn);
    const url = `https://${SENTRY_HOST}/api/${projectId}/envelope/`;

    await httpPost(url, {
      dataRaw: envelope,
      requestHeaders: {
        'Content-Type': 'application/x-sentry-envelope',
      },
    });

    return res.sendStatus(204);
  } catch (e) {
    if (e instanceof SentryDsnError) {
      return res.status(400).send({ message: e.message });
    }

    return res.sendStatus(204);
  }
};

DSN: https://xxx@xxx.ingest.sentry.io/xxx
URL: https://xxxx.ingest.sentry.io/api/xxx/envelope/

We only encounter the problem when this package is handled:

{"sent_at":"2024-04-17T08:02:11.023Z","dsn":"https://xxx@xxx.ingest.sentry.io/xxx"}
{"type":"span"}
{"data":{"sentry.origin":"manual","sentry.op":"ui.interaction.click","release":"unknown","environment":"twbox","transaction":"/places"},"description":"<unknown>","op":"ui.interaction.click","span_id":"8a7171204d3da7bc","start_timestamp":1713340917.8902,"timestamp":1713340918.1701999,"trace_id":"ff475ce1d41b4f32955fb9e44e5fd749","origin":"manual","exclusive_time":280,"measurements":{"inp":{"value":280,"unit":"millisecond"}}}

In all other cases, the tunnel works and we see data on the dashboard

[lforst]

As a last bit of information, would you mind sharing a link to the project where you would expect events to show up? Thank you! In the meanwhile I have forwarded this internally and we're taking a look.