@sentry/next.js 7.31 autoinstrumentation breaks middleware with named export

[connor-baer]

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 package are you using?

@sentry/nextjs

SDK Version

7.31.0

Framework Version

next@12.2.5

Link to Sentry event

No response

SDK Setup

// next.config.js

const { withSentryConfig } = require('@sentry/nextjs');

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  sentry: {
    hideSourceMaps: false,
    autoInstrumentServerFunctions: true,
  },
};

module.exports = withSentryConfig(nextConfig);

// sentry.edge.config.ts

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

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NEXT_PUBLIC_ENV,
});

// sentry.server.config.ts

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

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NEXT_PUBLIC_ENV,
  integrations: [
    new Sentry.Integrations.RequestData({
      include: {
        cookies: false,
        headers: false,
        ip: false,
      },
    }),
  ],
});

Steps to Reproduce

Using the new auto instrumentation of server functions alongside the new edge SDK in @sentry/nextjs 7.31 causes the middleware to crash (see the error below) when using a named export.

Sentry is injecting code into the middleware bundle that should probably only be included in page bundles. This code fails if the middleware is exported as a named function (which is supported and suggested by the Next.js docs). In this case, there is no default export, meaning the pageComponent is undefined.

Problematic code in .next/server/src/middleware.js:

var origModule = /*#__PURE__*/Object.freeze({
    __proto__: null,
    middleware: middleware
});

/*
 * This file is a template for the code which will be substituted when our webpack loader handles non-API files in the
 * `pages/` directory.
 *
 * We use `__SENTRY_WRAPPING_TARGET_FILE__.cjs` as a placeholder for the path to the file being wrapped. Because it's not a real package,
 * this causes both TS and ESLint to complain, hence the pragma comments below.
 */

const userPageModule = origModule ;

const pageComponent = userPageModule.default;

// ⚠️ This is where the TypeError occurs: 
const origGetInitialProps = pageComponent.getInitialProps;
const origGetStaticProps = userPageModule.getStaticProps;
const origGetServerSideProps = userPageModule.getServerSideProps;

const getInitialPropsWrappers = {
  '/_app': _sentry_nextjs__WEBPACK_IMPORTED_MODULE_3__/* .wrapAppGetInitialPropsWithSentry */ .$l,
  '/_document': _sentry_nextjs__WEBPACK_IMPORTED_MODULE_3__/* .wrapDocumentGetInitialPropsWithSentry */ .B4,
  '/_error': _sentry_nextjs__WEBPACK_IMPORTED_MODULE_3__/* .wrapErrorGetInitialPropsWithSentry */ .rO,
};

const getInitialPropsWrapper = getInitialPropsWrappers['/../middleware'] || _sentry_nextjs__WEBPACK_IMPORTED_MODULE_3__/* .wrapGetInitialPropsWithSentry */ .O5;

if (typeof origGetInitialProps === 'function') {
  pageComponent.getInitialProps = getInitialPropsWrapper(origGetInitialProps) ;
}

const getStaticProps =
  typeof origGetStaticProps === 'function'
    ? _sentry_nextjs__WEBPACK_IMPORTED_MODULE_3__.wrapGetStaticPropsWithSentry(origGetStaticProps, '/../middleware')
    : undefined;
const getServerSideProps =
  typeof origGetServerSideProps === 'function'
    ? _sentry_nextjs__WEBPACK_IMPORTED_MODULE_3__.wrapGetServerSidePropsWithSentry(origGetServerSideProps, '/../middleware')
    : undefined;

Expected Result

Sentry does not inject page-related code into the middleware bundle or gracefully handles the named export of the middleware function.

Actual Result

Error [TypeError]: Cannot read properties of undefined (reading 'getInitialProps')
    at <unknown> (evalmachine.<anonymous>:113)
    at Module.4921 (evalmachine.<anonymous>:113:43)
    at __webpack_require__ (evalmachine.<anonymous>:25:43)
    at Module.3946 (evalmachine.<anonymous>:157:19)
    at __webpack_require__ (evalmachine.<anonymous>:25:43)
    at __webpack_exec__ (evalmachine.<anonymous>:306:48)
    at <unknown> (evalmachine.<anonymous>:307:53)
    at Function.__webpack_require__.O (evalmachine.<anonymous>:66:23)
    at <unknown> (evalmachine.<anonymous>:308:56)
    at webpackJsonpCallback (evalmachine.<anonymous>:176:39)
    at <unknown> (evalmachine.<anonymous>:2:61)

[connor-baer]

To be clear, there's a simple workaround: change the middleware function export to a default export.

I filed the issue since I'm sure others will run into the same problem.

[lforst]

Hi, thanks for writing in! A few questions:

• Are you on windows or unix?
• Where is your middleware file located relative to the root of the project?
• What does your middleware file approximately look like?
• Is the middleware file extension .ts(x)?

[connor-baer]

• Are you on windows or unix?

I'm on unix (macOS).

• Where is your middleware file located relative to the root of the project?

src/middleware.ts (next to the /pages folder)

• What does your middleware file approximately look like?

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

import { Params } from 'server/services/auth/constants';
import { OIDC_COOKIES } from 'constants/cookies';

const ALLOW_LIST = [
  // Public pages
  new URLPattern({ pathname: '/:locale?/cookie-preferences' }),
  // ...
];

export function middleware(req: NextRequest): Response {
  const isAllowListed = ALLOW_LIST.some((pattern) => pattern.test(req.nextUrl));

  if (isAllowListed) {
    return NextResponse.next();
  }

  const isUnauthenticated = !req.cookies.get(OIDC_COOKIES.Token);

  if (isUnauthenticated) {
    // Middlewares run in an environment with only a subset of web APIs, therefore it is not possible to import the open-id client here.
    // Instead, redirect the user to the login API route where the necessary APIs are available.
	const rewriteUrl = req.nextUrl.clone();
  	const finalRedirectUrl = req.nextUrl.clone();

    rewriteUrl.pathname = '/api/sso/login';
    rewriteUrl.searchParams.set(Params.RedirectUrl, finalRedirectUrl.pathname);

    return NextResponse.rewrite(rewriteUrl);
  }

  return NextResponse.next();
}

• Is the middleware file extension .ts(x)?

Yes, it's .ts.

[lforst]

Ok, there was an obvious oversight which we hopefully fixed. A patch will go out in an hour or so. Thanks for reporting this!

[lforst]

Hi, the new release is out: https://github.com/getsentry/sentry-javascript/releases/tag/7.31.1 Can you try it out and see if it resolves the issue for you? Thanks!

[connor-baer]

Can confirm that this is fixed in v7.31.1. Thank you!

[lforst]

@connor-baer Thanks for checking!

[Sija]

I'm having similar issue with 7.31.1 on next 11.1.4.

TypeError: index_server.wrapGetStaticPropsWithSentry is not a function

Setting autoInstrumentServerFunctions: false makes it go away.
No src/middleware.js/ts present.