@@ -29,7 +29,11 @@ import {
29
29
ContextProvider ,
30
30
ForwardRef ,
31
31
} from 'react-reconciler/src/ReactWorkTags' ;
32
- import { createUnsupportedFeatureError } from './ReactDebugCustomErrors' ;
32
+ import {
33
+ createUnsupportedFeatureError ,
34
+ createRenderFunctionError ,
35
+ ErrorsNames ,
36
+ } from './ReactDebugCustomErrors' ;
33
37
34
38
type CurrentDispatcherRef = typeof ReactSharedInternals . ReactCurrentDispatcher ;
35
39
@@ -666,6 +670,23 @@ function processDebugValues(
666
670
}
667
671
}
668
672
673
+ function handleRenderFunctionError ( error : any ) : void {
674
+ // original error might be any type.
675
+ const isError = error instanceof Error ;
676
+ if ( isError && error . name === ErrorsNames . UNSUPPORTTED_FEATURE_ERROR ) {
677
+ throw error ;
678
+ }
679
+ // If the error is not caused by an unsupported feature, it means
680
+ // that the error is caused by user's code in renderFunction.
681
+ // In this case, we should wrap the original error inside a custom error
682
+ // so that devtools can show a clear message for it.
683
+ const messgae : string =
684
+ isError && error . message
685
+ ? error . message
686
+ : 'Error rendering inspected component' ;
687
+ throw createRenderFunctionError ( messgae , { cause : error } ) ;
688
+ }
689
+
669
690
export function inspectHooks < Props > (
670
691
renderFunction : Props => React$Node ,
671
692
props : Props ,
@@ -685,6 +706,8 @@ export function inspectHooks<Props>(
685
706
try {
686
707
ancestorStackError = new Error ( ) ;
687
708
renderFunction ( props ) ;
709
+ } catch ( error ) {
710
+ handleRenderFunctionError ( error ) ;
688
711
} finally {
689
712
readHookLog = hookLog ;
690
713
hookLog = [ ] ;
@@ -729,6 +752,8 @@ function inspectHooksOfForwardRef<Props, Ref>(
729
752
try {
730
753
ancestorStackError = new Error ( ) ;
731
754
renderFunction ( props , ref ) ;
755
+ } catch (error) {
756
+ handleRenderFunctionError ( error ) ;
732
757
} finally {
733
758
readHookLog = hookLog ;
734
759
hookLog = [ ] ;
0 commit comments