Skip to content

Conversation

@iker-barriocanal
Copy link
Contributor

@iker-barriocanal iker-barriocanal commented May 17, 2021

Adds front-end performance monitoring in the Next.js SDK, by providing a router instrumentation.

@github-actions
Copy link
Contributor

github-actions bot commented May 17, 2021

size-limit report

Path Size
@sentry/browser - CDN Bundle (gzipped) 20.76 KB (+0.01% 🔺)
@sentry/browser - Webpack 21.98 KB (0%)
@sentry/react - Webpack 22.01 KB (0%)
@sentry/browser + @sentry/tracing - CDN Bundle (gzipped) 28.16 KB (+0.01% 🔺)

Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

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

quick review to double check some stuff

scope.setTag('runtime', 'browser');
});

startClientPerfMonitoring();
Copy link
Member

Choose a reason for hiding this comment

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

We should only do this if they have set tracesSampleRate in client options.

iker-barriocanal and others added 10 commits May 19, 2021 12:11
The order is determined by the exposed `wrapRouter` function.
This function fills the router in the same order as Next.js docs, for clarity.
As the docstring say, wrapping `changeState` in the Router should be enough to get performance
monitoring on the frontend. The previous approach was based on wrapping all the exposed Router
methods users could use; but these are using the `changeState` underneath (it seems router actions
always call it but not 100% about it, although it _may_ work implementing far less complexity).

The approach and some code has been taken from
https://github.com/getsentry/sentry-javascript/tree/abhi/next-client-names
@AbhiPrasad
Copy link
Member

AbhiPrasad commented May 19, 2021

Ok, I added some preliminary tests by mocking out the next/router object, but they are mostly sanity checks. I think we shouldn't spend too much time on them, let's just focus on the end to end tests instead.

Also, I couldn't get beforePopState working, and since it seems it won't provide super high quality transactions, I decided to remove it for now. We can revisit later, or open an issue and make it open for contributions.

@iker-barriocanal iker-barriocanal changed the base branch from master to kmclb-next-js-performance May 20, 2021 12:56
@iker-barriocanal iker-barriocanal marked this pull request as ready for review May 20, 2021 12:56
Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

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

Think we are good after the variable name change

@iker-barriocanal iker-barriocanal merged commit 5d4dcab into kmclb-next-js-performance May 20, 2021
@iker-barriocanal iker-barriocanal deleted the nextjs/feat/client-performance branch May 20, 2021 14:31
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.

3 participants