Mark commit phase as errored if there were any errors within

Author: sebmarkbage

packages/react-reconciler/src/ReactFiberPerformanceTrack.js

@@ -585,7 +585,56 @@ export function logSuspendedCommitPhase(
   }
 }
 
-export function logCommitPhase(startTime: number, endTime: number): void {
+export function logCommitErrored(
+  startTime: number,
+  endTime: number,
+  errors: Array<CapturedValue<mixed>>,
+  passive: boolean,
+): void {
+  if (supportsUserTiming) {
+    const properties = [];
+    if (__DEV__) {
+      for (let i = 0; i < errors.length; i++) {
+        const capturedValue = errors[i];
+        const error = capturedValue.value;
+        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]);
+      }
+    }
+    performance.measure('Errored', {
+      start: startTime,
+      end: endTime,
+      detail: {
+        devtools: {
+          color: 'error',
+          track: reusableLaneDevToolDetails.track,
+          trackGroup: LANES_TRACK_GROUP,
+          tooltipText: passive
+            ? 'Commit Errored. See Components track.'
+            : 'Effects Errored. See Components track.',
+          properties,
+        },
+      },
+    });
+  }
+}
+
+export function logCommitPhase(
+  startTime: number,
+  endTime: number,
+  errors: null | Array<CapturedValue<mixed>>,
+): void {
+  if (errors !== null) {
+    logCommitErrored(startTime, endTime, errors, false);
+    return;
+  }
   if (supportsUserTiming) {
     reusableLaneDevToolDetails.color = 'secondary-dark';
     reusableLaneOptions.start = startTime;
@@ -613,7 +662,12 @@ export function logPaintYieldPhase(
 export function logPassiveCommitPhase(
   startTime: number,
   endTime: number,
+  errors: null | Array<CapturedValue<mixed>>,
 ): void {
+  if (errors !== null) {
+    logCommitErrored(startTime, endTime, errors, true);
+    return;
+  }
   if (supportsUserTiming) {
     reusableLaneDevToolDetails.color = 'secondary-dark';
     reusableLaneOptions.start = startTime;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -251,6 +251,7 @@ import {
   renderStartTime,
   commitStartTime,
   commitEndTime,
+  commitErrors,
   recordRenderTime,
   recordCommitTime,
   recordCommitEndTime,
@@ -263,6 +264,7 @@ import {
   yieldReason,
   startPingTimerByLanes,
   recordEffectError,
+  resetCommitErrors,
 } from './ReactProfilerTimer';
 
 // DEV stuff
@@ -3322,6 +3324,7 @@ function commitRootImpl(
   if (enableProfilerTimer) {
     // Mark the current commit time to be shared by all Profilers in this
     // batch. This enables them to be grouped later.
+    resetCommitErrors();
     recordCommitTime();
     if (enableComponentPerformanceTrack) {
       if (suspendedCommitReason === SUSPENDED_COMMIT) {
@@ -3415,6 +3418,7 @@ function commitRootImpl(
         ? completedRenderEndTime
         : commitStartTime,
       commitEndTime,
+      commitErrors,
     );
   }
 
@@ -3704,6 +3708,7 @@ function flushPassiveEffectsImpl(wasDelayedCommit: void | boolean) {
 
   let passiveEffectStartTime = 0;
   if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    resetCommitErrors();
     passiveEffectStartTime = now();
     logPaintYieldPhase(
       commitEndTime,
@@ -3740,7 +3745,11 @@ function flushPassiveEffectsImpl(wasDelayedCommit: void | boolean) {
 
   if (enableProfilerTimer && enableComponentPerformanceTrack) {
     const passiveEffectsEndTime = now();
-    logPassiveCommitPhase(passiveEffectStartTime, passiveEffectsEndTime);
+    logPassiveCommitPhase(
+      passiveEffectStartTime,
+      passiveEffectsEndTime,
+      commitErrors,
+    );
     finalizeRender(lanes, passiveEffectsEndTime);
   }
 

packages/react-reconciler/src/ReactProfilerTimer.js

@@ -42,6 +42,7 @@ const {unstable_now: now} = Scheduler;
 export let renderStartTime: number = -0;
 export let commitStartTime: number = -0;
 export let commitEndTime: number = -0;
+export let commitErrors: null | Array<CapturedValue<mixed>> = null;
 export let profilerStartTime: number = -1.1;
 export let profilerEffectDuration: number = -0;
 export let componentEffectDuration: number = -0;
@@ -429,10 +430,21 @@ export function recordEffectDuration(fiber: Fiber): void {
 }
 
 export function recordEffectError(errorInfo: CapturedValue<mixed>): void {
+  if (!enableProfilerTimer || !enableProfilerCommitHooks) {
+    return;
+  }
   if (componentEffectErrors === null) {
     componentEffectErrors = [];
   }
   componentEffectErrors.push(errorInfo);
+  if (commitErrors === null) {
+    commitErrors = [];
+  }
+  commitErrors.push(errorInfo);
+}
+
+export function resetCommitErrors(): void {
+  commitErrors = null;
 }
 
 export function startEffectTimer(): void {