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

feat(nextjs): Trace pageloads in App Router #12157

Merged
merged 3 commits into from
May 23, 2024
Merged

Conversation

lforst
Copy link
Member

@lforst lforst commented May 22, 2024

This PR adds a very basic form of App Router pageload tracing to the Next.js SDK. This will allow us to see server component spans inside the trace, alongside the pageload span.

This works by using the new experimental.clientTraceMetadata option added in Next.js 15 (14.3.0-canary.64) which will inject meta tags, containing OTEL trace propagation data. The SDK automatically sets this option when a supporting version is detected.

As a side-effect, this allows the SDK to associate errors thrown in server components (server side) with errors captured in error boundaries in the browser.

Example trace:
Screenshot 2024-05-23 at 11 38 51

What doesn't work yet

This PR does not yet include the functionality to attach serverside spans to the request span of the pageload span. This requires some hack that we can explore in a follow-up PR: #12182

Copy link
Contributor

github-actions bot commented May 22, 2024

size-limit report 📦

Path Size
@sentry/browser 21.74 KB (0%)
@sentry/browser (incl. Tracing) 32.88 KB (0%)
@sentry/browser (incl. Tracing, Replay) 68.25 KB (0%)
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 61.66 KB (0%)
@sentry/browser (incl. Tracing, Replay with Canvas) 72.28 KB (0%)
@sentry/browser (incl. Tracing, Replay, Feedback) 84.33 KB (0%)
@sentry/browser (incl. Feedback) 37.75 KB (0%)
@sentry/browser (incl. sendFeedback) 26.31 KB (0%)
@sentry/browser (incl. FeedbackAsync) 30.73 KB (0%)
@sentry/react 24.43 KB (0%)
@sentry/react (incl. Tracing) 35.88 KB (0%)
@sentry/vue 25.68 KB (0%)
@sentry/vue (incl. Tracing) 34.7 KB (0%)
@sentry/svelte 21.88 KB (0%)
CDN Bundle 24.28 KB (0%)
CDN Bundle (incl. Tracing) 34.35 KB (0%)
CDN Bundle (incl. Tracing, Replay) 68.04 KB (0%)
CDN Bundle (incl. Tracing, Replay, Feedback) 73.02 KB (0%)
CDN Bundle - uncompressed 71.46 KB (0%)
CDN Bundle (incl. Tracing) - uncompressed 101.87 KB (0%)
CDN Bundle (incl. Tracing, Replay) - uncompressed 211.5 KB (0%)
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 223.85 KB (0%)
@sentry/nextjs (client) 35.14 KB (0%)
@sentry/sveltekit (client) 33.48 KB (0%)
@sentry/node 114.1 KB (+0.01% 🔺)
@sentry/aws-serverless 103 KB (+0.01% 🔺)

@lforst lforst marked this pull request as ready for review May 23, 2024 09:51
@lforst lforst requested review from mydea, Lms24 and AbhiPrasad May 23, 2024 09:56
@lforst lforst merged commit d5a332c into develop May 23, 2024
102 checks passed
@lforst lforst deleted the lforst-client-trace branch May 23, 2024 12:12
@steebchen
Copy link

Thanks so much for this, this is awesome! 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants