search

cloudflare / next-on-pages

CLI to build and develop Next.js apps for Cloudflare Pages
https://www.npmjs.com/package/@cloudflare/next-on-pages
MIT License
1.28k stars 126 forks source link

[🐛 Bug]: Sentry bloats up bundle size when building with npx @cloudflare/next-on-pages #860

Closed jantiegges closed 1 month ago

jantiegges commented 2 months ago

next-on-pages environment related information

System: Platform: darwin CPU: arm64 Apple M3 Pro Memory: 18 GB Shell: /bin/zsh Package Manager Used: npm (10.5.0)

Relevant Packages: @cloudflare/next-on-pages: 1.13.2 next: 14.2.5 @sentry/nextjs: 8.26.0

Description

When installing Sentry in any Next.js project, it massively bloats the bundle size, going way beyond the limit of 25MB for normal projects. For example, in my project, it increases the bundle size almost by a factor of 10, reaching 70MB. This, of course, is unreasonable, and I suspect that it has something to do with the deduplication that Cloudflare performs during the build, but I'm not really sure.

I think this issue is somehow related to this GitHub issue, which is caused by the vercel/otel package.

Overall, it prevents the use of Cloudflare Pages for Next.js in production at some scale, as there seems to be no working option to use an observability tool. We are overall really satisfied with hosting on Cloudflare, but this might force us to switch soon.

Reproduction

Steps to reproduce:

  1. Clone a next.js project (I will use https://github.com/vercel/ai-chatbot as example)
  2. Create a build using npx @cloudflare/next-on-pages
  3. Check the bundle size in the folder .vercel/output/static/_worker.js (for the above example I arrive at 4.1 MB)
  4. Install Sentry and jump through the setup (npx @sentry/wizard@latest -i nextjs)
  5. Build and check the bundle size again (for the above example I arrive at 15.8 MB)

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

No response

Would you like to help?

cjxe commented 2 months ago

Unfortunately, this issue is not new. 32 days ago, a thread in Sentry's Discord channel was created about this issue. We hope this issue gains more attraction since we also want to integrate Sentry into our project, but we can't.

dario-piotrowicz commented 1 month ago

@jantiegges Thank you for the issue 🙂

(Sorry for the late reply 🙇 )

I've just tried your reproduction steps and it doesn't seem like I am getting the > 15MB worker 😕

I can actually normally deploy the worker: https://0deed5a4.next-on-p-sentry.pages.dev/

Could you try again? Any chance you could share a minimal repro (a hello world app ideally) that presents this error?

(@cjxe as well, I'd really appreciate a minimal reproduction if we could get one 🙏)

jantiegges commented 1 month ago

@dario-piotrowicz Thanks for picking this up, still highly interested in getting this fixed.

I also created a vanilla next.js app, which did not seem to show the issue at first. However, when I added more dummy routes the bundle size of the version with sentry started to bloat up. So the issue seems to be somehow related to the number of routes.

Here is a repository which contains 6 versions (1, 10, 50 routes w/ and w/o sentry) and these are the resulting build sizes:

# Routes Build Size (w/o Sentry) Build Size (w/ Sentry)
1 821 KB 929 KB
10 1.3 MB 7.1 MB
50 3.1 MB 31.5 MB

Hope that helps in pinpointing the issue. Lmk if you need any further help!

irvinebroque commented 1 month ago

@jantiegges do you only see bloated build when using next-on-pages or do you also see when you just run next build?

Do you see it if you try using @opennextjs/cloudflare?

jantiegges commented 1 month ago

@irvinebroque when running just next build I get the following numbers (size of .next/static):

# Routes Build Size (w/o Sentry) Build Size (w/ Sentry)
1 836 KB 5.4 MB
10 827 KB 5.4 MB
50 856 KB 5.4 MB

seems a bit weird but I double checked. Was just quickly trying out @opennextjs/cloudflare but got a build error and don't have the time rn to dive in. Might try it later today, but so far we cannot switch to it anyway, because I think the manual cache revalidation is not implemented yet. Interesting project tho

james-elicx commented 1 month ago

Here is a repository which contains 6 versions (1, 10, 50 routes w/ and w/o sentry) and these are the resulting build sizes:

Thanks for the reproduction. Was super helpful. It looks like Sentry changes the AST node we need to find for deduping webpack chunks.

Can you try out the prerelease in https://github.com/cloudflare/next-on-pages/pull/886#issuecomment-2385697903 and let me know how you get on @jantiegges?

jantiegges commented 1 month ago

@james-elicx Amazing, it fixed it, glad the reproduction helped. I also tested it in our large production application, and it works well there too. That said, I'm starting to get a bit worried since we just hit the 20 MB bundle size, which brings us close to cloudflares 25 MB Limit for pages. I feel like this limit is pretty low for production-level Next.js apps, but anyway, I'm really happy this issue was resolved. Thanks a lot!