Tests for Next.js middleware and edge routes

[lforst]

We should add tests for Next.js middleware and edge routes. E2E tests would be fitting since we need to actually verify the build process.

[AbhiPrasad]

From @onurtemizkan on discord:

The only thing about that every Edge route has separate globals / threads so, our current logic of keeping events/transactions in the global object doesn't work. I was thinking about creating a little express server which keeps events/transactions on it's own global and test with querying it.

[lforst]

From @onurtemizkan on discord:

The only thing about that every Edge route has separate globals / threads so, our current logic of keeping events/transactions in the global object doesn't work. I was thinking about creating a little express server which keeps events/transactions on it's own global and test with querying it.

Damn. Nice job figuring that out. Would have never guessed...

[onurtemizkan]

In summary what I have done was:

For e2e tests:

• I set up handlers like below:

import type { NextApiRequest, NextApiResponse } from 'next';
import * as Sentry from '@sentry/nextjs';

// ### EDGE CONFIG ###
let config = {};

if (process.env.USE_EDGE) {
  config = { runtime: 'edge' };
}

export { config };
// ### END ###

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const transaction = Sentry.startTransaction({ name: 'test-transaction', op: 'e2e-test' });
  Sentry.getCurrentHub().configureScope(scope => scope.setSpan(transaction));

  const span = transaction.startChild();

  span.finish();
  transaction.finish();

  Sentry.flush().then(() => {
    res.status(200).json({
      transactionIds: global.transactionIds,
    });
  });
}

• Added a middleware.ts like:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(req: NextRequest) {
  return NextResponse.next();
}

export const config = {
  matcher: '/api/(.*)',
};


- And a sentry.edge.config.ts like:
// This file configures the initialization of Sentry on the browser.
// The config you add here will be used whenever a page is visited.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1.0,
  // ...
  // Note: if you want to override the automatic release value, do not set a
  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
  // that it will also get attached to your source maps
});

• The test file is the same as others.

For integration tests:

I have ported the sample test application of @lforst. (Not quite ported, more like integrated into the current integration test app)

Then got stuck because what I mentioned before (separate globals, no nice way of returning transaction / event data from the API calls). So I was planning to implement an run an Express server working as a transaction/event store service for tests.

[github-actions]

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 🥀

[lforst]

Resolved with #8350 and #8355