CPLAT-3094 Lifecycle Error Boundary

example/test/react_test.dart

@@ -12,6 +12,7 @@ void main() {
         helloGreeter({'key': 'hello'}, []),
         listComponent({'key': 'list'}, []),
         component2TestComponent({'key': 'c2-list'}, []),
+        component2ErrorTestComponent({'key': 'error-boundary'}, []),
         //clockComponent({"name": 'my-clock'}, []),
         checkBoxComponent({'key': 'checkbox'}, [])
       ]),

example/test/react_test_components.dart

@@ -448,3 +448,99 @@ class _Component2TestComponent extends react.Component2 with react.TypedSnapshot
 
 var newContextTypeConsumerComponentComponent = react.registerComponent(() => new _NewContextTypeConsumerComponent());
 var component2TestComponent = react.registerComponent(() => new _Component2TestComponent());
+
+class _ErrorComponent extends react.Component2 {
+  void componentDidMount() {
+    if (!props["errored"]) {
+      throw new _JoesException("It broke!", 2);
+    }
+  }
+
+  dynamic render() {
+    return react.div(
+        {'key': 'eb-d1-e'},
+        "Oh no, I'm an error! Check your "
+        "console.");
+  }
+}
+
+var ErrorComponent = react.registerComponent(() => new _ErrorComponent());
+
+class _JoesException implements Exception {
+  int code;
+  String message;
+  String randoMessage;
+
+  _JoesException(this.message, this.code) {
+    switch (code) {
+      case 1:
+        randoMessage = "The code is a 1";
+        break;
+      case 2:
+        randoMessage = "The Code is a 2";
+        break;
+      default:
+        randoMessage = "Whaaaaaa";
+    }
+  }
+}
+
+class _Component2ErrorTestComponent extends react.Component2 {
+  Map getInitialState() {
+    return {
+      "clicked": false,
+      "errored": false,
+      "error": null,
+    };
+  }
+
+  void componentDidCatch(error, info) {
+    setState({
+      "error": "We can capture the error, store it in state and "
+          "display it here."
+    });
+  }
+
+  Map getDerivedStateFromError(error) {
+    return {"errored": true};
+  }
+
+  void error(event) {
+    setState({"clicked": true});
+  }
+
+  void clearError(event) {
+    setState({"clicked": false, "error": null, "errored": false});
+  }
+
+  dynamic render() {
+    dynamic errorMessage = state["error"] ?? "No error yet";
+
+    return react.div({
+      "key": "e-cont"
+    }, [
+      react.h3({"key": "e-header"}, "Error Boundary Test"),
+      state["clicked"] ? ErrorComponent({'key': 'ec-1', 'errored': state['errored']}) : null,
+      errorMessage != null ? react.div({'key': 'ec-m-1'}, '$errorMessage') : null,
+      !state["errored"]
+          ? react.button({
+              'type': 'button',
+              'key': 'c3-r-button',
+              'className': 'btn btn-primary',
+              'onClick': error,
+            }, 'Trigger Error')
+          : null,
+      state["errored"]
+          ? react.button({
+              'type': 'button',
+              'key': 'c3-c-button',
+              'className': 'btn btn-primary',
+              'onClick': clearError,
+            }, 'Clear Error')
+          : null,
+      react.hr({"key": "e-hr"}),
+    ]);
+  }
+}
+
+var component2ErrorTestComponent = react.registerComponent(() => new _Component2ErrorTestComponent(), ['render']);

js_src/_dart_helpers.js

@@ -79,7 +79,7 @@ function _createReactDartComponentClass(dartInteropStatics, componentStatics, js
   return ReactDartComponent;
 }
 
-function _createReactDartComponentClass2(dartInteropStatics, componentStatics, jsConfig) {
+function _createReactDartComponentClass2(dartInteropStatics, componentStatics, jsConfig, skipMethods) {
   class ReactDartComponent2 extends React.Component {
     constructor(props, context) {
       super(props, context);
@@ -103,12 +103,26 @@ function _createReactDartComponentClass2(dartInteropStatics, componentStatics, j
     componentWillUnmount() {
       dartInteropStatics.handleComponentWillUnmount(this.dartComponent);
     }
+    componentDidCatch(error, info) {
+      dartInteropStatics.handleComponentDidCatch(this.dartComponent, error, info);
+    }
+    static getDerivedStateFromError(error) {
+      return dartInteropStatics.handleGetDerivedStateFromError(componentStatics, error);
+    }
     render() {
       var result = dartInteropStatics.handleRender(this.dartComponent, this.props, this.state, this.context);
       if (typeof result === 'undefined') result = null;
       return result;
     }
   }
+  console.log(skipMethods);
+  // Delete methods that the user does not want to include (such as error boundary event).
+  skipMethods.forEach((method) => {
+      if (ReactDartComponent2[method] !== undefined) {
+        delete ReactDartComponent2[method];
+      }
+    });
+
 
   if (jsConfig) {
     if (jsConfig.contextType) {

lib/react.dart

@@ -714,6 +714,36 @@ abstract class Component2 implements Component {
   /// See: <https://facebook.github.io/react/docs/react-component.html#unmounting-componentwillunmount>
   void componentWillUnmount() {}
 
+  /// ReactJS lifecycle method that is invoked after an error is thrown by a
+  /// descendant.
+  ///
+  /// Use this method primarily for logging errors, but because it takes
+  /// place after the commit phase side-effects are permitted.
+  ///
+  /// __Note__: This method, along with [getDerivedStateFromError] will only
+  /// be called if `skipMethods` in [_registerComponent] is overridden with
+  /// a list (which can be empty). Otherwise, in order to prevent every
+  /// component from being an error boundary, [componentDidCatch] and
+  /// [getDerivedStateFromError] will be ignored.
+  ///
+  /// See: <https://facebook.github.io/react/docs/react-component.html#componentdidcatch>
+  void componentDidCatch(dynamic error, dynamic info) {}
+
+  /// ReactJS lifecycle method that is invoked after an error is thrown by a
+  /// descendant.
+  ///
+  /// Use this method to capture the error and update component state after an
+  /// error is thrown.
+  ///
+  /// __Note__: This method, along with [componentDidCatch] will only
+  /// be called if `skipMethods` in [_registerComponent] is overridden with
+  /// a list (which can be empty). Otherwise, in order to prevent every
+  /// component from being an error boundary, [componentDidCatch] and
+  /// [getDerivedStateFromError] will be ignored.
+  ///
+  /// See: <https://facebook.github.io/react/docs/react-component.html#componentdidcatch>
+  Map getDerivedStateFromError(dynamic error) {}
+
   /// Invoked once before the `Component` is mounted. The return value will be used as the initial value of [state].
   ///
   /// See: <https://facebook.github.io/react/docs/react-component.html#getinitialstate>
@@ -1461,6 +1491,16 @@ class SyntheticWheelEvent extends SyntheticEvent {
   throw new Exception('setClientConfiguration must be called before registerComponent.');
 };
 
+/// Registers [componentFactory] on both client and server.
+/*ComponentRegistrar*/ Function registerComponent2 = (/*ComponentFactory*/ componentFactory,
+    [/*Iterable<String>*/ skipMethods = const [
+      'getDerivedStateFromError',
+      'compo'
+          'nentDidCatch'
+    ]]) {
+  throw new Exception('setClientConfiguration must be called before registerComponent.');
+};
+
 /// The HTML `<a>` [AnchorElement].
 var a;
 

lib/react_client.dart

@@ -209,6 +209,44 @@ dynamic _convertArgsToChildren(List childrenArgs) {
   }
 }
 
+/// Util used with [_registerComponent2] to ensure no imporant lifecycle
+/// methods are skipped. This includes [shouldComponentUpdate],
+/// [componentDidUpdate], and [render] because they utilize
+/// [_updatePropsAndStateWithJs].
+///
+/// Returns the life of lifecycle methods to skip, having removed the
+/// important ones. If an important lifecycle event was set for skipping, a
+/// warning is issued.
+
+List<String> _filterSkipMethods(List<String> methods) {
+  List<String> finalList = List.from(methods);
+  bool warn = false;
+
+  if (finalList.contains('shouldComponentUpdate')) {
+    finalList.remove('shouldComponentUpdate');
+    warn = true;
+  }
+
+  if (finalList.contains('componentDidUpdate')) {
+    finalList.remove('componentDidUpdate');
+    warn = true;
+  }
+
+  if (finalList.contains('render')) {
+    finalList.remove('render');
+    warn = true;
+  }
+
+  if (warn) {
+    window.console.warn("WARNING: Crucial lifecycle methods passed into "
+        "skipMethod. shouldComponentUpdate, componentDidUpdate, and render "
+        "cannot be skipped and will still be added to the new component. Please "
+        "remove them from skipMethods.");
+  }
+
+  return finalList;
+}
+
 @JS('Object.keys')
 external List<String> _objectKeys(Object object);
 
@@ -564,6 +602,14 @@ final ReactDartInteropStatics2 _dartInteropStatics2 = (() {
         component.componentWillUnmount();
       });
 
+  void handleComponentDidCatch(Component2 component, dynamic error, dynamic info) => zone.run(() {
+        component.componentDidCatch(error, info);
+      });
+
+  JsMap handleGetDerivedStateFromError(ComponentStatics componentStatics, dynamic error) => zone.run(() {
+        return jsBackingMapOrJsCopy(componentStatics.componentInstance.getDerivedStateFromError(error));
+      });
+
   dynamic handleRender(Component2 component, JsMap jsProps, JsMap jsState, dynamic jsContext) => zone.run(() {
         _updatePropsAndStateWithJs(component, jsProps, jsState, jsContext);
         return component.render();
@@ -579,6 +625,8 @@ final ReactDartInteropStatics2 _dartInteropStatics2 = (() {
     handleGetSnapshotBeforeUpdate: allowInterop(handleGetSnapshotBeforeUpdate),
     handleComponentDidUpdate: allowInterop(handleComponentDidUpdate),
     handleComponentWillUnmount: allowInterop(handleComponentWillUnmount),
+    handleComponentDidCatch: allowInterop(handleComponentDidCatch),
+    handleGetDerivedStateFromError: allowInterop(handleGetDerivedStateFromError),
     handleRender: allowInterop(handleRender),
   );
 })();
@@ -587,7 +635,7 @@ final ReactDartInteropStatics2 _dartInteropStatics2 = (() {
 /// which produces a new JS [`ReactClass` component class](https://facebook.github.io/react/docs/top-level-api.html#react.createclass).
 @Deprecated('6.0.0')
 ReactDartComponentFactoryProxy _registerComponent(ComponentFactory componentFactory,
-    [Iterable<String> skipMethods = const []]) {
+    [Iterable<String> skipMethods = const ['getDerivedStateFromError', 'componentDidCatch']]) {
   var componentInstance = componentFactory();
 
   if (componentInstance is Component2) {
@@ -708,9 +756,14 @@ class ReactJsComponentFactoryProxy extends ReactComponentFactoryProxy {
 /// Creates and returns a new [ReactDartComponentFactoryProxy] from the provided [componentFactory]
 /// which produces a new JS [`ReactClass` component class](https://facebook.github.io/react/docs/top-level-api.html#react.createclass).
 ReactDartComponentFactoryProxy2 _registerComponent2(ComponentFactory<Component2> componentFactory,
-    [Iterable<String> skipMethods = const []]) {
+    [Iterable<String> skipMethods = const [
+      'getDerivedStateFromError',
+      'compo'
+          'nentDidCatch'
+    ]]) {
   final componentInstance = componentFactory();
-  final componentStatics = new ComponentStatics(componentFactory);
+  final componentStatics = new ComponentStatics(componentFactory, componentInstance: componentInstance);
+  final filteredSkipMethods = _filterSkipMethods(skipMethods);
 
   // Cache default props and store them on the ReactClass so they can be used
   // by ReactDartComponentFactoryProxy and externally.
@@ -723,8 +776,9 @@ ReactDartComponentFactoryProxy2 _registerComponent2(ComponentFactory<Component2>
 
   /// 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(_dartInteropStatics2, componentStatics, jsConfig2)
-    ..displayName = componentInstance.displayName;
+  var reactComponentClass =
+      createReactDartComponentClass2(_dartInteropStatics2, componentStatics, jsConfig2, filteredSkipMethods)
+        ..displayName = componentInstance.displayName;
 
   reactComponentClass.dartComponentVersion = '2';
 

lib/react_client/react_interop.dart

@@ -321,7 +321,7 @@ external ReactClass createReactDartComponentClass(
 @JS('_createReactDartComponentClass2')
 external ReactClass createReactDartComponentClass2(
     ReactDartInteropStatics2 dartInteropStatics, ComponentStatics<Component2> componentStatics,
-    [JsComponentConfig2 jsConfig]);
+    [JsComponentConfig2 jsConfig, List<String> skipMethods]);
 
 @JS('React.__isDevelopment')
 external bool get _inReactDevMode;
@@ -411,6 +411,8 @@ class ReactDartInteropStatics2 implements ReactDartInteropStatics {
     )
         handleComponentDidUpdate,
     void Function(Component2 component) handleComponentWillUnmount,
+    void Function(Component2 component, dynamic error, dynamic info) handleComponentDidCatch,
+    void Function(ComponentStatics componentInstance, dynamic error) handleGetDerivedStateFromError,
     dynamic Function(Component2 component, JsMap jsProps, JsMap jsState, dynamic jsContext) handleRender,
   });
 }
@@ -423,8 +425,8 @@ class ReactDartInteropStatics2 implements ReactDartInteropStatics {
 /// See [ReactDartInteropStatics], [createReactDartComponentClass].
 class ComponentStatics<T extends Component> {
   final ComponentFactory<T> componentFactory;
-
-  ComponentStatics(this.componentFactory);
+  final Component2 componentInstance;
+  ComponentStatics(this.componentFactory, {this.componentInstance});
 }
 
 /// Additional configuration passed to [createReactDartComponentClass]