FIx sentry integrations lazy loading

[r34son]

Description

Using official guide to lazy load integrations https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay/#lazy-loading-replay

Validation

Related Issues

Fixes https://github.com/nodejs/nodejs.org/issues/6621 Related https://github.com/getsentry/sentry-javascript/issues/11460

Check List

• [x] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [x] I have run npx turbo format to ensure the code follows the style guide.
• [x] I have run npx turbo test to check if all tests are passing.
• [x] I have run npx turbo build to check if the website builds without errors.
• [x] I've covered new added functionality with unit tests if necessary.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Apr 10, 2024 5:09pm

[r34son]

Do you have any workflow that checks bundle size? For example i am using https://github.com/hashicorp/nextjs-bundle-analysis Similar pr on mine repo gives -40kb https://github.com/r34son/profile/pull/346#issuecomment-2041414911

[AugustinMauroy]

Do you have any workflow that checks bundle size? For example i am using https://github.com/hashicorp/nextjs-bundle-analysis

used in the past. But since we catch all the roads, it doesn't give us much.

[github-actions[bot]]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 98	🟢 100	🟢 96	🟢 91	🔗
/en/about	🟢 99	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 98	🟢 98	🟢 100	🟢 92	🔗
/en/download	🟢 100	🟢 100	🟢 96	🟢 91	🔗
/en/blog	🟢 99	🟢 100	🟢 96	🟢 92	🔗

[github-actions[bot]]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.09% (582/646)	76.1% (172/226)	91.4% (117/128)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
128	0 :zzz:	0 :x:	0 :fire:	5.489s :stopwatch:

[ovflowd]

It is important to mention that our Sentry integration only gets actually properly eval'd into the bundle on very specific conditions.

Which are not fulfilled by the builds within GitHub Actions.

I would appreciate it if you could run a local build with the sentry integration enabled (you can check next.config.mjs) to check the condition and our sentry config files to check when we will allow it. Generally, it requires an API token from Sentry, so you must use your own Sentry project to test this.

I'm probably not merging this until a screenshot shows the difference between the next.js build output and the webpack bundle analyzer, which shows the differences between the current main branch and this PR.

But Ill check the links youve attached regardless afterwards to see if your claims are valid, Sentry takes a lot of bundle size. But far, the duplication on the bundle is a bug on the webpack bundle analyzer since Sentry gets added both on the Server Side bundle and the Client Side bundle, which can at times show as duplication... This is why React looks like it is being bundled twice on the next bundle analyzer.

Note that I'm more than happy to merge this if actual data of before/after is attached :)

[r34son]

@ovflowd Using @next/bundle-analyzer, also set SENTRY_ENABLE to true to force using sentry locally Selected only chunks that related to sentry Before: After: