Well you can use error boundries. It works similar to suspense (the thing used for showing loading ui) but it displays fallback when the component wrapped throws an error somewhere down the tree.

I usually fetch data at the top of the page then pass it via context, there is not really a "correct" way to fetch data and each approach has it's strengths and weaknesses. If you are fetching data with react-query it is reasonable to fetch it client side, this is especially true if you are loading some heavy data which would take a long time to render on the server.

Here are the old react docs for error boundries. I could not find the implementation in the new react docs so this might not be the best practice today. https://legacy.reactjs.org/docs/error-boundaries.html

Another way would be to create state for error and call fetch in a try/catch block then update the state if you catch an error to display fallback ui:

"use client"

import { useState } from "react"

export default function FetchErrorFallback() {
  const [isLoading, setIsLoading] = useState(true)
  const [isError, setIsError] = useState(false)
  const [data, setData] = useState(null)

  useEffect(() => {
    async function fetchData() {
      try {
        const res = await fetch("https://example.com/api")
      } catch (error) {
        setIsError(true)
      }
    }

    fetchData()
  }, [])

  if (isLoading) {
    return <LoadingUI />
  }

  if (isError) {
    return <ErrorUI />
  }

  return <ComponentUI />
}

Seems to be some UX question you need to solve first - what do you want to display if you have M components fetching data successfully and N components fetching data unsuccessfully? Do you need to display the successful ones while others fail or can you afford to "blow up the whole page" by showing one single "error page" if any one of those fail? Is it the same data source, how likely it is that some fail and others succeed at the same time? You can also group them by data source on the page to display a shared error for 3 components, for example.

After you've decided your requirements, the technical solution depends on whether you're loading data server-side (RSC) or fetching it separately from the browser (old school). For server components nextjs allows you to use route level special files [loading.js](https://nextjs.org/docs/app/api-reference/file-conventions/loading) and [error.js](https://nextjs.org/docs/app/api-reference/file-conventions/error) and for more fine-grained control there's Suspense and the aforementioned ErrorBoundary wrappers.

https://nextjs.org/docs/app/getting-started/fetching-data
https://nextjs.org/docs/app/getting-started/error-handling#server-components

For the "old-school" fetching data in client-side hooks there's probably plenty of examples with error handling out there in the wild.