404 та сторінки помилок

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: "products/:id",
        element: <ProductPage />,
      },
      {
        path: "*",
        element: <NotFoundPage />,
      },
    ],
  },
]);

async function productLoader({ params }) {
  const response = await fetch(`/api/products/${params.id}`);

  if (!response.ok) {
    throw new Response("Товар не знайдено", {
      status: response.status,
      statusText: response.statusText,
    });
  }

  return response.json();
}

{
  path: "products/:id",
  loader: productLoader,
  element: <ProductPage />,
  errorElement: <RouteErrorPage />,
}

import {
  isRouteErrorResponse,
  Link,
  useRouteError,
} from "react-router-dom";

export function RouteErrorPage() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    if (error.status === 404) {
      return (
        <main>
          <h1>404</h1>
          <p>Запитувані дані не знайдено.</p>
          <Link to="/">На головну</Link>
        </main>
      );
    }

    return (
      <main>
        <h1>Помилка сервера</h1>
        <p>
          Не вдалося завантажити дані. Код помилки: {error.status}.
        </p>
        <Link to="/">На головну</Link>
      </main>
    );
  }

  return (
    <main>
      <h1>Щось пішло не так</h1>
      <p>Спробуйте оновити сторінку пізніше.</p>
      <Link to="/">На головну</Link>
    </main>
  );
}

import React from "react";

export class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      hasError: false,
    };
  }

  static getDerivedStateFromError() {
    return {
      hasError: true,
    };
  }

  componentDidCatch(error, errorInfo) {
    // Тут можна передати помилку в систему моніторингу
    console.error("Помилка рендерингу:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <main>
          <h1>Не вдалося відобразити сторінку</h1>
          <p>Спробуйте оновити сторінку або поверніться пізніше.</p>
        </main>
      );
    }

    return this.props.children;
  }
}

function ProductPage() {
  return (
    <ErrorBoundary>
      <ProductDetails />
    </ErrorBoundary>
  );
}

import React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  Link,
  Outlet,
  RouterProvider,
  isRouteErrorResponse,
  useLoaderData,
  useRouteError,
} from "react-router-dom";

const products = {
  "1": {
    id: "1",
    name: "Механічна клавіатура",
    description: "Клавіатура для тривалої роботи.",
  },
  "2": {
    id: "2",
    name: "Монітор",
    description: "Монітор із високою роздільною здатністю.",
  },
};

async function productLoader({ params }) {
  await new Promise((resolve) => setTimeout(resolve, 300));

  const product = products[params.id];

  if (!product) {
    throw new Response("Товар не знайдено", {
      status: 404,
      statusText: "Not Found",
    });
  }

  return product;
}

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      hasError: false,
    };
  }

  static getDerivedStateFromError() {
    return {
      hasError: true,
    };
  }

  componentDidCatch(error, errorInfo) {
    // У production тут можна записати помилку в систему моніторингу
    console.error("Помилка компонента:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <main>
          <h1>Не вдалося відобразити товар</h1>
          <p>Оновіть сторінку або спробуйте пізніше.</p>
          <Link to="/">На головну</Link>
        </main>
      );
    }

    return this.props.children;
  }
}

function Layout() {
  return (
    <>
      <header>
        <nav>
          <Link to="/">Головна</Link>
        </nav>
      </header>

      <Outlet />
    </>
  );
}

function HomePage() {
  return (
    <main>
      <h1>Каталог товарів</h1>

      <ul>
        <li>
          <Link to="/products/1">Механічна клавіатура</Link>
        </li>
        <li>
          <Link to="/products/2">Монітор</Link>
        </li>
        <li>
          <Link to="/products/999">Товар із помилкою завантаження</Link>
        </li>
      </ul>
    </main>
  );
}

function ProductPage() {
  const product = useLoaderData();

  return (
    <ErrorBoundary>
      <main>
        <h1>{product.name}</h1>
        <p>{product.description}</p>
        <Link to="/">Повернутися до каталогу</Link>
      </main>
    </ErrorBoundary>
  );
}

function NotFoundPage() {
  return (
    <main>
      <h1>404</h1>
      <p>Такої сторінки не існує.</p>
      <Link to="/">Повернутися на головну</Link>
    </main>
  );
}

function RouteErrorPage() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <main>
        <h1>Не вдалося завантажити сторінку</h1>
        <p>
          Сервер повернув помилку {error.status}:{" "}
          {error.statusText || "Невідома помилка"}.
        </p>
        <Link to="/">На головну</Link>
      </main>
    );
  }

  return (
    <main>
      <h1>Несподівана помилка</h1>
      <p>Спробуйте оновити сторінку пізніше.</p>
      <Link to="/">На головну</Link>
    </main>
  );
}

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    errorElement: <RouteErrorPage />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: "products/:id",
        loader: productLoader,
        element: <ProductPage />,
      },
      {
        path: "*",
        element: <NotFoundPage />,
      },
    ],
  },
]);

createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

{
  path: "*",
  element: <NotFoundPage />,
}

{
  path: "products/:id",
  loader: productLoader,
  element: <ProductPage />,
  errorElement: <RouteErrorPage />,
}

<ErrorBoundary>
  <ProductDetails />
</ErrorBoundary>

const response = await fetch("/api/products/1");

if (!response.ok) {
  throw new Error("Не вдалося завантажити товар");
}

const product = await response.json();