rehydrate error state from server to browser

Author: olegman

package.json

@@ -28,8 +28,10 @@
   "devDependencies": {
     "typescript": "^2.1.4"
   },
+  "peerDependencies": {
+    "react": "15.x.x"
+  },
   "dependencies": {
-    "react": "15.x.x",
     "router-async": "0.5.x"
   }
 }

src/browser-router.tsx

@@ -8,6 +8,15 @@ export default class BrowserRouter extends Router {
     constructor(props) {
         super(props);
         this.history = props.history;
+        if (window && '__REACT_ROUTER_ASYNC__' in window) {
+            const stateFromServer = window['__REACT_ROUTER_ASYNC__'].state;
+            if (stateFromServer.error !== null) {
+                this.state = {
+                    ...stateFromServer,
+                    Component: BrowserRouter.getErrorComponent(stateFromServer.error, this.errors)
+                }
+            }
+        }
     }
     static async init(opts: initParams): Promise<initResult> {
         opts.path = opts.history.location.pathname + opts.history.location.search + opts.history.location.hash;

src/router.tsx

@@ -14,6 +14,7 @@ export interface State {
     componentProps?: any;
     path?: any;
     location?: any;
+    error?: any;
 }
 export interface Action {
     (): React.ReactElement<Props>;
@@ -58,7 +59,8 @@ export default class Router extends React.Component<Props, State> {
             Component,
             componentProps,
             path,
-            location
+            location,
+            error: componentProps.router.error
         };
 
         this.router = router;
@@ -152,18 +154,22 @@ export default class Router extends React.Component<Props, State> {
                 path,
                 location,
                 Component,
-                componentProps
+                componentProps,
+                error
             }, renderCallback);
         }
     }
     getState() {
         return this.state;
     }
     render() {
-        if (this.props.children) {
-            return React.Children.only(this.props.children)
-        } else {
-            return <this.state.Component {...this.state.componentProps} />
-        }
+        return (
+            <div>
+                {this.props.children ? this.props.children : <this.state.Component {...this.state.componentProps} />}
+                <script dangerouslySetInnerHTML={{ __html: `window.__REACT_ROUTER_ASYNC__=${JSON.stringify({
+                    state: this.state
+                })};`}} />
+            </div>
+        )
     }
 }

yarn.lock

@@ -2,68 +2,10 @@
 # yarn lockfile v1
 
 
-asap@~2.0.3:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
-
-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-
-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
-  dependencies:
-    iconv-lite "~0.4.13"
-
-fbjs@^0.8.4:
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6"
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
-
-iconv-lite@~0.4.13:
-  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
-
-is-stream@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
 
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
-js-tokens@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.0.tgz#a2f2a969caae142fb3cd56228358c89366957bd1"
-
-loose-envify@^1.0.0, loose-envify@^1.1.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
-  dependencies:
-    js-tokens "^3.0.0"
-
-node-fetch@^1.0.1:
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
 object-assign@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -74,50 +16,24 @@ path-to-regexp@^1.6.0:
   dependencies:
     isarray "0.0.1"
 
-promise@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
-  dependencies:
-    asap "~2.0.3"
-
 query-string@^4.2.3:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.1.tgz#54baada6713eafc92be75c47a731f2ebd09cd11d"
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.2.tgz#ec0fd765f58a50031a3968c2431386f8947a5cdd"
   dependencies:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-[email protected]:
-  version "15.4.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"
-  dependencies:
-    fbjs "^0.8.4"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.0"
-
 [email protected]:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/router-async/-/router-async-0.5.2.tgz#6b0c5448de137dfb425798a51d5d6ce7cc312161"
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/router-async/-/router-async-0.5.3.tgz#0b6c39f4858a3d37691e394b0e5cba7811c2d77d"
   dependencies:
     path-to-regexp "^1.6.0"
     query-string "^4.2.3"
 
-setimmediate@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
 
 typescript@^2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.1.5.tgz#6fe9479e00e01855247cea216e7561bafcdbcd4a"
-
-ua-parser-js@^0.7.9:
-  version "0.7.12"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
-
-whatwg-fetch@>=0.10.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.1.tgz#078b9461bbe91cea73cbce8bb122a05f9e92b772"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.2.0.tgz#626f2fc70087d2480f21ebb12c1888288c8614e3"