@@ -98,6 +98,7 @@ import {
98
98
Cloned ,
99
99
PerformedWork ,
100
100
ForceClientRender ,
101
+ DidCapture ,
101
102
} from './ReactFiberFlags' ;
102
103
import {
103
104
commitStartTime ,
@@ -107,14 +108,17 @@ import {
107
108
resetComponentEffectTimers ,
108
109
pushComponentEffectStart ,
109
110
popComponentEffectStart ,
111
+ pushComponentEffectErrors ,
112
+ popComponentEffectErrors ,
110
113
componentEffectStartTime ,
111
114
componentEffectEndTime ,
112
115
componentEffectDuration ,
116
+ componentEffectErrors ,
113
117
} from './ReactProfilerTimer' ;
114
118
import {
115
119
logComponentRender ,
120
+ logComponentErrored ,
116
121
logComponentEffect ,
117
- logSuspenseBoundaryClientRendered ,
118
122
} from './ReactFiberPerformanceTrack' ;
119
123
import { ConcurrentMode , NoMode , ProfileMode } from './ReactTypeOfMode' ;
120
124
import { deferHiddenCallbacks } from './ReactFiberClassUpdateQueue' ;
@@ -395,7 +399,7 @@ function commitLayoutEffectOnFiber(
395
399
committedLanes : Lanes ,
396
400
) : void {
397
401
const prevEffectStart = pushComponentEffectStart ( ) ;
398
-
402
+ const prevEffectErrors = pushComponentEffectErrors ( ) ;
399
403
// When updating this function, also update reappearLayoutEffects, which does
400
404
// most of the same things when an offscreen tree goes from hidden -> visible.
401
405
const flags = finishedWork . flags ;
@@ -631,10 +635,12 @@ function commitLayoutEffectOnFiber(
631
635
componentEffectStartTime ,
632
636
componentEffectEndTime ,
633
637
componentEffectDuration ,
638
+ componentEffectErrors ,
634
639
) ;
635
640
}
636
641
637
642
popComponentEffectStart ( prevEffectStart ) ;
643
+ popComponentEffectErrors ( prevEffectErrors ) ;
638
644
}
639
645
640
646
function abortRootTransitions (
@@ -1627,7 +1633,7 @@ function commitMutationEffectsOnFiber(
1627
1633
lanes : Lanes ,
1628
1634
) {
1629
1635
const prevEffectStart = pushComponentEffectStart ( ) ;
1630
-
1636
+ const prevEffectErrors = pushComponentEffectErrors ( ) ;
1631
1637
const current = finishedWork . alternate ;
1632
1638
const flags = finishedWork . flags ;
1633
1639
@@ -2136,10 +2142,12 @@ function commitMutationEffectsOnFiber(
2136
2142
componentEffectStartTime ,
2137
2143
componentEffectEndTime ,
2138
2144
componentEffectDuration ,
2145
+ componentEffectErrors ,
2139
2146
) ;
2140
2147
}
2141
2148
2142
2149
popComponentEffectStart ( prevEffectStart ) ;
2150
+ popComponentEffectErrors ( prevEffectErrors ) ;
2143
2151
}
2144
2152
2145
2153
function commitReconciliationEffects ( finishedWork : Fiber ) {
@@ -2212,7 +2220,7 @@ function recursivelyTraverseLayoutEffects(
2212
2220
2213
2221
export function disappearLayoutEffects ( finishedWork : Fiber ) {
2214
2222
const prevEffectStart = pushComponentEffectStart ( ) ;
2215
-
2223
+ const prevEffectErrors = pushComponentEffectErrors ( ) ;
2216
2224
switch ( finishedWork . tag ) {
2217
2225
case FunctionComponent :
2218
2226
case ForwardRef :
@@ -2285,10 +2293,12 @@ export function disappearLayoutEffects(finishedWork: Fiber) {
2285
2293
componentEffectStartTime ,
2286
2294
componentEffectEndTime ,
2287
2295
componentEffectDuration ,
2296
+ componentEffectErrors ,
2288
2297
) ;
2289
2298
}
2290
2299
2291
2300
popComponentEffectStart ( prevEffectStart ) ;
2301
+ popComponentEffectErrors ( prevEffectErrors ) ;
2292
2302
}
2293
2303
2294
2304
function recursivelyTraverseDisappearLayoutEffects ( parentFiber : Fiber ) {
@@ -2310,7 +2320,7 @@ export function reappearLayoutEffects(
2310
2320
includeWorkInProgressEffects : boolean ,
2311
2321
) {
2312
2322
const prevEffectStart = pushComponentEffectStart ( ) ;
2313
-
2323
+ const prevEffectErrors = pushComponentEffectErrors ( ) ;
2314
2324
// Turn on layout effects in a tree that previously disappeared.
2315
2325
const flags = finishedWork . flags ;
2316
2326
switch ( finishedWork . tag ) {
@@ -2461,10 +2471,12 @@ export function reappearLayoutEffects(
2461
2471
componentEffectStartTime ,
2462
2472
componentEffectEndTime ,
2463
2473
componentEffectDuration ,
2474
+ componentEffectErrors ,
2464
2475
) ;
2465
2476
}
2466
2477
2467
2478
popComponentEffectStart ( prevEffectStart ) ;
2479
+ popComponentEffectErrors ( prevEffectErrors ) ;
2468
2480
}
2469
2481
2470
2482
function recursivelyTraverseReappearLayoutEffects (
@@ -2701,26 +2713,7 @@ function commitPassiveMountOnFiber(
2701
2713
endTime : number , // Profiling-only. The start time of the next Fiber or root completion.
2702
2714
) : void {
2703
2715
const prevEffectStart = pushComponentEffectStart ( ) ;
2704
-
2705
- // If this component rendered in Profiling mode (DEV or in Profiler component) then log its
2706
- // render time. We do this after the fact in the passive effect to avoid the overhead of this
2707
- // getting in the way of the render characteristics and avoid the overhead of unwinding
2708
- // uncommitted renders.
2709
- if (
2710
- enableProfilerTimer &&
2711
- enableComponentPerformanceTrack &&
2712
- ( finishedWork . mode & ProfileMode ) !== NoMode &&
2713
- ( ( finishedWork . actualStartTime : any ) : number ) > 0 &&
2714
- ( finishedWork . flags & PerformedWork ) !== NoFlags
2715
- ) {
2716
- logComponentRender (
2717
- finishedWork ,
2718
- ( ( finishedWork . actualStartTime : any ) : number ) ,
2719
- endTime ,
2720
- inHydratedSubtree ,
2721
- ) ;
2722
- }
2723
-
2716
+ const prevEffectErrors = pushComponentEffectErrors ( ) ;
2724
2717
// When updating this function, also update reconnectPassiveEffects, which does
2725
2718
// most of the same things when an offscreen tree goes from hidden -> visible,
2726
2719
// or when toggling effects inside a hidden tree.
@@ -2729,6 +2722,25 @@ function commitPassiveMountOnFiber(
2729
2722
case FunctionComponent :
2730
2723
case ForwardRef :
2731
2724
case SimpleMemoComponent : {
2725
+ // If this component rendered in Profiling mode (DEV or in Profiler component) then log its
2726
+ // render time. We do this after the fact in the passive effect to avoid the overhead of this
2727
+ // getting in the way of the render characteristics and avoid the overhead of unwinding
2728
+ // uncommitted renders.
2729
+ if (
2730
+ enableProfilerTimer &&
2731
+ enableComponentPerformanceTrack &&
2732
+ ( finishedWork . mode & ProfileMode ) !== NoMode &&
2733
+ ( ( finishedWork . actualStartTime : any ) : number ) > 0 &&
2734
+ ( finishedWork . flags & PerformedWork ) !== NoFlags
2735
+ ) {
2736
+ logComponentRender (
2737
+ finishedWork ,
2738
+ ( ( finishedWork . actualStartTime : any ) : number ) ,
2739
+ endTime ,
2740
+ inHydratedSubtree ,
2741
+ ) ;
2742
+ }
2743
+
2732
2744
recursivelyTraversePassiveMountEffects (
2733
2745
finishedRoot ,
2734
2746
finishedWork ,
@@ -2744,6 +2756,45 @@ function commitPassiveMountOnFiber(
2744
2756
}
2745
2757
break ;
2746
2758
}
2759
+ case ClassComponent : {
2760
+ // If this component rendered in Profiling mode (DEV or in Profiler component) then log its
2761
+ // render time. We do this after the fact in the passive effect to avoid the overhead of this
2762
+ // getting in the way of the render characteristics and avoid the overhead of unwinding
2763
+ // uncommitted renders.
2764
+ if (
2765
+ enableProfilerTimer &&
2766
+ enableComponentPerformanceTrack &&
2767
+ ( finishedWork . mode & ProfileMode ) !== NoMode &&
2768
+ ( ( finishedWork . actualStartTime : any ) : number ) > 0
2769
+ ) {
2770
+ if ( ( finishedWork . flags & DidCapture ) !== NoFlags ) {
2771
+ logComponentErrored (
2772
+ finishedWork ,
2773
+ ( ( finishedWork . actualStartTime : any ) : number ) ,
2774
+ endTime ,
2775
+ // TODO: The captured values are all hidden inside the updater/callback closures so
2776
+ // we can't get to the errors but they're there so we should be able to log them.
2777
+ [ ] ,
2778
+ ) ;
2779
+ } else if ( ( finishedWork . flags & PerformedWork ) !== NoFlags ) {
2780
+ logComponentRender (
2781
+ finishedWork ,
2782
+ ( ( finishedWork . actualStartTime : any ) : number ) ,
2783
+ endTime ,
2784
+ inHydratedSubtree ,
2785
+ ) ;
2786
+ }
2787
+ }
2788
+
2789
+ recursivelyTraversePassiveMountEffects (
2790
+ finishedRoot ,
2791
+ finishedWork ,
2792
+ committedLanes ,
2793
+ committedTransitions ,
2794
+ endTime ,
2795
+ ) ;
2796
+ break ;
2797
+ }
2747
2798
case HostRoot : {
2748
2799
const prevEffectDuration = pushNestedEffectDurations ( ) ;
2749
2800
@@ -2891,7 +2942,7 @@ function commitPassiveMountOnFiber(
2891
2942
// rendered boundary. Such as postpone.
2892
2943
if ( hydrationErrors !== null ) {
2893
2944
const startTime : number = ( finishedWork . actualStartTime : any ) ;
2894
- logSuspenseBoundaryClientRendered (
2945
+ logComponentErrored (
2895
2946
finishedWork ,
2896
2947
startTime ,
2897
2948
endTime ,
@@ -3074,10 +3125,12 @@ function commitPassiveMountOnFiber(
3074
3125
componentEffectStartTime ,
3075
3126
componentEffectEndTime ,
3076
3127
componentEffectDuration ,
3128
+ componentEffectErrors ,
3077
3129
) ;
3078
3130
}
3079
3131
3080
3132
popComponentEffectStart ( prevEffectStart ) ;
3133
+ popComponentEffectErrors ( prevEffectErrors ) ;
3081
3134
}
3082
3135
3083
3136
function recursivelyTraverseReconnectPassiveEffects (
@@ -3137,7 +3190,7 @@ export function reconnectPassiveEffects(
3137
3190
endTime : number , // Profiling-only. The start time of the next Fiber or root completion.
3138
3191
) {
3139
3192
const prevEffectStart = pushComponentEffectStart ( ) ;
3140
-
3193
+ const prevEffectErrors = pushComponentEffectErrors ( ) ;
3141
3194
// If this component rendered in Profiling mode (DEV or in Profiler component) then log its
3142
3195
// render time. We do this after the fact in the passive effect to avoid the overhead of this
3143
3196
// getting in the way of the render characteristics and avoid the overhead of unwinding
@@ -3331,10 +3384,12 @@ export function reconnectPassiveEffects(
3331
3384
componentEffectStartTime ,
3332
3385
componentEffectEndTime ,
3333
3386
componentEffectDuration ,
3387
+ componentEffectErrors ,
3334
3388
) ;
3335
3389
}
3336
3390
3337
3391
popComponentEffectStart ( prevEffectStart ) ;
3392
+ popComponentEffectErrors ( prevEffectErrors ) ;
3338
3393
}
3339
3394
3340
3395
function recursivelyTraverseAtomicPassiveEffects (
@@ -3611,7 +3666,7 @@ function recursivelyTraversePassiveUnmountEffects(parentFiber: Fiber): void {
3611
3666
3612
3667
function commitPassiveUnmountOnFiber ( finishedWork : Fiber ) : void {
3613
3668
const prevEffectStart = pushComponentEffectStart ( ) ;
3614
-
3669
+ const prevEffectErrors = pushComponentEffectErrors ( ) ;
3615
3670
switch ( finishedWork . tag ) {
3616
3671
case FunctionComponent :
3617
3672
case ForwardRef :
@@ -3696,10 +3751,12 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
3696
3751
componentEffectStartTime ,
3697
3752
componentEffectEndTime ,
3698
3753
componentEffectDuration ,
3754
+ componentEffectErrors ,
3699
3755
) ;
3700
3756
}
3701
3757
3702
3758
popComponentEffectStart ( prevEffectStart ) ;
3759
+ popComponentEffectErrors ( prevEffectErrors ) ;
3703
3760
}
3704
3761
3705
3762
function recursivelyTraverseDisconnectPassiveEffects ( parentFiber : Fiber ) : void {
@@ -3819,7 +3876,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
3819
3876
nearestMountedAncestor : Fiber | null ,
3820
3877
) : void {
3821
3878
const prevEffectStart = pushComponentEffectStart ( ) ;
3822
-
3879
+ const prevEffectErrors = pushComponentEffectErrors ( ) ;
3823
3880
switch ( current . tag ) {
3824
3881
case FunctionComponent :
3825
3882
case ForwardRef :
@@ -3946,10 +4003,12 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
3946
4003
componentEffectStartTime ,
3947
4004
componentEffectEndTime ,
3948
4005
componentEffectDuration ,
4006
+ componentEffectErrors ,
3949
4007
) ;
3950
4008
}
3951
4009
3952
4010
popComponentEffectStart ( prevEffectStart ) ;
4011
+ popComponentEffectErrors ( prevEffectErrors ) ;
3953
4012
}
3954
4013
3955
4014
export function invokeLayoutEffectMountInDEV ( fiber : Fiber ) : void {
0 commit comments