[Flight] Add DebugInfo for Bundler Chunks (#34226)

This adds a "suspended by" row for each chunk that is referenced from a
client reference. So when you select a client component, you can see
what bundles will block that client component when loading on the
client.

This is only done in the browser build since if we added it on the
server, it would show up as a blocking resource and while it's possible
we expect that a typical server request won't block on loading JS.

<img width="664" height="486" alt="Screenshot 2025-08-17 at 3 45 14 PM"
src="https://github.com/user-attachments/assets/b1f83445-2a4e-4470-9a20-7cd215ab0482"
/>

<img width="745" height="678" alt="Screenshot 2025-08-17 at 3 46 58 PM"
src="https://github.com/user-attachments/assets/3558eae1-cf34-4e11-9d0e-02ec076356a4"
/>

Currently this is only included if it ends up wrapped in a lazy like in
the typical type position of a Client Component, but there's a general
issue that maybe hard references need to transfer their debug info to
the parent which can transfer it to the Fiber.
This commit is contained in:
Sebastian Markbåge
2025-08-18 11:34:00 -04:00
committed by GitHub
parent 87a45ae37f
commit 0c89b160f6
20 changed files with 405 additions and 7 deletions

View File

@@ -146,6 +146,7 @@ declare module 'EventListener' {
}
declare function __webpack_chunk_load__(id: string): Promise<mixed>;
declare function __webpack_get_script_filename__(id: string): string;
declare const __webpack_require__: ((id: string) => any) & {
u: string => string,
};

View File

@@ -62,6 +62,7 @@ module.exports = {
// Flight Webpack
__webpack_chunk_load__: 'readonly',
__webpack_get_script_filename__: 'readonly',
__webpack_require__: 'readonly',
// Flight Turbopack

View File

@@ -59,6 +59,7 @@ module.exports = {
// Flight Webpack
__webpack_chunk_load__: 'readonly',
__webpack_get_script_filename__: 'readonly',
__webpack_require__: 'readonly',
// Flight Turbopack

View File

@@ -62,6 +62,7 @@ module.exports = {
// Flight Webpack
__webpack_chunk_load__: 'readonly',
__webpack_get_script_filename__: 'readonly',
__webpack_require__: 'readonly',
// Flight Turbopack