[dev-overlay] Fix error dialog resizing logic (#77830)

This PR improves our height resizing strategy. Animating the height on
page load or when the dialog opens is not ideal and it would be better
if the dialog would just fade in and assume it's intrinsic height
without motion.

This is what happens before this PR when you open errors, and it can be
distracting to experience such amount of motion at once:


https://github.com/user-attachments/assets/eb03cc23-395e-4ff4-9ed2-ace1694ad917

The reason this happens is because some of the dialog contents load in
async—for example the errors are actually suspended so that the message
can be viewed without waiting for the stack frames to load:


https://github.com/vercel/next.js/blob/1751db082d8c791e05ac1481a5036c8fb381d831/packages/next/src/client/components/react-dev-overlay/ui/container/errors.tsx#L202-L208

---

After this PR, we still measure the `height` of the dialog and animate
it in response to user input, but only use the value when the height has
stabilised. You can see what happens by observing the blue height value:




https://github.com/user-attachments/assets/cf4c1e0f-5e2e-49ed-b94a-1df9822f20cc


And another video from the fixture app:



https://github.com/user-attachments/assets/a285253f-f320-4638-b19e-b7a27a434ee6






---
Closes NDX-983

Author: raunofreiberg

Diff for: packages/next/src/client/components/react-dev-overlay/ui/components/dialog/dialog.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { useOnClickOutside } from '../../hooks/use-on-click-outside'
-import { useMeasureHeight } from '../../hooks/use-measure-height'
 
 export type DialogProps = {
   children?: React.ReactNode
@@ -37,9 +36,6 @@ const Dialog: React.FC<DialogProps> = function Dialog({
       : undefined
   )
 
-  const ref = React.useRef<HTMLDivElement | null>(null)
-  const [height, pristine] = useMeasureHeight(ref)
-
   useOnClickOutside(
     dialogRef.current,
     CSS_SELECTORS_TO_EXCLUDE_ON_CLICK_OUTSIDE,
@@ -102,19 +98,7 @@ const Dialog: React.FC<DialogProps> = function Dialog({
       }}
       {...props}
     >
-      <div
-        ref={dialogResizerRef}
-        data-nextjs-dialog-sizer
-        // [x] Don't animate on initial load
-        // [x] No duplicate elements
-        // [x] Responds to content growth
-        style={{
-          height,
-          transition: pristine ? undefined : 'height 250ms var(--timing-swift)',
-        }}
-      >
-        <div ref={ref}>{children}</div>
-      </div>
+      {children}
     </div>
   )
 }

Diff for: packages/next/src/client/components/react-dev-overlay/ui/components/dialog/styles.ts

@@ -3,7 +3,7 @@ const styles = `
     --next-dialog-radius: var(--rounded-xl);
     --next-dialog-max-width: 960px;
     --next-dialog-row-padding: 16px;
-    --next-dialog-padding-x: 12px;
+    --next-dialog-padding: 12px;
     --next-dialog-notch-height: 42px;
     --next-dialog-border-width: 1px;
 
@@ -14,7 +14,7 @@ const styles = `
     max-width: var(--next-dialog-max-width);
     margin-right: auto;
     margin-left: auto;
-    scale: 0.98;
+    scale: 0.97;
     opacity: 0;
     transition-property: scale, opacity;
     transition-duration: var(--transition-duration);
@@ -28,7 +28,7 @@ const styles = `
     [data-nextjs-scroll-fader][data-side="top"] {
       left: 1px;
       top: calc(var(--next-dialog-notch-height) + var(--next-dialog-border-width));
-      width: calc(100% - var(--next-dialog-padding-x));
+      width: calc(100% - var(--next-dialog-padding));
       opacity: 0;
     }
   }
@@ -82,7 +82,7 @@ const styles = `
     display: flex;
     flex-direction: column;
     position: relative;
-    padding: 16px var(--next-dialog-padding-x);
+    padding: var(--next-dialog-padding);
   }
 
   [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {

Diff for: packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.test.tsx

@@ -24,6 +24,7 @@ const renderTestComponent = () => {
       rendered={true}
       transitionDurationMs={200}
       isTurbopack={false}
+      errorCount={1}
       versionInfo={{
         installed: '15.0.0',
         staleness: 'fresh',

Diff for: packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.tsx

@@ -36,6 +36,7 @@ import type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'
 import { EnvironmentNameLabel } from '../environment-name-label/environment-name-label'
 import { useFocusTrap } from '../dev-tools-indicator/utils'
 import { Fader } from '../../fader'
+import { Resizer } from '../../resizer'
 
 export interface ErrorOverlayLayoutProps extends ErrorBaseProps {
   errorMessage: ErrorMessageType
@@ -59,6 +60,7 @@ export function ErrorOverlayLayout({
   errorType,
   children,
   errorCode,
+  errorCount,
   error,
   debugInfo,
   isBuildError,
@@ -83,6 +85,10 @@ export function ErrorOverlayLayout({
     } as React.CSSProperties,
   }
 
+  const [animating, setAnimating] = React.useState(
+    Boolean(transitionDurationMs)
+  )
+
   const faderRef = React.useRef<HTMLDivElement | null>(null)
   const hasFooter = Boolean(footerMessage || errorCode)
   const dialogRef = React.useRef<HTMLDivElement | null>(null)
@@ -95,9 +101,23 @@ export function ErrorOverlayLayout({
     }
   }
 
+  function onTransitionEnd({ propertyName, target }: React.TransitionEvent) {
+    // We can only measure height after the `scale` transition ends,
+    // otherwise we will measure height as a multiple of the animating value
+    // which will give us an incorrect value.
+    if (propertyName === 'scale' && target === dialogRef.current) {
+      setAnimating(false)
+    }
+  }
+
   return (
     <ErrorOverlayOverlay fixed={isBuildError} {...animationProps}>
-      <div data-nextjs-dialog-root ref={dialogRef} {...animationProps}>
+      <div
+        data-nextjs-dialog-root
+        onTransitionEnd={onTransitionEnd}
+        ref={dialogRef}
+        {...animationProps}
+      >
         <ErrorOverlayNav
           runtimeErrors={runtimeErrors}
           activeIdx={activeIdx}
@@ -119,30 +139,37 @@ export function ErrorOverlayLayout({
             )
           }
         >
-          <DialogContent>
-            <ErrorOverlayDialogHeader>
-              <div
-                className="nextjs__container_errors__error_title"
-                // allow assertion in tests before error rating is implemented
-                data-nextjs-error-code={errorCode}
-              >
-                <span data-nextjs-error-label-group>
-                  <ErrorTypeLabel errorType={errorType} />
-                  {error.environmentName && (
-                    <EnvironmentNameLabel
-                      environmentName={error.environmentName}
-                    />
-                  )}
-                </span>
-                <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />
-              </div>
-              <ErrorMessage errorMessage={errorMessage} />
-            </ErrorOverlayDialogHeader>
+          <Resizer
+            ref={dialogResizerRef}
+            measure={!animating}
+            data-nextjs-dialog-sizer
+          >
+            <DialogContent>
+              <ErrorOverlayDialogHeader>
+                <div
+                  className="nextjs__container_errors__error_title"
+                  // allow assertion in tests before error rating is implemented
+                  data-nextjs-error-code={errorCode}
+                >
+                  <span data-nextjs-error-label-group>
+                    <ErrorTypeLabel errorType={errorType} />
+                    {error.environmentName && (
+                      <EnvironmentNameLabel
+                        environmentName={error.environmentName}
+                      />
+                    )}
+                  </span>
+                  <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />
+                </div>
+                <ErrorMessage errorMessage={errorMessage} />
+              </ErrorOverlayDialogHeader>
+
+              <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>
+            </DialogContent>
+          </Resizer>
 
-            <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>
-          </DialogContent>
           <ErrorOverlayBottomStack
-            errorCount={runtimeErrors?.length ?? 0}
+            errorCount={errorCount}
             activeIdx={activeIdx ?? 0}
           />
         </ErrorOverlayDialog>

Diff for: packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay/error-overlay.tsx

@@ -13,18 +13,21 @@ export interface ErrorBaseProps {
   transitionDurationMs: number
   isTurbopack: boolean
   versionInfo: OverlayState['versionInfo']
+  errorCount: number
 }
 
 export function ErrorOverlay({
   state,
   runtimeErrors,
   isErrorOverlayOpen,
   setIsErrorOverlayOpen,
+  errorCount,
 }: {
   state: OverlayState
   runtimeErrors: ReadyRuntimeError[]
   isErrorOverlayOpen: boolean
   setIsErrorOverlayOpen: (value: boolean) => void
+  errorCount: number
 }) {
   const isTurbopack = !!process.env.TURBOPACK
 
@@ -38,6 +41,7 @@ export function ErrorOverlay({
     transitionDurationMs,
     isTurbopack,
     versionInfo: state.versionInfo,
+    errorCount,
   }
 
   if (state.buildError !== null) {

Diff for: packages/next/src/client/components/react-dev-overlay/ui/components/resizer/index.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react'
+
+export function Resizer({
+  children,
+  measure,
+  ...props
+}: {
+  children: React.ReactNode
+  measure: boolean
+} & React.HTMLProps<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [height, measuring] = useMeasureHeight(ref, measure)
+
+  return (
+    <div
+      {...props}
+      // [x] Don't animate on initial load
+      // [x] No duplicate elements
+      // [x] Responds to content growth
+      style={{
+        height: measuring ? 'auto' : height,
+        transition: 'height 250ms var(--timing-swift)',
+      }}
+    >
+      <div ref={ref}>{children}</div>
+    </div>
+  )
+}
+
+function useMeasureHeight(
+  ref: React.RefObject<HTMLDivElement | null>,
+  measure: boolean
+): [number, boolean] {
+  const [height, setHeight] = useState<number>(0)
+  const [measuring, setMeasuring] = useState<boolean>(true)
+
+  useEffect(() => {
+    if (!measure) {
+      return
+    }
+
+    let timerId: number
+    const el = ref.current
+
+    if (!el) {
+      return
+    }
+
+    const observer = new ResizeObserver(([{ contentRect }]) => {
+      clearTimeout(timerId)
+
+      timerId = window.setTimeout(() => {
+        setMeasuring(false)
+      }, 100)
+
+      setHeight(contentRect.height)
+    })
+
+    observer.observe(el)
+    return () => observer.disconnect()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [measure])
+
+  return [height, measuring]
+}

Diff for: packages/next/src/client/components/react-dev-overlay/ui/container/errors.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useRef, Suspense } from 'react'
+import { useState, useMemo, useRef, Suspense } from 'react'
 import type { DebugInfo } from '../../types'
 import { Overlay } from '../components/overlay'
 import { RuntimeError } from './runtime-error'
@@ -89,18 +89,6 @@ export function Errors({
 }: ErrorsProps) {
   const dialogResizerRef = useRef<HTMLDivElement | null>(null)
 
-  useEffect(() => {
-    // Close the error overlay when pressing escape
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === 'Escape') {
-        onClose()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [onClose])
-
   const isLoading = useMemo<boolean>(() => {
     return runtimeErrors.length < 1
   }, [runtimeErrors.length])

Diff for: packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.stories.tsx

@@ -92,9 +92,8 @@ export const Default: Story = {
           src={imgApp}
           style={{
             width: '100%',
-            height: '100%',
+            height: '100vh',
             objectFit: 'contain',
-            filter: 'invert(1)',
           }}
         />
         <DevOverlay

Diff for: packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.tsx

@@ -50,6 +50,7 @@ export function DevOverlay({
               <ErrorOverlay
                 state={state}
                 runtimeErrors={runtimeErrors}
+                errorCount={totalErrorCount}
                 isErrorOverlayOpen={isErrorOverlayOpen}
                 setIsErrorOverlayOpen={setIsErrorOverlayOpen}
               />