[Breaking] Use error object

demos/intermediate/src/containers/NotFound/index.tsx

@@ -8,7 +8,7 @@ const NotFound: ErrorPageComponentType = ({ error }) => (
     <img className={styles.image} src={`/img/missingno.png`} alt="Not found" />
     <h1 className={styles.title}>Uh-oh!</h1>
     <p className={styles.body}>We couldn't catch that Pokémon.</p>
-    {error && <small className={styles.error}>{error}</small>}
+    {error instanceof Error && <small className={styles.error}>{error.message}</small>}
 
     <Link to="/">View 'em all</Link>
   </div>

docs/page-components.md

@@ -59,7 +59,7 @@ import {
 const NotFound: ErrorPageComponentType = ({ error }) => (
   <div>
     <h1>Not found.</h1>
-    {error && <p>{error}</p>}
+    {error instanceof Error && <p>{error.message}</p>}
   </div>
 );
 

package/src/Guard.tsx

@@ -13,7 +13,6 @@ import {
   NextAction,
   NextPropsPayload,
   NextRedirectPayload,
-  RouteError,
 } from './types';
 
 type PageProps = NextPropsPayload;
@@ -40,7 +39,7 @@ const Guard: React.FunctionComponent<GuardProps> = ({ children, component, meta,
   const hasGuards = useMemo(() => !!(guards && guards.length > 0), [guards]);
   const [validationsRequested, setValidationsRequested] = useStateRef<number>(0);
   const [routeValidated, setRouteValidated] = useStateRef<boolean>(!hasGuards);
-  const [routeError, setRouteError] = useStateWhenMounted<RouteError>(null);
+  const [routeError, setRouteError] = useStateWhenMounted<unknown>(undefined);
   const [routeRedirect, setRouteRedirect] = useStateWhenMounted<RouteRedirect>(null);
   const [pageProps, setPageProps] = useStateWhenMounted<PageProps>({});
 
@@ -126,15 +125,15 @@ const Guard: React.FunctionComponent<GuardProps> = ({ children, component, meta,
     const currentRequests = validationsRequested.current;
 
     let pageProps: PageProps = {};
-    let routeError: RouteError = null;
+    let routeError: unknown = undefined;
     let routeRedirect: RouteRedirect = null;
 
     try {
       const { props, redirect } = await resolveAllGuards();
       pageProps = props;
       routeRedirect = redirect;
     } catch (error) {
-      routeError = error.message || 'Not found.';
+      routeError = error;
     }
 
     if (currentRequests === getValidationsRequested()) {
@@ -152,7 +151,7 @@ const Guard: React.FunctionComponent<GuardProps> = ({ children, component, meta,
   useEffect(() => {
     if (hasPathChanged) {
       setValidationsRequested(requests => requests + 1);
-      setRouteError(null);
+      setRouteError(undefined);
       setRouteRedirect(null);
       setRouteValidated(!hasGuards);
       if (hasGuards) {

package/src/index.ts

@@ -6,7 +6,6 @@ export {
   GuardFunction,
   GuardProviderProps,
   Next,
-  RouteError,
   PageComponent,
   LoadingPageComponentType,
   ErrorPageComponentType,

package/src/types.ts

@@ -57,8 +57,6 @@ export type GuardFunction = (
   next: Next,
 ) => void;
 
-export type RouteError = string | null;
-
 /**
  * Page Component Types
  */
@@ -72,10 +70,10 @@ export type PageComponent<P = {}> =
   | number;
 
 export type LoadingPageComponent = PageComponent;
-export type ErrorPageComponent = PageComponent<{ error: RouteError }>;
+export type ErrorPageComponent = PageComponent<{ error: unknown }>;
 
 export type LoadingPageComponentType = PageComponentType;
-export type ErrorPageComponentType = PageComponentType<{ error: RouteError }>;
+export type ErrorPageComponentType = PageComponentType<{ error: unknown }>;
 
 /**
  * Props