Sentry headers are not sent in sentry/browser, instead it is sent in query params

[SamvelRaja]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases

Package + Version

• @sentry/browser
• @sentry/node
• raven-js
• raven-node (raven for node)
• other:

Version:

4.6.4

Description

Though from the new sentry/browser sdk the support for sending sentry_secret is dropped.
It is not sending the remaining query params

• sdk_version
• sentry_key
  in headers. And there is no option to handle configure this as well.
  I hope this is supported in @sentry/node.

Sample url generated in @sentry/browser is

https://[DSN]/?sentry_key=SENTRY_KEY&sentry_version=7

[HazAT]

Can you elaborate how this surfaces into an error or bug on your side?

[SamvelRaja]

@HazAT Thanks for the response.
It is not the bug or error, It is the expected practice to send the information in headers rather in queryparams.

https://docs.sentry.io/development/sdk-dev/overview/#authentication

Hence, I expect this to be available in the SDK..

[HazAT]

Yeah, I mean since this is not breaking anything right now we won't change it since we have more important things to work on. We are open to receiving PRs :)

[SamvelRaja]

@HazAT Thanks 👍

[jetxr]

EasyPrivacy is blocking any POST requests with ?sentry_key in the URL. So ad-blockers using EasyPrivacy list (e.g. uBlock Origin) end up blocking Sentry even when using a relay.

Is it possible to make this configurable? I understand sending the information in headers will cause a pre-flight request.. But it's kind of essential to bypass ad-blockers when using a relay.

[kamilogorek]

@jetxr we are in the process of writing a workaround for this issue. I'll keep this issue updated once we release it.

[alexm92]

I'm also looking forward to this workaround.

1. Do you have any estimation on when it'll be ready?
2. Do you need any help (I could try to contribute if needed)?

[kamilogorek]

@alexm92 the implementation on the SDK side is already done here - #3521
We just need few changes in the Sentry itself now to make it work.

[kamilogorek]

The original issue seems to be outdated. As for dealing with adblockers, the solution has been shipped in 6.7.0 and explained in the new documentation section here: https://docs.sentry.io/platforms/javascript/troubleshooting/#using-the-tunnel-option

Cheers!

[alexm92]

Hi @kamilogorek,

I just tried to use this and I was unable to make it work. I get 400 Bad Request with {"detail":"invalid event envelope","causes":["invalid item header","missing field `type` at line 1 column 21"]}

Here's my code:

async function handleRequest(request) {
  const envelope = await request.text();

  const pieces = envelope.split('\n', 2);
  const header = JSON.parse(pieces[0]);

  if (header?.dsn) {
    console.log('Found DSN', header.dsn);
    const dsn = new URL(header.dsn);

    const projectId = parseInt(dsn.pathname.slice(1)
      .split('/')[0]);
    const options = {
      headers: {
        'Content-Type': 'text/plain;charset=UTF-8',
      },
      method: 'POST',
      body: envelope,
    };

    const response = await fetch(`https://${dsn.host}/api/${projectId}/envelope/`, options);
    // do something with response
  }

  return new Response('OK', {
    headers: {
      'Content-Type': 'text/plain',
      'Access-Control-Allow-Origin': '*',
    },
  })
}

Am I doing something wrong?

[kamilogorek]

@alexm92 no, I messed up, sorry about that. Fix is on it's way #3676
In the meantime, here's a quick workaround:

const parseEnvelope = (body) => {
  const [envelopeHeaderString, itemHeaderString, itemString] = body.split("\n");

  return {
    envelopeHeader: JSON.parse(envelopeHeaderString),
    itemHeader: JSON.parse(itemHeaderString),
    item: JSON.parse(itemString),
  };
};

async function handleRequest(request) {
  const body = await request.text();
  const { envelopeHeader, itemHeader, item } = parseEnvelope(body);

  if (envelopeHeader.dsn) {
    const dsn = new URL(header.dsn);
    itemHeader.type = itemHeader.type ?? 'event';
    const envelope = `${JSON.stringify(envelopeHeader)}\n${JSON.stringify(itemHeader)}\n${JSON.stringify(item)}`
    const options = {
      headers: {
        'Content-Type': 'application/octet-stream',
      },
      method: 'POST',
      body: envelope,
    };

    const response = await fetch(`https://${dsn.host}/api/${dsn.pathname}/envelope/`, options);
    // do something with response
  }

  return new Response('OK', {
    headers: {
      'Content-Type': 'text/plain',
      'Access-Control-Allow-Origin': '*',
    },
  })
}

[alexm92]

Awesome, thanks @kamilogorek

Did some more changes and ended up using the following as serverless API on Cloudflare Workers.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

const corsAllowedDomains = new Set([
  'https://example.com',
]);


/**
 * Process the envelope header sent by Sentry client
 *
 * @param body
 * @returns {{item: any, envelopeHeader: any, itemHeader: any}}
 */
const parseEnvelope = (body) => {
  const [envelopeHeaderString, itemHeaderString, itemString] = body.split("\n");

  return {
    envelopeHeader: JSON.parse(envelopeHeaderString),
    itemHeader: JSON.parse(itemHeaderString),
    item: JSON.parse(itemString),
  };
};


/**
 * Respond with OK or Sentry response
 *
 * @param {Request} request
 */
async function handleRequest(request) {
  const defaultResponse = new Response('OK');
  const originHeader = request.headers.get('Origin');

  if (corsAllowedDomains.has(originHeader)) {
    defaultResponse.headers.set('Access-Control-Allow-Origin', originHeader);
  }

  const body = await request.text();
  const { envelopeHeader, itemHeader, item } = parseEnvelope(body);

  if (envelopeHeader?.dsn) {
    const dsn = new URL(envelopeHeader.dsn);
    itemHeader.type = itemHeader.type ?? 'event';

    const envelope = `${JSON.stringify(envelopeHeader)}\n${JSON.stringify(itemHeader)}\n${JSON.stringify(item)}`
    const projectId = parseInt(dsn.pathname.slice(1).split('/')[0]);
    const options = {
      headers: {
        'Content-Type': 'application/octet-stream',
      },
      method: 'POST',
      body: envelope,
    };

    // Proxy request to Sentry ingest
    const sentryResponse = await fetch(`https://${dsn.host}/api/${projectId}/envelope/`, options);

    // Reconstruct the Response object to make its headers mutable.
    const response = new Response(sentryResponse.body, sentryResponse);
    if (corsAllowedDomains.has(originHeader)) {
      response.headers.set('Access-Control-Allow-Origin', originHeader);
    }

    return response;
  }

  return defaultResponse;
}

[ping-localhost]

Thank you @alexm92 (and @kamilogorek) this tunnel is very useful. That said, I noticed that Sentry session tracking events do not send the DSN. Is that on purpose?

[kamilogorek]

Thanks for catching that @ping-localhost #3680

[kamilogorek]

@ping-localhost @alexm92 both fixes released in 6.7.1.

You can remove this part from your code:

itemHeader.type = itemHeader.type ?? 'event';
const envelope = `${JSON.stringify(envelopeHeader)}\n${JSON.stringify(itemHeader)}\n${JSON.stringify(item)}`

And pass body directly to the request instead of envelope.