Error Boundaries in React

import { useRouteError, isRouteErrorResponse } from 'react-router'

// Error boundary component
export function ErrorBoundary() {
  const error = useRouteError()

  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>{error.status} {error.statusText}</h1>
        <p>{error.data}</p>
      </div>
    )
  }

  return (
    <div>
      <h1>Oops!</h1>
      <p>{error?.message || "Unknown error"}</p>
    </div>
  )
}

// Throwing errors in loaders
export async function loader({ params }) {
  const post = await fetchPost(params.id)

  if (!post) {
    throw new Response("Not Found", { status: 404 })
  }

  return { post }
}