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.

Sign up for GitHub

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

Jump to bottom

webpack: Sourcemap externals when replayed in the browser #75863

Merged
merged 1 commit into from
Feb 13, 2025
Merged

webpack: Sourcemap externals when replayed in the browser #75863

merged 1 commit into from
Feb 13, 2025

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Feb 10, 2025 •
edited
Loading

This was already implemented in the middleware for Turbopack but absent when Webpack was used. We now always prefer the native findSourceMap over invoking Webpack's API.

This way stackframes from externals are now properly sourcemapped (and therefore ignore-listed)

Notice how the react-server-dom-webpack... stackframe (console.error method) wasn't ignore-listed before.

Before:

CleanShot 2025-02-10 at 14.34.44.png

After:

CleanShot 2025-02-10 at 14.36.15.png

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Feb 10, 2025
@eps1lon eps1lon changed the title Sourcemap externals when replayed in the browser webpack: Sourcemap externals when replayed in the browser Feb 10, 2025
@eps1lon Graphite App
Copy link
Member Author

eps1lon commented Feb 10, 2025 •
edited
Loading

This stack of pull requests is managed by Graphite. Learn more about stacking.

@ijjk
Copy link
Member

ijjk commented Feb 10, 2025 •
edited
Loading

Tests Passed

@ijjk
Copy link
Member

ijjk commented Feb 10, 2025 •
edited
Loading

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser Change
buildDuration 18.4s 16.6s N/A
buildDurationCached 15.6s 13.1s N/A
nodeModulesSize 393 MB 393 MB ⚠️ +7.94 kB
nextStartRea..uration (ms) 432ms 441ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser Change
5306-HASH.js gzip 55.1 kB 55.1 kB N/A
7048.HASH.js gzip 168 B 168 B ✓
8377-HASH.js gzip 5.46 kB 5.46 kB N/A
bccd1874-HASH.js gzip 53 kB 53 kB N/A
framework-HASH.js gzip 57.5 kB 57.5 kB N/A
main-app-HASH.js gzip 245 B 245 B ✓
main-HASH.js gzip 34.7 kB 34.7 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB ✓
Overall change 2.12 kB 2.12 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB ✓
Overall change 39.4 kB 39.4 kB ✓
Client Pages
vercel/next.js canary vercel/next.js sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser Change
_app-HASH.js gzip 194 B 194 B ✓
_error-HASH.js gzip 193 B 192 B N/A
amp-HASH.js gzip 513 B 511 B N/A
css-HASH.js gzip 342 B 342 B ✓
dynamic-HASH.js gzip 1.84 kB 1.84 kB N/A
edge-ssr-HASH.js gzip 265 B 264 B N/A
head-HASH.js gzip 363 B 360 B N/A
hooks-HASH.js gzip 393 B 390 B N/A
image-HASH.js gzip 4.59 kB 4.59 kB N/A
index-HASH.js gzip 268 B 266 B N/A
link-HASH.js gzip 2.35 kB 2.35 kB ✓
routerDirect..HASH.js gzip 327 B 326 B N/A
script-HASH.js gzip 397 B 397 B ✓
withRouter-HASH.js gzip 325 B 325 B ✓
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 3.72 kB 3.72 kB ✓
Client Build Manifests
vercel/next.js canary vercel/next.js sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser Change
_buildManifest.js gzip 749 B 747 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary vercel/next.js sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser Change
index.html gzip 522 B 521 B N/A
link.html gzip 539 B 534 B N/A
withRouter.html gzip 519 B 516 B N/A
Overall change 0 B 0 B ✓
Edge SSR bundle Size
vercel/next.js canary vercel/next.js sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser Change
edge-ssr.js gzip 130 kB 130 kB N/A
page.js gzip 211 kB 211 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js canary vercel/next.js sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser Change
middleware-b..fest.js gzip 676 B 671 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 31.4 kB 31.4 kB N/A
edge-runtime..pack.js gzip 844 B 844 B ✓
Overall change 844 B 844 B ✓
Next Runtimes
vercel/next.js canary vercel/next.js sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser Change
app-page-exp...dev.js gzip 394 kB 394 kB ✓
app-page-exp..prod.js gzip 133 kB 133 kB ✓
app-page-tur..prod.js gzip 145 kB 145 kB ✓
app-page-tur..prod.js gzip 141 kB 141 kB ✓
app-page.run...dev.js gzip 382 kB 382 kB ✓
app-page.run..prod.js gzip 129 kB 129 kB ✓
app-route-ex...dev.js gzip 39.4 kB 39.4 kB ✓
app-route-ex..prod.js gzip 25.7 kB 25.7 kB ✓
app-route-tu..prod.js gzip 25.7 kB 25.7 kB ✓
app-route-tu..prod.js gzip 25.5 kB 25.5 kB ✓
app-route.ru...dev.js gzip 41 kB 41 kB ✓
app-route.ru..prod.js gzip 25.5 kB 25.5 kB ✓
dist_client_...dev.js gzip 356 B 356 B ✓
dist_client_...dev.js gzip 349 B 349 B ✓
pages-api-tu..prod.js gzip 9.72 kB 9.72 kB ✓
pages-api.ru...dev.js gzip 11.8 kB 11.8 kB ✓
pages-api.ru..prod.js gzip 9.72 kB 9.72 kB ✓
pages-turbo...prod.js gzip 22 kB 22 kB ✓
pages.runtim...dev.js gzip 31.6 kB 31.6 kB ✓
pages.runtim..prod.js gzip 22 kB 22 kB ✓
server.runti..prod.js gzip 61.2 kB 61.2 kB ✓
Overall change 1.68 MB 1.68 MB ✓
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser Change
0.pack gzip 2.11 MB 2.11 MB ⚠️ +1.34 kB
index.pack gzip 75.9 kB 76.4 kB ⚠️ +441 B
Overall change 2.19 MB 2.19 MB ⚠️ +1.78 kB
Diff details
Diff for main-HASH.js

Diff too large to display

Commit: acc5f8f

@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch 2 times, most recently from 9a3d360 to 2ec2d0d Compare February 10, 2025 16:29
@eps1lon eps1lon changed the base branch from canary to graphite-base/75863 February 10, 2025 20:28
@eps1lon eps1lon force-pushed the graphite-base/75863 branch from e5fc495 to d2e0086 Compare February 10, 2025 20:28
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from 2ec2d0d to 2162368 Compare February 10, 2025 20:28
@eps1lon eps1lon changed the base branch from graphite-base/75863 to sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling February 10, 2025 20:28
This was referenced Feb 10, 2025
Merged
Merged
@eps1lon eps1lon force-pushed the sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling branch from d2e0086 to 642db76 Compare February 11, 2025 15:01
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from 2162368 to faf3f6f Compare February 11, 2025 15:01
@eps1lon eps1lon force-pushed the sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling branch from 642db76 to 9f552f5 Compare February 11, 2025 18:41
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from faf3f6f to a7012df Compare February 11, 2025 18:41
@eps1lon eps1lon mentioned this pull request Feb 11, 2025
Merged
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from a7012df to ee4c118 Compare February 12, 2025 06:16
@eps1lon eps1lon force-pushed the sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling branch from 9f552f5 to 0111af7 Compare February 12, 2025 06:16
@eps1lon eps1lon added the CI Bypass Graphite Optimization Ignore Graphite CI optimizations, run the full CI suite. https://graphite.dev/docs/stacking-and-ci label Feb 12, 2025
@eps1lon eps1lon force-pushed the sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling branch from 0111af7 to 8357e2c Compare February 12, 2025 08:26
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from ee4c118 to 4395715 Compare February 12, 2025 08:26
@eps1lon eps1lon force-pushed the sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling branch from 8357e2c to 853feb0 Compare February 12, 2025 08:57
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from 4395715 to 65e26bb Compare February 12, 2025 08:57
@eps1lon eps1lon mentioned this pull request Feb 12, 2025
Merged
@eps1lon eps1lon removed the CI Bypass Graphite Optimization Ignore Graphite CI optimizations, run the full CI suite. https://graphite.dev/docs/stacking-and-ci label Feb 12, 2025
@eps1lon eps1lon force-pushed the sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling branch from 853feb0 to 9d0b3ca Compare February 12, 2025 10:20
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from 65e26bb to e304e33 Compare February 12, 2025 10:20
@eps1lon eps1lon marked this pull request as ready for review February 12, 2025 11:44
@eps1lon eps1lon requested review from huozhi and gaojude February 12, 2025 11:44
@eps1lon eps1lon force-pushed the sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling branch from 9d0b3ca to a88e242 Compare February 12, 2025 16:23
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from e304e33 to 0cf1f15 Compare February 12, 2025 16:23
@eps1lon eps1lon force-pushed the sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling branch 2 times, most recently from 6e889f8 to 14334f7 Compare February 12, 2025 17:32
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch 2 times, most recently from 2b78643 to a74a2b9 Compare February 12, 2025 17:40
@eps1lon eps1lon force-pushed the sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling branch 2 times, most recently from 2c166e5 to 0bd70b7 Compare February 12, 2025 19:53
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from a74a2b9 to 5ad394e Compare February 12, 2025 19:53
eps1lon added a commit that referenced this pull request Feb 12, 2025
@eps1lon
Create unique source URLs between Client and Server in Pages dir (#75878
57c8d04 
)

This ensures we don't accidentally return the sourcemap for the server code of a given file when a stackframe was created in the browser.

The Server vs Client case could be distinguished separately but not if we're dealing with externals in Edge and Node.js. We have to use the native `findSourceMap` for those case.

There's probably a valid factoring where we ask the correct compilation to avoid ambiguity but the bundler is really just a perf optimization. E.g. in `next start` and prerender of `next build` we don't have access to the bundler so native `findSourceMap` has to work.

It's not needed for Turbopack since source URLs are already unique it seems.

The actual test is in #75863 which wouldn't work without this change.
@eps1lon eps1lon force-pushed the sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling branch 2 times, most recently from 8e06e42 to 2b9cecf Compare February 12, 2025 20:45
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from 5ad394e to cd7a54b Compare February 12, 2025 20:45
@eps1lon eps1lon changed the base branch from sebbie/02-10-cleanup_webpack_sourcemap_middleware_source_url_handling to graphite-base/75863 February 13, 2025 14:12
@eps1lon eps1lon force-pushed the graphite-base/75863 branch from 2b9cecf to bab2f50 Compare February 13, 2025 14:13
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from cd7a54b to d6eb189 Compare February 13, 2025 14:13
@vercel Vercel
Copy link

vercel bot commented Feb 13, 2025 •
edited
Loading

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

Name Status Preview Comments Updated (UTC)
next-js ❌ Failed (Inspect) Feb 13, 2025 2:16pm
next-js-1739456160393-c9QP 🛑 Canceled (Inspect) Feb 13, 2025 2:16pm

@eps1lon eps1lon changed the base branch from graphite-base/75863 to canary February 13, 2025 14:13
@eps1lon eps1lon force-pushed the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch from d6eb189 to acc5f8f Compare February 13, 2025 14:13
@eps1lon eps1lon merged commit ed67600 into canary Feb 13, 2025
131 of 132 checks passed
@eps1lon Graphite App
Copy link
Member Author

eps1lon commented Feb 13, 2025

Merge activity

  • Feb 13, 6:48 PM GMT+1: A user merged this pull request with Graphite.

@eps1lon eps1lon deleted the sebbie/02-10-sourcemap_externals_when_replayed_in_the_browser branch February 13, 2025 17:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@huozhi huozhi huozhi approved these changes

@gaojude gaojude Awaiting requested review from gaojude

Assignees
No one assigned
Labels
created-by: Next.js team PRs by the Next.js team. type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@eps1lon @ijjk @huozhi