ADD: nice error page

FileFormatInfo · Aug 6, 2024 · 9c41d87 · 9c41d87
1 parent f4463c9
commit 9c41d87
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 34 deletions.
diff --git 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 (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <noscript>
-        <style>
-          {`.scriptonly { display: none !important; }`}
-        </style>
-        </noscript>
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        {children}
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
-  );
+function MyLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en">
+            <head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <noscript>
+                    <style>
+                        {`.scriptonly { display: none !important; }`}
+                    </style>
+                </noscript>
+                <Meta />
+                <Links />
+            </head>
+            <body>
+                {children}
+                <ScrollRestoration />
+                <Scripts />
+            </body>
+        </html>
+    );
 }
 
 export default function App() {
-  return (
-  <ChakraProvider>
-    <Outlet />
-  </ChakraProvider>
-  )
+    return (
+        <MyLayout>
+        <ChakraProvider>
+            <Outlet />
+        </ChakraProvider>
+        </MyLayout>
+    )
 }
+
+function ErrorDisplay({ error }: { error: unknown }) {
+    if (isRouteErrorResponse(error)) {
+        return (
+                <VStack>
+                    <img
+                        alt="Error icon"
+                        src="/images/error.svg"
+                        style={{ width: "5rem", height: "5rem" }}
+                    />
+                    <Text>{error.status} {error.statusText}</Text>
+                <Text>{error.data}</Text>
+                </VStack>
+        );
+    } else if (error instanceof Error) {
+        return (
+            <VStack>
+                <img
+                    alt="Error icon"
+                    src="/images/error.svg"
+                    style={{ width: "5rem", height: "5rem" }}
+                />
+                <Text>{error.message}</Text>
+                <pre style={{"display":"none"}}>{error.stack}</pre>
+            </VStack>
+        );
+    } else {
+        return <h1>Unknown Error</h1>;
+    }
+}
+
+export function ErrorBoundary() {
+    const error = useRouteError();
+    console.error(error);
+    return (
+        <MyLayout>
+            <ChakraProvider>
+                <FullPage>
+                    <ErrorDisplay error={error} />
+                </FullPage>
+            </ChakraProvider>
+        </MyLayout>
+    );
+}
+
diff --git 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
@@ -242,7 +242,7 @@ export default function ViewPage() {
                 {isDebug && (
                     <Text position={"absolute"} top={"42pt"} left={2}>
                         Zoom: cur={currentZoom}, url={urlZoom}, max=
-                        {calcMaxZoom(naturalWidth, naturalHeight, containerRef)})
+                        {calcMaxZoom(naturalWidth, naturalHeight, containerWidth, containerHeight)})
                     </Text>
                 )}
                 {isDebug && (