From 3826a87b7c3d7d13b3b351e65ba7ab0c476fa55f Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Fri, 10 Apr 2026 18:05:18 +0200 Subject: [PATCH 1/5] devtools: preserve full code frames in overlay --- .../dev-overlay/components/code-frame/code-frame.tsx | 3 ++- packages/next/src/next-devtools/server/shared.ts | 7 ++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx b/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx index be8bab972b15..4a9385a1d819 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx @@ -212,7 +212,8 @@ export const CODE_FRAME_STYLES = ` } [data-nextjs-codeframe] div > pre { - overflow: hidden; + overflow-x: auto; + overflow-y: hidden; display: inline-block; } diff --git a/packages/next/src/next-devtools/server/shared.ts b/packages/next/src/next-devtools/server/shared.ts index 813d2ff8aafb..7a1580506d97 100644 --- a/packages/next/src/next-devtools/server/shared.ts +++ b/packages/next/src/next-devtools/server/shared.ts @@ -80,7 +80,12 @@ export function getOriginalCodeFrame( column: frame.column1 ?? undefined, }, }, - { color: colors } + { + color: colors, + // The overlay renders in a browser with horizontal scrolling, + // so don't truncate lines to the server's terminal width. + maxWidth: 10_000, + } ) ?? null ) } From 9c7e41e5ecf39d53ef96dc459d8dbed3fd811df3 Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Fri, 10 Apr 2026 18:27:57 +0200 Subject: [PATCH 2/5] devtools: scope wide code frames to overlay --- .../components/code-frame/code-frame.tsx | 5 +++-- .../next/src/next-devtools/server/shared.ts | 19 +++++++++++++++---- .../src/server/dev/middleware-turbopack.ts | 6 +++++- .../next/src/server/dev/middleware-webpack.ts | 6 +++++- 4 files changed, 28 insertions(+), 8 deletions(-) diff --git a/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx b/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx index 4a9385a1d819..25c400f3a423 100644 --- a/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx +++ b/packages/next/src/next-devtools/dev-overlay/components/code-frame/code-frame.tsx @@ -211,10 +211,11 @@ export const CODE_FRAME_STYLES = ` margin-left: auto; } - [data-nextjs-codeframe] div > pre { + .code-frame-pre { overflow-x: auto; overflow-y: hidden; - display: inline-block; + display: block; + max-width: 100%; } [data-nextjs-codeframe] svg { diff --git a/packages/next/src/next-devtools/server/shared.ts b/packages/next/src/next-devtools/server/shared.ts index 7a1580506d97..b8c0026ce7d8 100644 --- a/packages/next/src/next-devtools/server/shared.ts +++ b/packages/next/src/next-devtools/server/shared.ts @@ -25,6 +25,11 @@ export interface OriginalStackFrameResponse { originalCodeFrame: string | null } +type CodeFrameRenderOptions = { + colors?: boolean + maxWidth?: number +} + export function ignoreListAnonymousStackFramesIfSandwiched( responses: OriginalStackFramesResponse ): void { @@ -65,12 +70,20 @@ export function ignoreListAnonymousStackFramesIfSandwiched( export function getOriginalCodeFrame( frame: IgnorableStackFrame, source: string | null, - colors: boolean = process.stdout.isTTY + colorsOrOptions: boolean | CodeFrameRenderOptions = process.stdout.isTTY ): string | null { if (!source || frame.line1 == null) { return null } + const { colors, maxWidth } = + typeof colorsOrOptions === 'boolean' + ? { colors: colorsOrOptions, maxWidth: undefined } + : { + colors: colorsOrOptions.colors ?? process.stdout.isTTY, + maxWidth: colorsOrOptions.maxWidth, + } + return ( codeFrameColumns( source, @@ -82,9 +95,7 @@ export function getOriginalCodeFrame( }, { color: colors, - // The overlay renders in a browser with horizontal scrolling, - // so don't truncate lines to the server's terminal width. - maxWidth: 10_000, + maxWidth, } ) ?? null ) diff --git a/packages/next/src/server/dev/middleware-turbopack.ts b/packages/next/src/server/dev/middleware-turbopack.ts index 5c5a3f11c290..228694746fac 100644 --- a/packages/next/src/server/dev/middleware-turbopack.ts +++ b/packages/next/src/server/dev/middleware-turbopack.ts @@ -322,7 +322,11 @@ async function createOriginalStackFrame( }, get originalCodeFrame() { if (originalCodeFrame === undefined) { - originalCodeFrame = getOriginalCodeFrame(tracedFrame, traced.source) + originalCodeFrame = getOriginalCodeFrame(tracedFrame, traced.source, { + // The overlay renders in a browser with horizontal scrolling, + // so don't truncate lines to the server's terminal width. + maxWidth: 10_000, + }) } return originalCodeFrame }, diff --git a/packages/next/src/server/dev/middleware-webpack.ts b/packages/next/src/server/dev/middleware-webpack.ts index fbaa6cee089d..f0e44b710ee4 100644 --- a/packages/next/src/server/dev/middleware-webpack.ts +++ b/packages/next/src/server/dev/middleware-webpack.ts @@ -261,7 +261,11 @@ export async function createOriginalStackFrame({ originalStackFrame: traced, get originalCodeFrame() { if (originalCodeFrame === undefined) { - originalCodeFrame = getOriginalCodeFrame(traced, sourceContent) + originalCodeFrame = getOriginalCodeFrame(traced, sourceContent, { + // The overlay renders in a browser with horizontal scrolling, + // so don't truncate lines to the server's terminal width. + maxWidth: 10_000, + }) } return originalCodeFrame }, From ba32a16cfb0f1985b8d5f7094ab673d0fdb55f1c Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Fri, 10 Apr 2026 18:30:55 +0200 Subject: [PATCH 3/5] devtools: use a bounded overlay code frame width --- packages/next/src/next-devtools/server/shared.ts | 2 ++ packages/next/src/server/dev/middleware-turbopack.ts | 3 ++- packages/next/src/server/dev/middleware-webpack.ts | 3 ++- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/next/src/next-devtools/server/shared.ts b/packages/next/src/next-devtools/server/shared.ts index b8c0026ce7d8..1d1998d97a3d 100644 --- a/packages/next/src/next-devtools/server/shared.ts +++ b/packages/next/src/next-devtools/server/shared.ts @@ -30,6 +30,8 @@ type CodeFrameRenderOptions = { maxWidth?: number } +export const DEVTOOLS_CODE_FRAME_MAX_WIDTH = 240 + export function ignoreListAnonymousStackFramesIfSandwiched( responses: OriginalStackFramesResponse ): void { diff --git a/packages/next/src/server/dev/middleware-turbopack.ts b/packages/next/src/server/dev/middleware-turbopack.ts index 228694746fac..5ad2701b1ef6 100644 --- a/packages/next/src/server/dev/middleware-turbopack.ts +++ b/packages/next/src/server/dev/middleware-turbopack.ts @@ -1,5 +1,6 @@ import type { IncomingMessage, ServerResponse } from 'http' import { + DEVTOOLS_CODE_FRAME_MAX_WIDTH, getOriginalCodeFrame, ignoreListAnonymousStackFramesIfSandwiched, type IgnorableStackFrame, @@ -325,7 +326,7 @@ async function createOriginalStackFrame( originalCodeFrame = getOriginalCodeFrame(tracedFrame, traced.source, { // The overlay renders in a browser with horizontal scrolling, // so don't truncate lines to the server's terminal width. - maxWidth: 10_000, + maxWidth: DEVTOOLS_CODE_FRAME_MAX_WIDTH, }) } return originalCodeFrame diff --git a/packages/next/src/server/dev/middleware-webpack.ts b/packages/next/src/server/dev/middleware-webpack.ts index f0e44b710ee4..a2e9fad69aec 100644 --- a/packages/next/src/server/dev/middleware-webpack.ts +++ b/packages/next/src/server/dev/middleware-webpack.ts @@ -12,6 +12,7 @@ import { } from '../lib/source-maps' import { openFileInEditor } from '../../next-devtools/server/launch-editor' import { + DEVTOOLS_CODE_FRAME_MAX_WIDTH, getOriginalCodeFrame, ignoreListAnonymousStackFramesIfSandwiched, type StackFrame, @@ -264,7 +265,7 @@ export async function createOriginalStackFrame({ originalCodeFrame = getOriginalCodeFrame(traced, sourceContent, { // The overlay renders in a browser with horizontal scrolling, // so don't truncate lines to the server's terminal width. - maxWidth: 10_000, + maxWidth: DEVTOOLS_CODE_FRAME_MAX_WIDTH, }) } return originalCodeFrame From 0cdb87ffd570ab86a3ce93ffeffce1520744448b Mon Sep 17 00:00:00 2001 From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com> Date: Sat, 11 Apr 2026 16:01:01 +0200 Subject: [PATCH 4/5] Update packages/next/src/next-devtools/server/shared.ts Co-authored-by: Sebastian "Sebbie" Silbermann --- packages/next/src/next-devtools/server/shared.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/src/next-devtools/server/shared.ts b/packages/next/src/next-devtools/server/shared.ts index 1d1998d97a3d..2924bfcdf328 100644 --- a/packages/next/src/next-devtools/server/shared.ts +++ b/packages/next/src/next-devtools/server/shared.ts @@ -30,7 +30,7 @@ type CodeFrameRenderOptions = { maxWidth?: number } -export const DEVTOOLS_CODE_FRAME_MAX_WIDTH = 240 +export const DEVTOOLS_CODE_FRAME_MAX_WIDTH = 1000 export function ignoreListAnonymousStackFramesIfSandwiched( responses: OriginalStackFramesResponse From c882143c4d7297b6094c1bf973234ee4742e4f0f Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Sat, 11 Apr 2026 16:19:59 +0200 Subject: [PATCH 5/5] Adjust for tests --- packages/next/src/next-devtools/server/shared.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/next/src/next-devtools/server/shared.ts b/packages/next/src/next-devtools/server/shared.ts index 2924bfcdf328..281caa6dd3c6 100644 --- a/packages/next/src/next-devtools/server/shared.ts +++ b/packages/next/src/next-devtools/server/shared.ts @@ -72,7 +72,8 @@ export function ignoreListAnonymousStackFramesIfSandwiched( export function getOriginalCodeFrame( frame: IgnorableStackFrame, source: string | null, - colorsOrOptions: boolean | CodeFrameRenderOptions = process.stdout.isTTY + colorsOrOptions: boolean | CodeFrameRenderOptions = process.stdout?.isTTY ?? + false ): string | null { if (!source || frame.line1 == null) { return null @@ -82,7 +83,7 @@ export function getOriginalCodeFrame( typeof colorsOrOptions === 'boolean' ? { colors: colorsOrOptions, maxWidth: undefined } : { - colors: colorsOrOptions.colors ?? process.stdout.isTTY, + colors: colorsOrOptions.colors ?? process.stdout?.isTTY ?? false, maxWidth: colorsOrOptions.maxWidth, }