Motivation

Handling errors is really important for any production ready app. By proper handling of error we can prevent degradation of user experience in production. Luckily, React gave use the right tool for this job, and it's called Error Boundary

Used modules

SWR (docs)
@bugsnag/plugin-react (docs)

Error handling done right!

const Announcements = ({ eventId }) => {
  const { data, error } = useSWR(`/api/v1/announcements?filter[event_id]=${eventId}`);

  if (error) {
    // Error is handled outside in BugsnagErrorBoundary
    throw error;
  }

  if (!data) {
    // Loading data
    return <AnnouncementsSkeleton />
  }

  return (
    <div>
      {data?.map(announcement) => <AnnouncementCard key={announcement.id} announcement={announcement} />}
    </div>
  );
}

Then in the parent component:

<BugsnagErrorBoundary FallbackComponent={ErrorFallback}>
  <Announcements eventId={eventId} />
</BugsnagErrorBoundary>

// ./src/components/shared/overlays

const ErrorFallback = (error, info, clearError) => {
  return <button onClick={clearError}>Refresh</button>;
};

What do you get with this:

You are only handling a happy path in the component
Reusable error handling for API calls on one place
Error handling for any JS error that could happen in the production
Only this part of the app will stop working, not the whole App
Bugsnag reports

Useful links

Bugsnag with Next.js example
Use react-error-boundary to handle errors in React
If you don't have Bugsnag you can use this npm module react-error-boundary