Added error boundaries functions for reactv16 option

abdullahceylan · Dec 8, 2018 · f15667e · f15667e
1 parent 3e17dd8
commit f15667e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 22 deletions.
diff --git a/assets/templates/component-container.template b/assets/templates/component-container.template
@@ -7,33 +7,39 @@ class {componentName} extends PureComponent {
     super(props);
 
     this.state = {
-      demoState: 0,
+      hasError: false,
     };
   }
-
+<legacy>
   componentWillMount = () => {
     console.log('{componentName} will mount');
   }
-
+</legacy>
   componentDidMount = () => {
     console.log('{componentName} mounted');
   }
 <legacy>
   componentWillReceiveProps = (nextProps) => {
     console.log('{componentName} will receive props', nextProps);
   }
-</legacy>
-<reactv16>
-  getDerivedStateFromProps = (nextProps, prevState) => {
-    console.log('{componentName} getDerivedStateFromProps', nextProps, prevState);
-  }
-</reactv16>
-<legacy>
+
   componentWillUpdate = (nextProps, nextState) => {
     console.log('{componentName} will update', nextProps, nextState);
   }
-</legacy>
-<reactv16>
+</legacy><reactv16>
+  static getDerivedStateFromError(error) {
+    // getDerivedStateFromError -> Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    // You can also log the error to an error reporting service
+  }
+
+  getDerivedStateFromProps = (nextProps, prevState) => {
+    console.log('{componentName} getDerivedStateFromProps', nextProps, prevState);
+  }
+
   getSnapshotBeforeUpdate = (prevProps, prevState) => {
     console.log('{componentName} getSnapshotBeforeUpdate', prevProps, prevState);
   }
@@ -47,6 +53,9 @@ class {componentName} extends PureComponent {
   }
 
   render () {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>;
+    }
     return (
       <div className="{componentName}Wrapper">
         Test content

diff --git a/assets/templates/component-reduxContainer.template b/assets/templates/component-reduxContainer.template
@@ -8,33 +8,36 @@ class {componentName} extends PureComponent {
     super(props);
 
     this.state = {
-      demoState: 0,
+      hasError: false,
     };
   }
-
+<legacy>
   componentWillMount = () => {
     console.log('{componentName} will mount');
   }
-
+</legacy>
   componentDidMount = () => {
     console.log('{componentName} mounted');
   }
 <legacy>
   componentWillReceiveProps = (nextProps) => {
     console.log('{componentName} will receive props', nextProps);
   }
-</legacy>
-<reactv16>
-  getDerivedStateFromProps = (nextProps, prevState) => {
-    console.log('{componentName} getDerivedStateFromProps', nextProps, prevState);
-  }
-</reactv16>
-<legacy>
+
   componentWillUpdate = (nextProps, nextState) => {
     console.log('{componentName} will update', nextProps, nextState);
   }
 </legacy>
 <reactv16>
+  static getDerivedStateFromError(error) {
+    // getDerivedStateFromError -> Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    // You can also log the error to an error reporting service
+  }
+
   getSnapshotBeforeUpdate = (prevProps, prevState) => {
     console.log('{componentName} getSnapshotBeforeUpdate', prevProps, prevState);
   }
@@ -48,6 +51,9 @@ class {componentName} extends PureComponent {
   }
 
   render () {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>;
+    }
     return (
       <div className="{componentName}Wrapper">
         Test content