Mark Errored Server Components

Author: sebmarkbage

packages/react-client/src/ReactFlightClient.js

@@ -73,6 +73,7 @@ import {
   markAllTracksInOrder,
   logComponentRender,
   logDedupedComponentRender,
+  logComponentErrored,
 } from './ReactFlightPerformanceTrack';
 
 import {
@@ -2876,6 +2877,7 @@ function flushComponentPerformance(
 
   if (debugInfo) {
     let endTime = 0;
+    let isLastComponent = true;
     for (let i = debugInfo.length - 1; i >= 0; i--) {
       const info = debugInfo[i];
       if (typeof info.time === 'number') {
@@ -2890,17 +2892,37 @@ function flushComponentPerformance(
         const startTimeInfo = debugInfo[i - 1];
         if (typeof startTimeInfo.time === 'number') {
           const startTime = startTimeInfo.time;
-          logComponentRender(
-            componentInfo,
-            trackIdx,
-            startTime,
-            endTime,
-            childrenEndTime,
-            response._rootEnvironmentName,
-          );
+          if (
+            isLastComponent &&
+            root.status === ERRORED &&
+            root.reason !== response._closedReason
+          ) {
+            // If this is the last component to render before this chunk rejected, then conceptually
+            // this component errored. If this was a cancellation then it wasn't this component that
+            // errored.
+            logComponentErrored(
+              componentInfo,
+              trackIdx,
+              startTime,
+              endTime,
+              childrenEndTime,
+              response._rootEnvironmentName,
+              root.reason,
+            );
+          } else {
+            logComponentRender(
+              componentInfo,
+              trackIdx,
+              startTime,
+              endTime,
+              childrenEndTime,
+              response._rootEnvironmentName,
+            );
+          }
           // Track the root most component of the result for deduping logging.
           result.component = componentInfo;
         }
+        isLastComponent = false;
       }
     }
   }

packages/react-client/src/ReactFlightPerformanceTrack.js

@@ -102,6 +102,49 @@ export function logComponentRender(
   }
 }
 
+export function logComponentErrored(
+  componentInfo: ReactComponentInfo,
+  trackIdx: number,
+  startTime: number,
+  endTime: number,
+  childrenEndTime: number,
+  rootEnv: string,
+  error: mixed,
+): void {
+  if (supportsUserTiming) {
+    const properties = [];
+    if (__DEV__) {
+      const message =
+        typeof error === 'object' &&
+        error !== null &&
+        typeof error.message === 'string'
+          ? // eslint-disable-next-line react-internal/safe-string-coercion
+            String(error.message)
+          : // eslint-disable-next-line react-internal/safe-string-coercion
+            String(error);
+      properties.push(['Error', message]);
+    }
+    const env = componentInfo.env;
+    const name = componentInfo.name;
+    const isPrimaryEnv = env === rootEnv;
+    const entryName =
+      isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
+    performance.measure(entryName, {
+      start: startTime < 0 ? 0 : startTime,
+      end: childrenEndTime,
+      detail: {
+        devtools: {
+          color: 'error',
+          track: trackNames[trackIdx],
+          trackGroup: COMPONENTS_TRACK,
+          tooltipText: entryName + ' Errored',
+          properties,
+        },
+      },
+    });
+  }
+}
+
 export function logDedupedComponentRender(
   componentInfo: ReactComponentInfo,
   trackIdx: number,