change error handling and some other api improvements

Author: olegman

package.json

@@ -27,6 +27,6 @@
   },
   "dependencies": {
     "react": "15.x.x",
-    "router-async": "0.2.x"
+    "router-async": "0.4.x"
   }
 }

src/browser-router.tsx

@@ -10,6 +10,7 @@ export default class BrowserRouter extends Router {
         this.history = props.history;
     }
     static async init(opts: initParams): Promise<initResult> {
+        opts.path = opts.history.location.pathname + opts.history.location.search + opts.history.location.hash;
         const result = await super.init(opts);
         return {
             ...result,
@@ -25,19 +26,15 @@ export default class BrowserRouter extends Router {
         };
     }
     async navigate(path, ctx = new Context()) {
-        try {
-            const { redirect } = await this.router.match({ path, ctx });
+        const { redirect, error } = await this.router.match({ path, ctx });
+        if (error === null) {
             if (redirect) {
                 this.history.push(redirect);
             } else {
                 this.history.push(path);
             }
-        } catch (error) {
+        } else {
             this.history.push(path);
-            if (!this.props.errorHandler) {
-                console.error('Match Error', path, error);
-                throw error;
-            }
         }
     }
     async push(path) {
@@ -62,29 +59,24 @@ export default class BrowserRouter extends Router {
     }
     private _locationChanged = async ({ pathname, hash, search }) => {
         const path = pathname + search + hash;
-        try {
-            const { location, route, status, params, redirect, result, ctx } = await this.router.run({ path });
-            const props = {
-                router: {
-                    path,
-                    location,
-                    route,
-                    status,
-                    params,
-                    redirect,
-                    ctx
-                }
-            };
-            const renderCallback = Router.makeCallback(this.router, { path, location, route, status, params, redirect, result, ctx });
-            this.changeComponent({ Component: result, componentProps: props, path, location, renderCallback });
-        } catch (error) {
-            if (this.props.errorHandler) {
-                this.props.errorHandler(error, this);
-            } else {
-                console.error('Resolve Error', location, error);
-                throw error;
-            }
+        let { location, route, status, params, redirect, result, ctx, error } = await this.router.run({ path });
+        if (error !== null) {
+            result = Router.getErrorComponent(error, this.errors);
         }
+        const props = {
+            router: {
+                path,
+                location,
+                route,
+                status,
+                params,
+                redirect,
+                ctx,
+                error
+            }
+        };
+        const renderCallback = Router.makeCallback(this.router, { path, location, route, status, params, redirect, result, ctx });
+        this.changeComponent({ Component: result, componentProps: props, path, location, error, renderCallback });
     };
     componentDidMount() {
         this.unlistenHistroy = this.history.listen(this._locationChanged)

src/router.tsx

@@ -33,8 +33,8 @@ export interface initParams {
     routes: Array<Route>,
     hooks: any,
     history?: any,
-    silent?: boolean,
-    ctx: any
+    ctx: any,
+    errors: any
 }
 export interface initResult {
     Router?: any,
@@ -48,10 +48,11 @@ export interface initResult {
 
 export default class Router extends React.Component<Props, State> {
     router: any;
+    errors: any;
     path: string;
     location: any;
     private subscriber: any;
-    constructor({ Component, componentProps, router, path, location }) {
+    constructor({ Component, componentProps, router, path, location, errors }) {
         super();
         this.state = {
             Component,
@@ -61,18 +62,22 @@ export default class Router extends React.Component<Props, State> {
         };
 
         this.router = router;
+        this.errors = errors;
         this.subscriber = null;
     }
     static async init(opts: initParams): Promise<initResult> {
-        const { path, routes, hooks, history = null, silent = false, ctx = new Context() } = opts;
+        const { path, routes, hooks, history = null, ctx = new Context(), errors } = opts;
         let plainRoutes;
         if ((Array.isArray(routes) && React.isValidElement(routes[0])) || React.isValidElement(routes)) {
             plainRoutes = Router.buildRoutes(routes);
         } else {
             plainRoutes = routes;
         }
         const router = new RouterAsync({ routes: plainRoutes, hooks });
-        const { location, route, status, params, redirect, result } = await router.run({ path, ctx, silent });
+        let { location, route, status, params, redirect, result, error } = await router.run({ path, ctx });
+        if (error !== null) {
+            result = Router.getErrorComponent(error, errors);
+        }
         const componentProps = {
             router: {
                 path,
@@ -81,7 +86,8 @@ export default class Router extends React.Component<Props, State> {
                 status,
                 params,
                 redirect,
-                ctx
+                ctx,
+                error
             }
         };
 
@@ -95,10 +101,12 @@ export default class Router extends React.Component<Props, State> {
                 router,
                 path,
                 location,
-                history
+                history,
+                errors
             },
             componentProps,
-            callback: this.makeCallback(router, { path, location, route, status, params, redirect, result, ctx })
+            callback: this.makeCallback(router, { path, location, route, status, params, redirect, result, ctx }),
+            error
         }
     }
     static buildRoutes(routes) {
@@ -124,10 +132,22 @@ export default class Router extends React.Component<Props, State> {
     subscribe(callback: Function) {
         this.subscriber = callback.bind(this);
     }
-    changeComponent({ Component, componentProps, path, location, renderCallback }) {
+    static getErrorComponent(error, errors) {
+        if (error.status in errors) {
+            return errors[error.status];
+        }
+        if ('*' in errors) {
+            return errors['*'];
+        }
+        return 'Internal error';
+    }
+    changeComponent({ Component, componentProps, path, location, error, renderCallback }) {
         if (this.subscriber) {
-            this.subscriber({ Component, componentProps, path, location, renderCallback });
+            this.subscriber({ Component, componentProps, path, location, error, renderCallback });
         } else {
+            if (error !== null) {
+                Component = Router.getErrorComponent(error, this.errors);
+            }
             this.setState({
                 path,
                 location,
@@ -136,16 +156,6 @@ export default class Router extends React.Component<Props, State> {
             }, renderCallback);
         }
     }
-    replaceComponent(Component, componentProps) {
-        if (this.subscriber) {
-            this.subscriber({ Component, componentProps, path: this.state.path, location: this.state.location })
-        } else {
-            this.setState({
-                Component,
-                componentProps
-            });
-        }
-    }
     getState() {
         return this.state;
     }

yarn.lock

@@ -94,9 +94,9 @@ [email protected]:
     loose-envify "^1.1.0"
     object-assign "^4.1.0"
 
-router-async@0.2.x:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/router-async/-/router-async-0.2.3.tgz#60606e65bb8f303da268ef31c5038b286ad0eb4e"
+router-async@0.4.x:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/router-async/-/router-async-0.4.0.tgz#baa2b1c99af6deff141ff24acd5e7f02e3c757d1"
   dependencies:
     path-to-regexp "^1.6.0"
     query-string "^4.2.3"