vercel / next-react-server-components

Demo repository for Next.js + React Server Components
https://next-rsc-hn.vercel.app
MIT License
976 stars 156 forks source link

Add error placeholder for request errors #36

Closed huozhi closed 2 years ago

huozhi commented 2 years ago

Resolves: #34

If there're errors occurred during the data fetching in useData, it will return a error property and stops hanging. Then you can use the returned error to display it or do whatever you need there. e.g.

function Example() {
  const { data, error } = useData('data', fetcher)
  return (
    <div>
      {error && <ErrorPlaceholder error={error} />}
      {data && <div>My data: {data}</div>}
    </div>
  )
}

If there's error occurred in topstories fetching it will display the below error. You can try to tweaks the fetching url to simulate an error

image
vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/vercel/next-rsc-news/7Mk78hePTWaxg3rAUeT6DbECSvq5
✅ Preview: https://next-rsc-news-git-error-placeholder.vercel.sh