feat: ✨ add default not found and error pages

package.json

@@ -26,7 +26,7 @@
   "prettier": "@jimmy.codes/prettier-config",
   "dependencies": {
     "@tanstack/react-query": "5.59.16",
-    "@tanstack/react-router": "1.76.3",
+    "@tanstack/react-router": "1.77.8",
     "clsx": "2.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -48,8 +48,8 @@
     "@storybook/react-vite": "8.3.6",
     "@tailwindcss/typography": "0.5.15",
     "@tanstack/react-query-devtools": "5.59.16",
-    "@tanstack/router-devtools": "1.76.3",
-    "@tanstack/router-vite-plugin": "1.76.0",
+    "@tanstack/router-devtools": "1.77.8",
+    "@tanstack/router-vite-plugin": "1.77.7",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.1",
@@ -59,18 +59,18 @@
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react-swc": "3.7.1",
-    "@vitest/coverage-v8": "2.1.3",
-    "@vitest/ui": "2.1.3",
+    "@vitest/coverage-v8": "2.1.4",
+    "@vitest/ui": "2.1.4",
     "autoprefixer": "10.4.20",
-    "daisyui": "4.12.13",
+    "daisyui": "4.12.14",
     "eslint": "8.57.0",
     "eslint-plugin-storybook": "0.10.0--canary.156.408aed4.0",
     "gitzy": "5.4.0",
     "happy-dom": "15.7.4",
     "is-ci": "3.0.1",
-    "knip": "5.34.0",
-    "lefthook": "1.8.1",
-    "msw": "2.5.1",
+    "knip": "5.34.3",
+    "lefthook": "1.8.2",
+    "msw": "2.6.0",
     "postcss": "8.4.47",
     "prettier": "3.3.3",
     "storybook": "8.3.6",
@@ -79,7 +79,7 @@
     "typescript": "5.4.5",
     "vite": "5.4.10",
     "vite-tsconfig-paths": "5.0.1",
-    "vitest": "2.1.3"
+    "vitest": "2.1.4"
   },
   "packageManager": "[email protected]"
 }

src/components/ext-link.spec.tsx

@@ -14,8 +14,6 @@ describe("ExtLink", () => {
   ] as const)("should render %s link", async (to) => {
     await render(<ExtLink to={to}>{to}</ExtLink>);
 
-    await expect(
-      screen.findByRole("link", { name: to }),
-    ).resolves.toBeInTheDocument();
+    expect(screen.getByRole("link", { name: to })).toBeInTheDocument();
   });
 });

src/main.tsx

@@ -2,20 +2,12 @@ import "./main.css";
 
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { createRouter, RouterProvider } from "@tanstack/react-router";
+import { RouterProvider } from "@tanstack/react-router";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import queryClient from "./query.client";
-import { routeTree } from "./route-tree.gen";
-
-const router = createRouter({ routeTree });
-
-declare module "@tanstack/react-router" {
-  interface Register {
-    router: typeof router;
-  }
-}
+import { router } from "./router";
 
 const root = document.getElementById("root");
 

src/pages/error.spec.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from "@/testing/utils";
+
+import { Error as ErrorPage } from "./error";
+
+describe("<Error />", () => {
+  it('should render "Something went Wrong!" message', async () => {
+    await render(
+      <ErrorPage reset={vi.fn()} error={new Error("Something went Wrong!")} />,
+    );
+
+    expect(screen.getByText("Something went Wrong!")).toBeInTheDocument();
+  });
+});

src/pages/error.tsx

@@ -0,0 +1,21 @@
+import { type ErrorComponentProps, Link } from "@tanstack/react-router";
+
+export const Error = ({ error }: ErrorComponentProps) => {
+  return (
+    <main className="grid min-h-screen place-content-center">
+      <div className="dsy-hero">
+        <div className="dsy-hero-content text-center">
+          <div className="max-w-md">
+            <h1 className="mb-5 text-5xl font-bold opacity-10 lg:text-7xl xl:text-9xl">
+              Error
+            </h1>
+            <p className="mb-5">{error.message}</p>
+            <Link className="dsy-btn dsy-btn-outline" to="/">
+              Go back
+            </Link>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};

src/pages/home.spec.tsx

@@ -6,8 +6,8 @@ describe("<Home />", () => {
   it('should render "React Starter" heading', async () => {
     await render(<Home />);
 
-    await expect(
-      screen.findByRole("heading", { name: "React Starter", level: 1 }),
-    ).resolves.toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "React Starter", level: 1 }),
+    ).toBeInTheDocument();
   });
 });

src/pages/not-found.spec.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from "@/testing/utils";
+
+import { NotFound } from "./not-found";
+
+describe("<NotFound />", () => {
+  it('should render "Not Found" message', async () => {
+    await render(<NotFound />);
+
+    expect(screen.getByText("Not Found")).toBeInTheDocument();
+  });
+});

src/pages/not-found.tsx

@@ -0,0 +1,21 @@
+import { Link } from "@tanstack/react-router";
+
+export const NotFound = () => {
+  return (
+    <main className="grid min-h-screen place-content-center">
+      <div className="dsy-hero">
+        <div className="dsy-hero-content text-center">
+          <div className="max-w-md">
+            <h1 className="mb-5 text-5xl font-bold opacity-10 lg:text-7xl xl:text-9xl">
+              Error
+            </h1>
+            <p className="mb-5">Not Found</p>
+            <Link className="dsy-btn dsy-btn-outline" to="/">
+              Go back
+            </Link>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};

src/router.tsx

@@ -0,0 +1,17 @@
+import { createRouter } from "@tanstack/react-router";
+
+import { Error } from "./pages/error";
+import { NotFound } from "./pages/not-found";
+import { routeTree } from "./route-tree.gen";
+
+export const router = createRouter({
+  routeTree,
+  defaultNotFoundComponent: NotFound,
+  defaultErrorComponent: Error,
+});
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}