Skip to content

feat(nextjs): Sourcemaps for custom build directories #4003

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

Closed
wants to merge 12 commits into from

Conversation

iker-barriocanal
Copy link
Contributor

@iker-barriocanal iker-barriocanal commented Sep 22, 2021

This PR makes the Next.js SDK rewrite at build time the RewriteFrames integration's base path RegExp to the distDir option the user has defined in the Next.js configuration.

Why this approach?
The file names of the source maps must be formatted to display correct stack traces on server errors, defining the file names in the RewriteFrames integration. One use case is defining a custom distribution directory (the distDir option), and that's the option explored below.

There are two times to define the path: run time and build time. In any case, Next.js requires the user to set distDir in the options to compile the project. To get this path at run time and the SDK build it, users must also define the option in the SDK's server's configuration. However, to get the path at build time, users only need to set it once since the withSentryConfig wrapper can read the user's Next.js configuration. The SDK generates the RewriteFrames integration at initialization, meaning it's impossible to dynamically set the distribution directory path at build time if the option is only available at run time. To solve this issue, the SDK at build time rewrites the file where the default path of the integration is, so it's successfully generated at run time without additional configuration.

Since the second option improves the user experience, it's the approach taken in this PR.

@iker-barriocanal iker-barriocanal self-assigned this Sep 22, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Sep 22, 2021

size-limit report

Path Size
@sentry/browser - CDN Bundle (gzipped) 22.32 KB (-0.01% 🔽)
@sentry/browser - Webpack 23.3 KB (0%)
@sentry/react - Webpack 23.33 KB (0%)
@sentry/browser + @sentry/tracing - CDN Bundle (gzipped) 29.77 KB (-0.01% 🔽)

@iker-barriocanal iker-barriocanal marked this pull request as ready for review September 24, 2021 14:26
* @param distDir The distribution directory.
*/
function setProjectBasepath(filePath: string, varPrefix: string, distDir: string): void {
const fileContents = fs.readFileSync(filePath).toString();
Copy link
Member

Choose a reason for hiding this comment

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

has to be sync? we can't async await?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That was my initial approach and afaik we can definitely do it, but since we're running the code before webpack runs, the number of files is small (2 currently, and this is not something that scales), and files themselves are small, I believe the sync approach is faster (even if we block the event loop). That said, if you think the async approach is more convenient, I'm happy to change it. What do you think?

Copy link
Member

Choose a reason for hiding this comment

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

I prefer defaulting to async, but I'll leave it up to you to make the final call.

* This variable gets overridden at build time to set the correct path -- what users
* defined in the `distDir` option in their Next.js configuration.
*/
export const PROJECT_BASEPATH = '.next';
Copy link
Member

Choose a reason for hiding this comment

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

I wonder if this should just go in it's own file - and then we can even snapshot test (https://jestjs.io/docs/snapshot-testing) against potential regressions.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

IMO, yes. There's more code related to integrations that should be moved to another file, like the RewriteFrames integration itself and the addServerIntegrations below, and also the new code in the webpack file. However, that refactor isn't part of this PR and should go in another one.

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.

I'm comfortable to ship, but @lobsterkatie should prob make the final call

@iker-barriocanal
Copy link
Contributor Author

Closing in favor of #4017

@iker-barriocanal iker-barriocanal deleted the iker/feat/nextjs-distdir-rewriteframes branch December 10, 2021 09:20
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