fixes

marekzelinka · Feb 3, 2025 · 594347d · 594347d
1 parent 04d595a
commit 594347d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 45 deletions.
diff --git a/app/components/error-boundary.tsx b/app/components/error-boundary.tsx
@@ -8,35 +8,34 @@ export function GeneralErrorBoundary() {
     : getErrorMessage(error);
 
   return (
-    <div>
-      <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-red-100">
+    <div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
+      <div className="flex size-12 items-center justify-center rounded-full bg-red-100">
         <ExclamationTriangleIcon className="size-6 text-red-600" />
       </div>
-      <div className="mt-3 text-center">
-        <h3 className="text-base/6 font-semibold text-gray-900">
-          Oops! An error occurred…
-        </h3>
-        <p className="mt-2 text-sm text-gray-500">{errorMessage}</p>
-      </div>
+      <h3 className="mt-3 text-base/6 font-semibold text-gray-900">
+        Oops! An error occurred…
+      </h3>
+      <p className="mt-2 text-sm text-gray-500">{errorMessage}</p>
     </div>
   );
 }
 
 function getErrorMessage(error: unknown) {
+  const fallbackMessage = "Unknown Error";
+
   if (typeof error === "string") {
     return error;
   }
-
   if (
     error &&
     typeof error === "object" &&
     "message" in error &&
     typeof error.message === "string"
   ) {
-    return error.message;
+    return error.message || fallbackMessage;
   }
 
   console.error("Unable to get error message for error", error);
 
-  return "Unknown Error";
+  return fallbackMessage;
 }
diff --git a/app/layouts/search.tsx b/app/layouts/search.tsx
@@ -4,7 +4,7 @@ import { SearchBar } from "~/components/search-bar";
 
 export default function SearchLayout() {
   return (
-    <div className="min-h-full bg-gray-100">
+    <div className="min-h-full">
       <header className="bg-gray-800 pb-24 [color-scheme:dark]">
         <div className="mx-auto max-w-3xl px-2 sm:px-4 lg:px-8">
           <div className="relative flex items-center justify-between py-5">

diff --git a/app/root.tsx b/app/root.tsx
@@ -1,14 +1,10 @@
 import type { ReactNode } from "react";
-import {
-  isRouteErrorResponse,
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "react-router";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 import type { Route } from "./+types/root";
 import "./app.css";
+import { GeneralErrorBoundary } from "./components/error-boundary";
+
+export const meta: Route.MetaFunction = () => [{ title: "DevFinder" }];
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -32,7 +28,7 @@ export function Layout({ children }: { children: ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body className="h-full antialiased [font-synthesis:none]">
+      <body className="h-full bg-gray-100 antialiased [font-synthesis:none]">
         {children}
         <ScrollRestoration />
         <Scripts />
@@ -42,34 +38,21 @@ export function Layout({ children }: { children: ReactNode }) {
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  let message = "Oops!";
-  let details = "An unexpected error occurred.";
-  let stack: string | undefined;
-
-  if (isRouteErrorResponse(error)) {
-    message = error.status === 404 ? "404" : "Error";
-    details =
-      error.status === 404
-        ? "The requested page could not be found."
-        : error.statusText || details;
-  } else if (import.meta.env.DEV && error && error instanceof Error) {
-    details = error.message;
-    stack = error.stack;
-  }
-
   return (
-    <main className="container mx-auto p-4 pt-16">
-      <h1>{message}</h1>
-      <p>{details}</p>
-      {stack && (
-        <pre className="w-full overflow-x-auto p-4">
-          <code>{stack}</code>
-        </pre>
-      )}
+    <main className="py-12">
+      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+        <div className="overflow-hidden rounded-lg bg-white shadow-sm">
+          <div className="p-6">
+            <GeneralErrorBoundary />
+          </div>
+        </div>
+      </div>
     </main>
   );
 }
 
 export default function App() {
+  throw new Error();
+
   return <Outlet />;
 }
diff --git a/app/routes/results.tsx b/app/routes/results.tsx
@@ -12,7 +12,7 @@ import type { Route } from "./+types/results";
 export function meta({ data, error }: Route.MetaArgs) {
   return [
     {
-      title: error ? "Not Found" : (data.user.name ?? `@${data.user.login}`),
+      title: `${error ? "Not Found" : (data.user.name ?? `@${data.user.login}`)} | DevFinder`,
     },
   ];
 }