Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Next.js with deploy to Cloudflare Pages failed, due to limit of 25 MB, after adding Sentry #13723

Closed
3 tasks done
dimylkas opened this issue Sep 18, 2024 · 6 comments
Closed
3 tasks done
Labels
Package: nextjs Issues related to the Sentry Nextjs SDK

Comments

@dimylkas
Copy link

Is there an existing issue for this?

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

"@sentry/nextjs": "^8.30.0",

Framework Version

"react": "18.3.1", "next": "^14.2.5", "next-intl": "^3.17.2"

Link to Sentry event

Reproduction Example/SDK Setup

sentry.client.config.ts

import { init, replayIntegration } from "@sentry/nextjs";

init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,

  integrations: [replayIntegration()],

  tracesSampleRate: 1,

  replaysSessionSampleRate: 0.1,

  replaysOnErrorSampleRate: 1.0,

  debug: false,
});

sentry.edge.config.ts

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

init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,

  tracesSampleRate: 1,

  debug: false,
});

sentry.server.config.ts

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

init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1,
  debug: false,
});

next.config.js

const withNextIntl = require("next-intl/plugin")();
const { withSentryConfig } = require("@sentry/nextjs");

const intlConfig = withNextIntl(nextConfig);


const autoGenerateConfig = {

    org: "my-org",
    project: "my-org-dev",

    silent: !process.env.CI,

    widenClientFileUpload: true,

    reactComponentAnnotation: {
      enabled: true,
    },

    tunnelRoute: "/monitoring",

    hideSourceMaps: true,

    disableLogger: true,

    automaticVercelMonitors: true,
};

module.exports = withSentryConfig(intlConfig, autoGenerateConfig);

Steps to Reproduce

  1. Setup Next.js with App router
  2. Setup next-intl for translations (! this probably may be skipped, but that's just setup)
  3. Setup Sentry
  4. Deploy to Cloudflare Pages (I've created a simular q there - https://community.cloudflare.com/t/generated-pages-functions-bundle-size/713397)

Expected Result

Successful deploy

Actual Result

During the build, I see that everything is fine and bundle size is correct.

...
| ▲ ┌ ƒ / 1.35 kB 191 kB
| ▲ ├ ○ /_not-found 1.03 kB 188 kB
| ▲ ├ ƒ /[locale] 24 kB 478 kB
| ▲ ├ ƒ /[locale]/(.)login 3.16 kB 321 kB
| ▲ ├ ƒ /[locale]/about-us 343 B 188 kB
...
Build Completed
Build Summary (@cloudflare/next-on-pages v1.13.2)

After i see logs:
Attaching additional modules:

...

next-on-pages-dist/cache/kv.js │ esm │ 0.35 KiB │
next-on-pages-dist/functions/[locale]/(.)login.func.js │ esm │ 1223.31 KiB │
next-on-pages-dist/functions/[locale]/about-us.func.js │ esm │ 1218.56 KiB │
...

Compiled Worker successfully

| Generated Pages Functions bundle size (26809243) is over the limit of 25.0 MiB
| Failed: generating Pages Functions failed. Check the logs above for more information. If this continues for an unknown reason, contact support: https://cfl.re/3WgEyrH

And it's failed because of generated Pages function.

I'm trying to understand, smth wrong with config? But I've followed the steps from docs and use npx
It's a right way that each page is wrapped with "withSentryConfig" and adds additional ±1.2 MB, so we hit the limit.
I've also removed this "withSentryConfig" from next.config and everything become normal
Cloudflare or Sentry issue?

@github-actions github-actions bot added the Package: nextjs Issues related to the Sentry Nextjs SDK label Sep 18, 2024
@andreiborza
Copy link
Member

hi @dimylkas, thanks for writing in. Could you please provide a minimal reproduction repo or stackblitz we can use to investigate this?

@andreiborza
Copy link
Member

cc @AbhiPrasad @lforst

@lforst
Copy link
Member

lforst commented Sep 19, 2024

@dimylkas no need for a repro. The server-side SDK has a certain size. As of now we don't have any plans to decrease its size (admittedly I wouldn't know how as there are certain restrictions around bundling). 25MB is an incredibly small amount.

You can try using the @sentry/node and @sentry/browser SDKs directly which should be smaller. Other than that you can try to reduce your project size through other means.

@dimylkas
Copy link
Author

dimylkas commented Sep 19, 2024

Hi @lforst,

Ok, then just a FYI - that i've prepared example - ( https://github.com/dimylkas/example-nt-cl-sentry-crush )

So, a certain size is bigger than that limit, right? And is there no way to deploy it there? Or communicate to CL about their issue.

Regards,
Dmytro

@andreiborza
Copy link
Member

@dimylkas I'm afraid we can't do much about CF's limit. Maybe you could deploy part of the app to R2? See https://developers.cloudflare.com/pages/platform/limits/#file-size.

@dimylkas
Copy link
Author

dimylkas commented Sep 20, 2024

Hi @andreiborza ,

There are no any assets, from "/[locale]/about-us **343 B** 188 kB" this size you probably see that there is just one div with an h1 element and small text description. As I understood, Next creates the routes, Sentry wraps each route, and at the output we got - /[locale]/about-us.func.js │ esm │ **1218.56 KiB** │ and that's exceed the limit

It's for the history and next user who will face the same problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: nextjs Issues related to the Sentry Nextjs SDK
Projects
Archived in project
Development

No branches or pull requests

3 participants