Cloudflare Pages Next.js - Build failures

[ilyesm]

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

SDK Version

8.35.0

Framework Version

Next 14.2.15

Link to Sentry event

No response

Reproduction Example/SDK Setup

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

export const onRequest = Sentry.sentryPagesPlugin(context => ({
dsn: context.env.SENTRY_DSN,
tracesSampleRate: 1.0,
}));

Steps to Reproduce

1. Installed @sentry/cloudflare
2. Enabled nodejs_compat_v2 and compatibility_date = "2024-09-23" on wrangler.toml
3. Created middleware as per SDK setup (compiles successfully -- reflects on Cloudflare Dashboard -- does not send any errors or traces to Sentry)
4. Tried adding console.logs to middleware, no logs on console
5. Imported sentry to main /src/app/page.tsx to pass user.id using Sentry.setUser({ id: user?.id });

Expected Result

npm run deploy would compile successfully and deploy the Pages project to Cloudflare

Actual Result

> XXXXXX@0.1.0 deploy
> npm run pages:build && wrangler pages deploy


> XXXXXX@0.1.0 pages:build
> npx @cloudflare/next-on-pages

⚡️ @cloudflare/next-on-pages CLI v.1.13.5
⚡️ Detected Package Manager: npm (10.8.2)
⚡️ Preparing project...
⚡️ Project is ready
⚡️ Building project...
▲  (node:38594) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
▲  (Use `node --trace-deprecation ...` to show where the warning was created)
▲  (node:38594) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
▲  Vercel CLI 32.7.2
▲  WARNING: You should not upload the `.next` directory.
▲  Installing dependencies...
▲  up to date in 736ms
▲  154 packages are looking for funding
▲  run `npm fund` for details
▲  Detected Next.js version: 14.2.16
▲  Detected `package-lock.json` generated by npm 7+
▲  Running "npm run build"
▲  > XXXXXX@0.1.0 build
▲  > next build
▲  ▲ Next.js 14.2.16
▲  - Environments: .env.local
▲  Creating an optimized production build ...
▲  (node:38704) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
▲  (Use `node --trace-deprecation ...` to show where the warning was created)
▲  (node:38714) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
▲  (Use `node --trace-deprecation ...` to show where the warning was created)
▲  (node:38798) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
▲  (Use `node --trace-deprecation ...` to show where the warning was created)
▲  Failed to compile.
▲  node:async_hooks
▲  Module build failed: UnhandledSchemeError: Reading from "node:async_hooks" is not handled by plugins (Unhandled scheme).
▲  Webpack supports "data:" and "file:" URIs by default.
▲  You may need an additional plugin to handle "node:" URIs.
▲  at XXXXXX/node_modules/next/dist/compiled/webpack/bundle5.js:28:401757
▲  at Hook.eval [as callAsync] (eval at create (XXXXXX/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:6:1)
▲  at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (XXXXXX/node_modules/next/dist/compiled/webpack/bundle5.js:13:26012)
▲  at Object.processResource (XXXXXX/node_modules/next/dist/compiled/webpack/bundle5.js:28:401682)
▲  at processResource (XXXXXX/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5308)
▲  at iteratePitchingLoaders (XXXXXX/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4667)
▲  at runLoaders (XXXXXX/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:8590)
▲  at NormalModule._doBuild (XXXXXX/node_modules/next/dist/compiled/webpack/bundle5.js:28:401544)
▲  at NormalModule.build (XXXXXX/node_modules/next/dist/compiled/webpack/bundle5.js:28:403572)
▲  at XXXXXX/node_modules/next/dist/compiled/webpack/bundle5.js:28:82055
▲  
▲  Import trace for requested module:
▲  node:async_hooks
▲  ./node_modules/@sentry/cloudflare/build/esm/async.js
▲  ./node_modules/@sentry/cloudflare/build/esm/pages-plugin.js
▲  ./node_modules/@sentry/cloudflare/build/esm/index.js
▲  ./src/app/page.tsx
▲  
▲  > Build failed because of webpack errors
▲  Error: Command "npm run build" exited with 1

⚡️ The Vercel build (`npx vercel build`) command failed. For more details see the Vercel logs above.
⚡️ If you need help solving the issue, refer to the Vercel or Next.js documentation or their repositories.

(Replaced paths with XXXXXX)

[lforst]

The reason the build is failing is because webpack is unable to resolve node:async_hooks, in particular the node: schema. Normally, Next.js and webpack should be able to do so. Do you have some weird webpack config?

[ilyesm]

Thanks @lforst. Haven't modified the webpack in any way. Tried to troubleshoot by removing from the page.tsx, and it compiles, however, does not log anything despite being on the _middleware.js.

[lforst]

What do you mean by removing from the page.tsx? What setup did you follow?

[lforst]

You need to make sure that you don't bundle the cloudflare SDK into any clientside code.

[ilyesm]

So following https://github.com/getsentry/sentry-javascript/tree/master/packages/cloudflare#readme

Install steps are complete.

Setup (Cloudflare Pages) is complete, but no activity is being displayed on the Sentry dashboard (including simulated unhandled exceptions).

We tried adding the import * as Sentry from '@sentry/cloudflare'; to a client-side page.tsx ('use client') and that was causing the build error. When removed from this page, it builds correctly. Thanks for pointing out it can't be bundled into client-side code.

Any tips on why the middleware isn't sending data to Sentry?

functions/_middleware.js:

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

export const onRequest = Sentry.sentryPagesPlugin(context => ({
    dsn: context.env.SENTRY_DSN,
    tracesSampleRate: 1.0,
}));

[lforst]

I would try adding debug: true to see what is logged.

[ilyesm]

Modifying _middleware.ts to the below does not log anything on the console. This makes me think that the middleware is never being called.

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

export const onRequest = [
// Make sure Sentry is the first middleware
Sentry.sentryPagesPlugin((context) => ({
dsn: "https://x@x.ingest.us.sentry.io/x",
// Set tracesSampleRate to 1.0 to capture 100% of spans for tracing.
tracesSampleRate: 1.0,
debug: true
})),
// Add more middlewares here
];

[ilyesm]

In https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/ there isn't Next.js mentioned. Can you confirm it is compatible at the moment?

[lforst]

Compatibility is very experimental. You're basically on your own. CF pages + Next.js is not a priority for us at the moment.

[ilyesm]

Got it. Might be a Cloudflare Pages issue if the middleware is not even logging something to the console. Will close for now and open again if required.

Thanks, @lforst!