Set name property on JS component classes so they show up in ErrorB…

…oundary stacks
Workiva · Aug 27, 2021 · 23bae71 · 23bae71
1 parent 2bcf5b2
commit 23bae71
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/lib/react_client/component_factory.dart b/lib/react_client/component_factory.dart
@@ -360,7 +360,7 @@ JsFunctionComponent _wrapFunctionComponent(DartFunctionComponent dartFunctionCom
       componentZone.run(() => dartFunctionComponent(JsBackedMap.backedBy(jsProps)) ?? jsNull);
   JsFunctionComponent interopFunction = allowInterop(jsFunctionComponent);
   if (displayName != null) {
-    // This is a work-around to display the correct name in the React DevTools.
+    // This is a work-around to display the correct name in the React DevTools and error boundary component stacks.
     defineProperty(interopFunction, 'name', JsPropertyDescriptor(value: displayName));
   }
   // ignore: invalid_use_of_protected_member
@@ -386,7 +386,7 @@ ReactClass _wrapForwardRefFunctionComponent(DartForwardRefFunctionComponent dart
 
   final interopFunction = allowInterop(jsFunctionComponent);
   if (displayName != null) {
-    // This is a work-around to display the correct name in the React DevTools.
+    // This is a work-around to display the correct name in the React DevTools and error boundary component stacks.
     defineProperty(interopFunction, 'name', JsPropertyDescriptor(value: displayName));
   }
   final jsForwardRefFunction = React.forwardRef(interopFunction);

diff --git a/lib/src/react_client/component_registration.dart b/lib/src/react_client/component_registration.dart
@@ -1,5 +1,6 @@
 import 'dart:html';
 
+import 'package:js/js_util.dart';
 import 'package:react/react.dart';
 import 'package:react/react_client/bridge.dart';
 import 'package:react/react_client/js_backed_map.dart';
@@ -8,6 +9,8 @@ import 'package:react/react_client/component_factory.dart';
 
 import 'package:react/src/react_client/dart_interop_statics.dart';
 
+import '../js_interop_util.dart';
+
 /// Util used with `registerComponent2` to ensure no important lifecycle
 /// events are skipped. This includes `shouldComponentUpdate`,
 /// `componentDidUpdate`, and `render` because they utilize
@@ -66,12 +69,20 @@ ReactDartComponentFactoryProxy registerComponent(
       contextKeys: componentInstance.contextKeys,
     );
 
+    final displayName = componentInstance.displayName;
+
     /// Create the JS [`ReactClass` component class](https://facebook.github.io/react/docs/top-level-api.html#react.createclass)
     /// with custom JS lifecycle methods.
     var reactComponentClass = createReactDartComponentClass(dartInteropStatics, componentStatics, jsConfig)
       // ignore: invalid_use_of_protected_member
       ..dartComponentVersion = ReactDartComponentVersion.component
-      ..displayName = componentFactory().displayName;
+      // This is redundant since we also set `name` below, but some code may depend on reading displayName
+      // so we'll leave this in place for now.
+      ..displayName = displayName;
+
+    // This is a work-around to display the correct name in error boundary component stacks
+    // (and in the React DevTools if we weren't already setting displayName).
+    defineProperty(reactComponentClass, 'name', JsPropertyDescriptor(value: displayName));
 
     // Cache default props and store them on the ReactClass so they can be used
     // by ReactDartComponentFactoryProxy and externally.
@@ -135,11 +146,20 @@ ReactDartComponentFactoryProxy2 registerComponent2(
       propTypes: jsPropTypes ?? JsBackedMap().jsObject,
     );
 
+    final displayName = componentInstance.displayName;
+
     /// Create the JS [`ReactClass` component class](https://facebook.github.io/react/docs/top-level-api.html#react.createclass)
     /// with custom JS lifecycle methods.
     var reactComponentClass =
         createReactDartComponentClass2(ReactDartInteropStatics2.staticsForJs, componentStatics, jsConfig2)
-          ..displayName = componentInstance.displayName;
+          // This is redundant since we also set `name` below, but some code may depend on reading displayName
+          // so we'll leave this in place for now.
+          ..displayName = displayName;
+
+    // This is a work-around to display the correct name in error boundary component stacks
+    // (and in the React DevTools if we weren't already setting displayName).
+    defineProperty(reactComponentClass, 'name', JsPropertyDescriptor(value: displayName));
+
     // ignore: invalid_use_of_protected_member
     reactComponentClass.dartComponentVersion = ReactDartComponentVersion.component2;