Inspect why Sentry plugin breaks builds on CloudFlare Pages

[yangwao]

@preschian Okay, it's a sentry plugin. Seems builds.

• https://github.com/nuxt-community/sentry-module

Originally posted by @yangwao in #6470 (comment)

[preschian]

after some further testing: preschian#67

• netlify: ok
• vercel: ok
• cf-pages: error

It seems like a compatibility issue with the current nitro version on cf-pages
or
there is something wrong on cf-pages

[yangwao]

We are so back when I've added Sentry AUTH token

18:51:49.040 | ^
-- | --
18:51:49.057 | 34099:       "img/logo-talisman.4e0808a.svg",
18:51:49.057 | 34100:       "img/logo-enkrypt.8a571eb.png",
18:51:49.058 | [fatal] Unexpected token (Note that you need plugins to import files that are not JavaScript)
18:51:49.058 | at error (node_modules/.pnpm/rollup@2.79.1/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
18:51:49.058 | at Module.error (node_modules/.pnpm/rollup@2.79.1/node_modules/rollup/dist/es/shared/rollup.js:12429:16)
18:51:49.058 | at Module.tryParse (node_modules/.pnpm/rollup@2.79.1/node_modules/rollup/dist/es/shared/rollup.js:12806:25)
18:51:49.058 | at Module.setSource (node_modules/.pnpm/rollup@2.79.1/node_modules/rollup/dist/es/shared/rollup.js:12711:24)
18:51:49.059 | at ModuleLoader.addModuleSource (node_modules/.pnpm/rollup@2.79.1/node_modules/rollup/dist/es/shared/rollup.js:21959:20)
18:51:49.158 | Finished
18:51:49.158 | Note: No functions dir at /functions found. Skipping.
18:51:49.159 | Validating asset output directory
18:51:52.017 | Deploying your site to Cloudflare's global network...
18:51:53.228 | Parsed 1 valid header rule.
18:51:55.620 | Uploading... (361/368)
18:51:56.220 | Uploading... (363/368)
18:51:57.518 | Uploading... (365/368)
18:51:58.623 | Uploading... (368/368)
18:51:58.624 | ✨ Success! Uploaded 7 files (361 already uploaded) (4.11 sec)
18:51:58.624 |  
18:51:59.319 | ✨ Upload complete!
18:52:07.529 | Success: Assets published!
18:52:08.578 | Success: Your site was deployed!

SENTRY_AUTH_TOKEN - 173e9a5537c643bd999c1f1f4b27a8a9467a51b5363b4b32b3134fe63b4eb664

[preschian]

We are so back when I've added Sentry AUTH token

hhmm, interesting 🤔

I added SENTRY_AUTH_TOKEN in preview branch (test-cf-preview), seems fine

Details

Uploading... (368/368)

maybe that is still deploying old commits? Because right now, our files are Uploading... (414/414)

[preschian]

maybe @prury want to test also?

how to test:

1. fork nft-gallery
2. create an account on cloudflare pages
3. integrate forked nft-gallery to cloudflare pages
4. add SENTRY_AUTH_TOKEN as env

send me a discord message if you need pairing

[prury]

maybe @prury want to test also?

how to test:

1. fork nft-gallery

2. create an account on cloudflare pages

3. integrate forked nft-gallery to cloudflare pages

4. add `SENTRY_AUTH_TOKEN` as env

send me a discord message if you need pairing

yup! will need your assistance

[preschian]

oh, now, breaks on netlify deployment https://app.netlify.com/sites/koda-canary/deploys/64d1fb67f867ea0007170f88

error on the other platform can be easily fixed after retry the deployment

[preschian]

Now, it is an intermittent error, and we need to retry the deployment if show up the error again. I don't know what the root cause is 🥲

It's time to move to Vite, I guess. Currently, we are still using webpack in nuxt-bridge

[preschian]

I will remove SENTRY_AUTH_TOKEN in preview branch for now

[preschian]

It would be good if someone could find the root cause cc @kodadot/internal-dev

For context: there are no changes from the Cloudflare pages dashboard, but somehow when trying to deploy it to production, it throws the error. first occurrence #6470 (comment)

[yangwao]

I will remove SENTRY_AUTH_TOKEN in preview branch for now

Yes, please leave it w/o SENTRY token, I prefer working build than reporting Sentry from broken build 😄
I hope we'll figure out tbh, maybe some issue on our side.

• Towards Vue 3 / Nuxt 3 migration roadmap #2690

Probably time to check on Vite too

• Add Vite to main so we can be at awesome-vite #1418

[preschian]

Confusing part was it works well on my forked version https://main.nft-gallery-1hj.pages.dev/

wanna try to upload it through gh-actions? @yangwao
run pnpm generate on gh-actions, and then upload it using this https://github.com/cloudflare/pages-action

[preschian]

wanna try to upload it through gh-actions? @yangwao run pnpm generate on gh-actions, and then upload it using this cloudflare/pages-action

oh nvm, it also error on github actions

[yangwao]

wanna try to upload it through gh-actions? @yangwao
run pnpm generate on gh-actions, and then upload it using this cloudflare/pages-action

uh sounds pretty complicated, keep it simple 😄

[preschian]

The Journey

Hi, I want to share my journey here after trying some stuff to validate the assumptions. Here are some assumptions that seem not valid

1. SENTRY_AUTH_TOKEN was the problem. Ref: #6470 (comment).

Last week, I thought that was the main problem. Because, in the previous week, the build worked well after we removed that from environment variables. Unfortunately, last night we faced the same error again, even though we pulled the env

You can see in the screenshot below that I only put PNPM_VERSION in the environment variables section. But the build still has an error in the "Build log" section.

screenshot fail

Then I just retried several times until it worked. You can see this in the screenshot below. Same env, same code, and then the build works

screenshot success

I already tried to remove sentry-related packages also, but it still fails. Here is the commit. Here is the gh-actions logs. Here is the PR.

2. Cloudflare Pages was the problem. Ref: #6518 (comment)

I thought that the error was only in the Cloudflare Pages. But, I discovered that it could also be an error on netlify, even locally.

error logs on netlify: https://app.netlify.com/sites/koda-canary/deploys/64d1fb67f867ea0007170f88

error logs on gh-actions: https://github.com/kodadot/nft-gallery/actions/runs/5830455843/job/15811865669

error logs on my local

The tricky part, the error was intermittent and did not correctly return the exit code. So, even though the build was incomplete, CI continued the process. If the error returns the exit code correctly, we can detect the mistake early in our gh-actions.

Last Assumptions

I think that our build steps are within the limits. I found that someone also tried to reduce the total generated files in nuxt generate. Ref: https://stackoverflow.com/q/71890697

Here is another attempt related to building steps

• build: add nuxt-optimisations #6671

Moving forward to Nuxt3

I hope we can find a way to use Nuxt3 + Vite immediately. So far, I have only one option to use Nuxt3 #6429 right away. But, tbh, I want that POC for the last option because the most significant downside of my POC was that we needed to create a component from scratch.

Feel free to share if someone has a better alternative to migrate to Nuxt3.

[yangwao]

I think that our build steps are within the limits.

We hit this because we are trying to process too many components at once or..? I haven't slept well today, so asking 😄

[vikiival]

I haven't slept well today, so asking 😄

Imo what was mentioned in SO is that cloudlfare has limits for files

https://developers.cloudflare.com/pages/platform/limits/

and every component and async component is separated file + blog assets & so

[preschian]

We hit this because we are trying to process too many components at once or..?

Something like that. between so heavy to process or too many files

I haven't slept well today, so asking 😄

😅😅😅

[preschian]

I haven't slept well today, so asking 😄

Imo what was mentioned in SO is that cloudlfare has limits for files

developers.cloudflare.com/pages/platform/limits

this is also could be possible the problem for them in Stackoverflow case

[yangwao]

and every component and async component is separated file + blog assets & so

There are limit 20k files, I usually see low as 6xx files being uploaded. Then it must be something else I guess?

[preschian]

Correct, I'm sure the error in our app is not related to limits on Cloudflare Pages. Because we have evidence that we can face the error on gh-actions, netlify, and even locally. So, I assume there is something related to building steps in our app.

For the person in Stackoverflow, it might be the issue is from limits on cf-pages, or I would say it might be identical with us also if they have under 20k files