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): Instrument SSR page components #9346

Merged
merged 5 commits into from
Oct 25, 2023

Conversation

lforst
Copy link
Member

@lforst lforst commented Oct 24, 2023

Ref #9152

Adds error reporting around render functions in Next.js page components. This doesn't include tracing for the errors yet. Because it is a bit involved to add tracing we will do it in a follow up PR.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 24, 2023

size-limit report 📦

Path Size
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped) 82.67 KB (0%)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped) 71.78 KB (0%)
@sentry/browser (incl. Tracing) - Webpack (gzipped) 30.94 KB (0%)
@sentry/browser - Webpack (gzipped) 21.26 KB (0%)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped) 73.03 KB (0%)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped) 28.93 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped) 21.09 KB (0%)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed) 233.84 KB (0%)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed) 87.77 KB (0%)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed) 62.76 KB (0%)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped) 31.71 KB (0%)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped) 83.05 KB (0%)
@sentry/react - Webpack (gzipped) 21.29 KB (0%)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped) 99.44 KB (0%)
@sentry/nextjs Client - Webpack (gzipped) 47.83 KB (0%)

@lforst lforst force-pushed the lforst-page-component-instrumentation branch from 8d9bd40 to 91652f4 Compare October 25, 2023 13:22
@lforst lforst marked this pull request as ready for review October 25, 2023 16:03
@lforst lforst requested review from mydea, Lms24 and AbhiPrasad October 25, 2023 16:03

function isReactClassComponent(target: unknown): target is ClassComponent {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
return typeof target === 'function' && target?.prototype?.isReactComponent;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LETS GOO

export function wrapPageComponentWithSentry(pageComponent: FunctionComponent | ClassComponent): unknown {
if (isReactClassComponent(pageComponent)) {
return class SentryWrappedPageComponent extends pageComponent {
public render(...args: unknown[]): unknown {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

l: I wonder if we can use suspense + error boundary to catch this - it's what is recommended with reactjs/rfcs#215

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SSR error boundaries are effectively only needed when you want to display a fallback in case of an error. I don't think we need this and I don't think this is possible in non React Server Component worlds but there's an excellent article on this: https://gal.hagever.com/posts/react-error-boundaries-and-ssr

@lforst lforst merged commit 25542d3 into develop Oct 25, 2023
52 checks passed
@lforst lforst deleted the lforst-page-component-instrumentation branch October 25, 2023 16:21
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.

2 participants