`Cross-Origin Read Blocking (CORB) blocked cross-origin response` to tunnel

[fisprak]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/react

SDK Version

7.3.0

Framework Version

React 17.0.2

Link to Sentry event

No response

Steps to Reproduce

1. Use tunnel option in Sentry.
2. Open page with Sentry in Brave Browser (Chrome/103) with dev tools opened.
3. See an warning about CORB in browser console.

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://tunnel.example.test/ with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Expected Result

No warning about Cross-Origin Read Blocking (CORB) in console.

Actual Result

A warning about Cross-Origin Read Blocking (CORB) in console.

[lforst]

Hi, sorry for the delay. How exactly are you using the tunnel option? What does the server look like that you're pointing the tunnel to. Reading into that CORB stuff, it seems like we/you need to add a content-type to the server that's tunnelling, but that's just a suspicion.

[fisprak]

@lforst, we use a Cloudflare Worker as the tunnel server. It's based on the Next.js example from Sentry.

We use Toucan.js because of CF Workers but it shouldn't cause this problem according to code.

Here's the full code.

import Toucan from "toucan-js";

export interface Env {
  SENTRY_DSN: string;
}

async function sendSentryEvent(
  request: Request,
  env: Env,
  context: ExecutionContext,
): Promise<Response> {
  const envelope = await request.text();
  const pieces = envelope.split("\n");

  const header = JSON.parse(pieces[0]);

  const dsnFromRequest = new URL(header.dsn);

  const configuredSentryDsn = new URL(env.SENTRY_DSN);

  if (dsnFromRequest.host !== configuredSentryDsn.host) {
    throw new Error(`Invalid host: ${dsnFromRequest.host}`);
  }

  const projectId = dsnFromRequest.pathname.startsWith("/")
    ? dsnFromRequest.pathname.slice(1)
    : dsnFromRequest.pathname;
  if (dsnFromRequest.pathname !== configuredSentryDsn.pathname) {
    throw new Error(`Invalid project id: ${projectId}`);
  }

  const init = {
    headers: {
      "Content-Type": "application/json;charset=UTF-8",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "HEAD, POST, OPTIONS",
      "Access-Control-Max-Age": "1000",
      "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With",
      Vary: "Origin",
    },
  };

  const url = `https://${configuredSentryDsn.host}/api/${projectId}/envelope/`;

  const response = await fetch(url, {
    ...init,

    method: "POST",
    body: envelope,
  });

  const results = JSON.stringify(await response.json());

  return new Response(results, init);
}

function initSentryClient(
  request: Request,
  env: Env,
  context: ExecutionContext,
): Toucan {
  return new Toucan({
    dsn: env.SENTRY_DSN,
    context,
    request,
  });
}

export default {
  async fetch(
    request: Request,
    env: Env,
    context: ExecutionContext,
  ): Promise<Response | null> {
    const sentry = initSentryClient(request, env, context);

    sentry.setTag("app", "sentry-tunnel");

    try {
      const requestUrl = new URL(request.url);

      if (request.method !== "POST") {
        return new Response(null, {
          status: 400,
        });
      }

      if (requestUrl.pathname === "/") {
        // Tunnel Sentry event report
        return await sendSentryEvent(request, env, context);
      } else {
        return null;
      }
    } catch (err) {
      console.error(err);
      sentry.captureException(err);

      return new Response(null, {
        status: 400,
      });
    }
  },
};

[lforst]

Can you try attaching a Content-Type: application/json to the response the browser will receive? I think Next.js does that automatically and I don't know if Toucan does that. Thanks!

Side note: If you could provide a reproduction repo of some sort we can debug this much more effectively!

[github-actions[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀