Ignore RSC fetch errors after hard navigation #73975

unstubbable · 2024-12-16T11:44:03Z

When the user reloads the page or navigates away while RSC fetch requests are still in flight – most notably background prefetches – we currently log the following error:

Failed to fetch RSC payload for <URL>. Falling back to browser navigation.

This unnecessarily clutters the DevTools console and creates noise in remote error reporting tools.

When the browser cancels a fetch request due to navigation, it throws TypeError: Failed to fetch. We shouldn't universally suppress this error since it may also occur for other valid reasons where we do want to log it.

To suppress the error only in genuine navigation scenarios, we introduce an AbortController and pass its signal to the fetch call. On 'pagehide' events, we abort the controller. This approach ensures that error log suppression is limited solely to these navigation-related cases.

x-ref
fixes #60549

When the user reloads the page or navigates away while RSC fetch requests are still in flight – most notably background prefetches – we currently log the following error: ``` Failed to fetch RSC payload for <URL>. Falling back to browser navigation. ``` This unnecessarily clutters the DevTools console and creates noise in remote error reporting tools. When the browser cancels a `fetch` request due to navigation, it throws `TypeError: Failed to fetch`. We shouldn't universally suppress this error since it may occur for other valid reasons where we do want to log it. To suppress the error only in genuine navigation scenarios, we introduce an `AbortController` and pass its signal to the `fetch` call. On `'pagehide'` events, we abort the controller. This approach ensures that error log suppression is limited solely to these navigation-related cases. fixes #60549

ijjk · 2024-12-16T11:51:44Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js hl/ignore-abort-error	Change
buildDuration	19.6s	15.8s	N/A
buildDurationCached	14.8s	12.5s	N/A
nodeModulesSize	410 MB	410 MB	⚠️ +17.1 kB
nextStartRea..uration (ms)	454ms	455ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js hl/ignore-abort-error	Change
1187-HASH.js gzip	50.9 kB	50.9 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.36 kB	5.36 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	232 B	235 B	N/A
main-HASH.js gzip	34.1 kB	34 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	0 B	0 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js hl/ignore-abort-error	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 hl/ignore-abort-error	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.49 kB	4.49 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.34 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js hl/ignore-abort-error	Change
_buildManifest.js gzip	749 B	746 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js hl/ignore-abort-error	Change
index.html gzip	524 B	524 B	✓
link.html gzip	539 B	538 B	N/A
withRouter.html gzip	519 B	520 B	N/A
Overall change	524 B	524 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js hl/ignore-abort-error	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	204 kB	204 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js hl/ignore-abort-error	Change
middleware-b..fest.js gzip	671 B	667 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.2 kB	31.2 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 hl/ignore-abort-error	Change
523-experime...dev.js gzip	322 B	322 B	✓
523.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	323 kB	323 kB	N/A
app-page-exp..prod.js gzip	127 kB	127 kB	N/A
app-page-tur..prod.js gzip	140 kB	140 kB	N/A
app-page-tur..prod.js gzip	135 kB	135 kB	N/A
app-page.run...dev.js gzip	313 kB	314 kB	N/A
app-page.run..prod.js gzip	123 kB	123 kB	N/A
app-route-ex...dev.js gzip	37.4 kB	37.4 kB	✓
app-route-ex..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.3 kB	25.3 kB	✓
app-route.ru...dev.js gzip	39 kB	39 kB	✓
app-route.ru..prod.js gzip	25.3 kB	25.3 kB	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.6 kB	11.6 kB	✓
pages-api.ru..prod.js gzip	9.68 kB	9.68 kB	✓
pages-turbo...prod.js gzip	21.7 kB	21.7 kB	✓
pages.runtim...dev.js gzip	27.4 kB	27.4 kB	✓
pages.runtim..prod.js gzip	21.7 kB	21.7 kB	✓
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	1.2 MB	1.2 MB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js hl/ignore-abort-error	Change
0.pack gzip	2.05 MB	2.06 MB	⚠️ +5.8 kB
index.pack gzip	71.8 kB	71.9 kB	⚠️ +105 B
Overall change	2.12 MB	2.13 MB	⚠️ +5.91 kB

Diff details

Diff for 1187-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Commit: ba41e47

As a follow-up to #73975, we're now restoring the error handling for failed RSC fetch calls when the user navigates back after a hard navigation. In this case the browser uses the bfache to restore the previous JavaScript execution context, and thus the abort controller will still be in the aborted state. To take this into account, we're now creating a new `AbortController` instance on `'pageshow'` events. In addition, the abort controller's `signal` is now actually passed to the `fetch` call, and not only used for the error handling, so that the requests are aborted on `'pagehide'`. This was an oversight in the original PR. With that, it's even more important to create a fresh abort controller, otherwise RSC fetching would be disabled after back navigation. The added e2e test can only run in headed mode unfortunately, as the bfcache is not available in headless mode. (Using the same approach as in #54081.)

As a follow-up to #73975, we're now restoring the error handling for failed RSC fetch calls when the user navigates back after a hard navigation. In this case the browser uses the bfcache to restore the previous JavaScript execution context, and thus the abort controller will still be in the aborted state. To take this into account, we're now creating a new `AbortController` instance on `'pageshow'` events. In addition, the abort controller's `signal` is now actually passed to the `fetch` call, and not only used for the error handling, so that the requests are aborted on `'pagehide'`. This was an oversight in the original PR. With that, it's even more important to create a fresh abort controller, otherwise RSC fetching would be disabled after back navigation. The added e2e test can only run in headed mode unfortunately, as the bfcache is not available in headless mode. (Using the same approach as in #54081.)

ijjk added created-by: Next.js team PRs by the Next.js team. tests type: next labels Dec 16, 2024

unstubbable changed the title ~~Ignore fetch errors after hard navigation~~ Ignore RSC fetch errors after hard navigation Dec 16, 2024

unstubbable marked this pull request as ready for review December 16, 2024 12:05

feedthejim approved these changes Dec 16, 2024

View reviewed changes

unstubbable merged commit ac89400 into canary Dec 16, 2024
131 checks passed

unstubbable deleted the hl/ignore-abort-error branch December 16, 2024 12:14

unstubbable mentioned this pull request Dec 16, 2024

Restore RSC fetch error handling after navigating back #73985

Merged

github-actions bot added the locked label Dec 31, 2024

github-actions bot locked as resolved and limited conversation to collaborators Dec 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ignore RSC fetch errors after hard navigation #73975

Ignore RSC fetch errors after hard navigation #73975

unstubbable commented Dec 16, 2024 •

edited

Loading

ijjk commented Dec 16, 2024

Ignore RSC fetch errors after hard navigation #73975

Ignore RSC fetch errors after hard navigation #73975

Conversation

unstubbable commented Dec 16, 2024 • edited Loading

ijjk commented Dec 16, 2024

Stats from current PR

unstubbable commented Dec 16, 2024 •

edited

Loading