Instant Insights: only report non-validatable if dev render is error free (vercel#93858)

When an error prevents validation from happening that same error likely
shows up in the main dev render. To avoid double reporting in dev we
silence notices about validation being incomplete if the main render has
errors to report to the user. If no user facing errors exist then we
will report the lack of validation as it's own issue to confront.

Author: gnoff

packages/next/src/server/app-render/app-render.tsx

@@ -1469,7 +1469,9 @@ async function generateDynamicFlightRenderResultWithStagesInDev(
     isBuildTimePrerendering = false,
   } = renderOpts
 
+  let didErrorObservably = false
   function onFlightDataRenderError(err: DigestedError, silenceLog: boolean) {
+    didErrorObservably = true
     return onInstrumentationRequestError?.(
       err,
       req,
@@ -1579,7 +1581,8 @@ async function generateDynamicFlightRenderResultWithStagesInDev(
         ctx,
         finalRequestStore,
         fallbackParams,
-        validationDebugChannelClient
+        validationDebugChannelClient,
+        didErrorObservably
       )
     } else {
       logValidationSkipped(ctx)
@@ -3401,7 +3404,11 @@ async function renderToStream(
   return getTracer().withSpan(renderSpan, async () => {
     // MARK: renderToStream errorHandlers
     const { reactServerErrorsByDigest } = workStore
+
+    // We use this to determine if we should suppress other derivative errors
+    let didErrorObservably = false
     function onHTMLRenderRSCError(err: DigestedError, silenceLog: boolean) {
+      didErrorObservably = true
       return onInstrumentationRequestError?.(
         err,
         req,
@@ -3533,7 +3540,8 @@ async function renderToStream(
               ctx,
               finalRequestStore,
               fallbackParams,
-              validationDebugChannelClient
+              validationDebugChannelClient,
+              didErrorObservably
             )
 
             reactServerResult = new ReactServerResult(serverStream)
@@ -3652,7 +3660,8 @@ async function renderToStream(
               ctx,
               finalRequestStore,
               fallbackParams,
-              validationDebugChannelClient
+              validationDebugChannelClient,
+              didErrorObservably
             )
 
             reactServerResult = new ReactServerResult(serverStream)
@@ -5604,7 +5613,8 @@ async function spawnStaticShellValidationInDevImpl(
   ctx: AppRenderContext,
   requestStore: RequestStore,
   fallbackRouteParams: OpaqueFallbackRouteParams | null,
-  debugChannelClient: AnyStream | undefined
+  debugChannelClient: AnyStream | undefined,
+  devRenderDidError: boolean
 ): Promise<void> {
   const debug =
     process.env.NEXT_PRIVATE_DEBUG_VALIDATION === '1' ? console.log : undefined
@@ -5735,7 +5745,8 @@ async function spawnStaticShellValidationInDevImpl(
       fallbackRouteParams,
       ctx,
       hmrRefreshHash,
-      validationSamples
+      validationSamples,
+      devRenderDidError
     )
 
     if (instantConfigsResult.length > 0) {
@@ -6093,7 +6104,8 @@ async function validateInstantConfigs(
   fallbackRouteParams: OpaqueFallbackRouteParams | null,
   ctx: AppRenderContext,
   hmrRefreshHash: string | undefined,
-  validationSamples: ValidationStoreClient['validationSamples'] | null
+  validationSamples: ValidationStoreClient['validationSamples'] | null,
+  devRenderDidError: boolean
 ): Promise<Array<unknown>> {
   const debug =
     process.env.NEXT_PRIVATE_DEBUG_VALIDATION === '1' ? console.log : undefined
@@ -6340,15 +6352,17 @@ async function validateInstantConfigs(
         preludeIsEmpty ? PreludeState.Empty : PreludeState.Full,
         instantValidationState,
         validationSampleTracking,
-        boundaryState
+        boundaryState,
+        devRenderDidError
       )
     } catch (thrownValue) {
       result = getNavigationDisallowedDynamicReasons(
         workStore,
         PreludeState.Errored,
         instantValidationState,
         validationSampleTracking,
-        boundaryState
+        boundaryState,
+        devRenderDidError
       )
     }
 
@@ -7109,7 +7123,8 @@ async function validateInstantConfigInBuildWithSample(
       fallbackRouteParams,
       validationCtx,
       undefined, // hmrRefreshHash,
-      validationSamples
+      validationSamples,
+      false // build has no shared dev render that would surface errors
     )
   })
 }

packages/next/src/server/app-render/dynamic-rendering.ts

@@ -1390,7 +1390,8 @@ export function getNavigationDisallowedDynamicReasons(
   prelude: PreludeState,
   dynamicValidation: InstantValidationState,
   validationSampleTracking: InstantValidationSampleTracking | null,
-  boundaryState: ValidationBoundaryTracking
+  boundaryState: ValidationBoundaryTracking,
+  devRenderDidError: boolean
 ): NavigationValidationResult {
   // If we have errors related to missing samples, those should take precedence over everything else.
   if (validationSampleTracking) {
@@ -1402,6 +1403,12 @@ export function getNavigationDisallowedDynamicReasons(
 
   const { validationPreventingErrors } = dynamicValidation
   if (validationPreventingErrors.length > 0) {
+    if (process.env.__NEXT_DEV_SERVER && devRenderDidError) {
+      // The dev render already surfaced server errors to the user.
+      // The same errors likely caused validation to be inconclusive,
+      // so reporting them again as validation failures would be noisy.
+      return []
+    }
     return validationPreventingErrors
   }
 
@@ -1480,6 +1487,11 @@ export function getNavigationDisallowedDynamicReasons(
       }
       const error = new Error(message)
       return error
+    } else if (process.env.__NEXT_DEV_SERVER && devRenderDidError) {
+      // Errors outside the boundary likely blocked it from rendering,
+      // but they're already being reported to the user via the dev
+      // render. Suppress the validation failure to avoid noise.
+      return []
     } else if (thrownErrorsOutsideBoundary.length === 1) {
       const message = `Route "${workStore.route}": Could not validate \`unstable_instant\` because the target segment was prevented from rendering, likely due to the following error.`
       const error = rootInstantStack !== null ? rootInstantStack() : new Error()

test/e2e/app-dir/instant-validation/app/suspense-in-root/page.tsx

@@ -141,6 +141,12 @@ export default async function Page() {
         <li>
           <DebugLinks href="/suspense-in-root/static/valid-client-error-in-parent-does-not-block-validation" />
         </li>
+        <li>
+          <DebugLinks href="/suspense-in-root/static/server-error-blocks-children" />
+        </li>
+        <li>
+          <DebugLinks href="/suspense-in-root/static/server-error-inside-boundary" />
+        </li>
         <li>
           <DebugLinks href="/suspense-in-root/static/false-below-static" />
         </li>

test/e2e/app-dir/instant-validation/app/suspense-in-root/static/server-error-blocks-children/layout.tsx

@@ -0,0 +1,25 @@
+import { Suspense, type ReactNode } from 'react'
+import { connection } from 'next/server'
+
+export const unstable_instant = false
+
+function ServerError() {
+  throw new Error('Server component error')
+}
+
+export default async function Layout({ children }: { children: ReactNode }) {
+  await connection()
+  return (
+    <>
+      <p>
+        This layout renders a server component that throws. The error is caught
+        by a Suspense boundary but wraps the children slot, preventing the
+        instant page from rendering.
+      </p>
+      <Suspense>
+        <ServerError />
+        {children}
+      </Suspense>
+    </>
+  )
+}

test/e2e/app-dir/instant-validation/app/suspense-in-root/static/server-error-blocks-children/page.tsx

@@ -0,0 +1,12 @@
+export const unstable_instant = { level: 'experimental-error' }
+
+export default function Page() {
+  return (
+    <main>
+      <p>
+        This page has instant validation but a server error in the parent layout
+        blocks it from rendering.
+      </p>
+    </main>
+  )
+}

test/e2e/app-dir/instant-validation/app/suspense-in-root/static/server-error-inside-boundary/layout.tsx

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react'
+import { connection } from 'next/server'
+
+export const unstable_instant = false
+
+function ServerError() {
+  throw new Error('Server component error inside boundary')
+}
+
+export default async function Layout({ children }: { children: ReactNode }) {
+  await connection()
+  return (
+    <>
+      <p>
+        This layout renders a server component that throws without a Suspense
+        boundary. The error is inside the validation boundary so it prevents
+        validation from completing.
+      </p>
+      <ServerError />
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/instant-validation/app/suspense-in-root/static/server-error-inside-boundary/page.tsx

@@ -0,0 +1,12 @@
+export const unstable_instant = { level: 'experimental-error' }
+
+export default function Page() {
+  return (
+    <main>
+      <p>
+        This page has instant validation but a server error in the parent layout
+        is inside the boundary without a Suspense guard.
+      </p>
+    </main>
+  )
+}