diff --git a/app/root.tsx b/app/root.tsx
index 88cd858..0f7d4be 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,39 +1,89 @@
import {
- Links,
- Meta,
- Outlet,
- Scripts,
- ScrollRestoration,
+ isRouteErrorResponse,
+ Links,
+ Meta,
+ Outlet,
+ Scripts,
+ ScrollRestoration,
+ useRouteError,
} from "@remix-run/react";
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider, Text, VStack } from "@chakra-ui/react";
+import { FullPage } from "./components/FullPage";
-export function Layout({ children }: { children: React.ReactNode }) {
- return (
-
-
-
-
-
-
-
-
-
- {children}
-
-
-
-
- );
+function MyLayout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ );
}
export default function App() {
- return (
-
-
-
- )
+ return (
+
+
+
+
+
+ )
}
+
+function ErrorDisplay({ error }: { error: unknown }) {
+ if (isRouteErrorResponse(error)) {
+ return (
+
+ 
+ {error.status} {error.statusText}
+ {error.data}
+
+ );
+ } else if (error instanceof Error) {
+ return (
+
+
+ {error.message}
+ {error.stack}
+
+ );
+ } else {
+ return Unknown Error
;
+ }
+}
+
+export function ErrorBoundary() {
+ const error = useRouteError();
+ console.error(error);
+ return (
+
+
+
+
+
+
+
+ );
+}
+
diff --git a/app/routes/random[.]html.tsx b/app/routes/random[.]html.tsx
index 6a6cabf..fbb800a 100644
--- a/app/routes/random[.]html.tsx
+++ b/app/routes/random[.]html.tsx
@@ -29,7 +29,7 @@ export async function loader({
return redirect(`/view.html?url=${encodeURIComponent(data.results[0].url)}&zoom=${encodeURIComponent(zoom)}`);
} catch (e: unknown) {
const err = e instanceof Error ? e : new Error(`An error occurred ${e}`);
- return redirect(`/?error=${encodeURIComponent(err.message)}`);
+ throw(err);
}
}
diff --git a/app/routes/view[.]html/route.tsx b/app/routes/view[.]html/route.tsx
index 780aad0..781f16f 100644
--- a/app/routes/view[.]html/route.tsx
+++ b/app/routes/view[.]html/route.tsx
@@ -242,7 +242,7 @@ export default function ViewPage() {
{isDebug && (
Zoom: cur={currentZoom}, url={urlZoom}, max=
- {calcMaxZoom(naturalWidth, naturalHeight, containerRef)})
+ {calcMaxZoom(naturalWidth, naturalHeight, containerWidth, containerHeight)})
)}
{isDebug && (