@@ -667,6 +667,28 @@ function processDebugValues(
667
667
}
668
668
}
669
669
670
+ function handleRenderFunctionError ( error : any ) : void {
671
+ // original error might be any type.
672
+ const isError = error instanceof Error ;
673
+ if ( isError && error . name === 'UnsupportedFeatureError' ) {
674
+ throw error ;
675
+ }
676
+ // If the error is not caused by an unsupported feature, it means
677
+ // that the error is caused by user's code in renderFunction.
678
+ // In this case, we should wrap the original error inside a custom error
679
+ // so that devtools can show a clear message for it.
680
+ const messgae : string =
681
+ isError && error . message
682
+ ? error . message
683
+ : 'Error rendering inspected component'
684
+ // $FlowFixMe: Flow doesn't know about 2nd argument of Error constructor
685
+ const wrapperError = new Error ( messgae , { cause : error } ) ;
686
+ // Note: This error name needs to stay in sync with react-devtools-shared
687
+ // TODO: refactor this if we ever combine the devtools and debug tools packages
688
+ wrapperError . name = 'RenderFunctionError' ;
689
+ throw wrapperError ;
690
+ }
691
+
670
692
export function inspectHooks < Props > (
671
693
renderFunction : Props => React$Node ,
672
694
props : Props ,
@@ -686,6 +708,8 @@ export function inspectHooks<Props>(
686
708
try {
687
709
ancestorStackError = new Error ( ) ;
688
710
renderFunction ( props ) ;
711
+ } catch ( error ) {
712
+ handleRenderFunctionError ( error ) ;
689
713
} finally {
690
714
readHookLog = hookLog ;
691
715
hookLog = [ ] ;
@@ -730,6 +754,8 @@ function inspectHooksOfForwardRef<Props, Ref>(
730
754
try {
731
755
ancestorStackError = new Error ( ) ;
732
756
renderFunction ( props , ref ) ;
757
+ } catch (error) {
758
+ handleRenderFunctionError ( error ) ;
733
759
} finally {
734
760
readHookLog = hookLog ;
735
761
hookLog = [ ] ;
0 commit comments