Auto-wrapping not working for Next.js Dynamic Routes

[adeelejaz]

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

SDK Version

7.57.0

Framework Version

7.57.0

Link to Sentry event

No response

SDK Setup

Sentry.init({
  environment: process.env.NEXT_PUBLIC_SITE_URL === "https://[..]" ? "production" : "development",
  dsn: SENTRY_DSN || "[..]",
  includeLocalVariables: true,
  tracesSampleRate: 0.2,
});

Steps to Reproduce

1. Add a dynamic route when working with the Next.js 13 app directory e.g. app/checkout/[step]/page.jsx
2. Get a warning during build.

Expected Result

Auto-wrapping to work

Actual Result

[@sentry/nextjs] Could not instrument /[..]/app/checkout/[step]/page.jsx. An error occurred while auto-wrapping:
SyntaxError: Unexpected token (14:55) in __SENTRY_WRAPPING_TARGET_FILE__.cjs

[lforst]

Hey, thanks for writing in!

I sadly cannot reproduce this. Would you mind sharing a reproduction setup? (git repo we could pull or stackblitz or similar)

I have a suspicion that app/checkout/[step]/page.jsx might simply have a syntax error.

[AbhiPrasad]

Closing this issue for cleanup. Please re-open if this still applies. Thanks!

[mayrsascha]

Still happening here. Works in Next.js 13.4.7 and fails when I try to upgrade to Next.js 13.4.9. I don't have an app directory (still using pages directory). It happens with dynamic routes pages/coin/[id].js as well as with multiple static routes.

Standard Next.js setup according to the docs,
"@sentry/nextjs": "^7.69.0",
"@sentry/node": "^7.69.0",
"@sentry/tracing": "^7.69.0",

Unfortunately I'm unable to share code as there is an NDA and I can't reproduce it with a minimal example either.

[lforst]

@mayrsascha Without proper reproduction we unfortunately not help you. I recommend upgrading nextjs to the newest version and opening a new issue if you have more information to share (your setup, full error messages, and so on)

[mayrsascha]

@lforst I checked again, there is one thing I can share here:

Again quickly about my setup:

"@sentry/nextjs": "^7.69.0",
"@sentry/node": "^7.69.0",
"@sentry/tracing": "^7.69.0",
"next": "^13.4.9",

The error happens on the _error.js page that was generated by @sentry/wizard (as described in the NextJS guide.

Here again the content of _error.js:

import NextErrorComponent from 'next/error';

import { captureException, flush } from '@sentry/nextjs';

const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => {
  if (!hasGetInitialPropsRun && err) {
    // getInitialProps is not called in case of
    // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
    // err via _app.js so it can be captured
    captureException(err);
    // Flushing is not required in this case as it only happens on the client
  }

  return <NextErrorComponent statusCode={statusCode} />;
};

MyError.getInitialProps = async (context) => {
  const errorInitialProps = await NextErrorComponent.getInitialProps(context);

  const { res, err, asPath } = context;

  // Workaround for https://github.com/vercel/next.js/issues/8592, mark when
  // getInitialProps has run
  errorInitialProps.hasGetInitialPropsRun = true;

  // Returning early because we don't want to log 404 errors to Sentry.
  if (res?.statusCode === 404) {
    return errorInitialProps;
  }

  // Running on the server, the response object (`res`) is available.
  //
  // Next.js will pass an err on the server if a page's data fetching methods
  // threw or returned a Promise that rejected
  //
  // Running on the client (browser), Next.js will provide an err if:
  //
  //  - a page's `getInitialProps` threw or returned a Promise that rejected
  //  - an exception was thrown somewhere in the React lifecycle (render,
  //    componentDidMount, etc) that was caught by Next.js's React Error
  //    Boundary. Read more about what types of exceptions are caught by Error
  //    Boundaries: https://reactjs.org/docs/error-boundaries.html

  if (err) {
    captureException(err);

    // Flushing before returning is necessary if deploying to Vercel, see
    // https://vercel.com/docs/platform/limits#streaming-responses
    await flush(2000);

    return errorInitialProps;
  }

  // If this point is reached, getInitialProps was called without any
  // information about what the error might be. This is unexpected and may
  // indicate a bug introduced in Next.js, so record it in Sentry
  captureException(
    new Error(`_error.js getInitialProps missing data at path: ${asPath}`),
  );
  await flush(2000);

  return errorInitialProps;
};

export default MyError;

And this is the error I'm seeing:

[@sentry/nextjs] Could not instrument /vercel/path0/pages/_error.js. An error occurred while auto-wrapping:
--
17:57:02.279 | SyntaxError: Unexpected token (25:15) in __SENTRY_WRAPPING_TARGET_FILE__.cjs
17:57:02.282 | [@sentry/nextjs] Could not instrument /vercel/path0/pages/_error.js. An error occurred while auto-wrapping:
17:57:02.283 | SyntaxError: Unexpected token (25:15) in __SENTRY_WRAPPING_TARGET_FILE__.cjs

My sentry.server.config.js:

// This file configures the initialization of Sentry on the server.
// The config you add here will be used whenever the server handles a request.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import { init } from '@sentry/nextjs';

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

init({
  dsn: SENTRY_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
});

My sentry.client.config.js:

// 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";

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn: SENTRY_DSN,
  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and sample at a lower rate in production
  replaysSessionSampleRate: 0.1,
  // If the entire session is not sampled, use the below sample rate to sample
  // sessions when an error occurs.
  replaysOnErrorSampleRate: 1.0,

  integrations: [new Sentry.Replay()],
});

My sentry.edge.config.js:

// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
// The config you add here will be used whenever one of the edge features is loaded.
// Note that this config is unrelated to the Verel Edge Runtime and is also required when running locally.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

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

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn: SENTRY_DSN,

  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,
});

Again: this works with NextJS 13.4.7 for me. When I try to upgrade to NextJS 13.4.9 it fails. Not just for this NextJS page, but for others as well (can't share those unfortunately)

[lforst]

@mayrsascha Can you please try upgrading to the latest Next.js version? Thanks!

Other than that we need full and proper reproduction. In general this error is not dangerous. You application will still work. The error doesn't even mean that Sentry did something wrong. It basically means that the SDK encountered invalid syntax when wepback passed the /vercel/path0/pages/_error.js file to our Webpack plugin.