javascript - React design: Throw exception or render error componnet? - Stack Overflow

I had a react question design that is really just me trying to learn better.

If i have a parent component that is wrapped in a fallback (Error boundary) and you have some api call (I am using a useFetch) and it has an error, is there some use case on

1. Rendering an error component when error is truthy or
2. throw an exception which will be caught by the ErrorBoundary wrapped around the compoonent and will also render the same fallback component

Both work if i am correct but not sure if there is a better practice reason to pick one over the other

Here is some code examples

component example

  <ErrorBoundary fallback={<Fallback />}>
    <Parent />
  </ErrorBoundary>

method 1

const { loading, error, data = [] } = useFetch('<URL HERE>', options, [])

  if (error) {
    return (
      <Fallback />
    )
  }

method 2

  const { loading, error, data = [] } = useFetch('<URL HERE>', options, [])

  if (error) {
    throw error;
  }

I had a react question design that is really just me trying to learn better.

If i have a parent component that is wrapped in a fallback (Error boundary) and you have some api call (I am using a useFetch) and it has an error, is there some use case on

1. Rendering an error component when error is truthy or
2. throw an exception which will be caught by the ErrorBoundary wrapped around the compoonent and will also render the same fallback component

Both work if i am correct but not sure if there is a better practice reason to pick one over the other

Here is some code examples

component example

  <ErrorBoundary fallback={<Fallback />}>
    <Parent />
  </ErrorBoundary>

method 1

const { loading, error, data = [] } = useFetch('<URL HERE>', options, [])

  if (error) {
    return (
      <Fallback />
    )
  }

method 2

  const { loading, error, data = [] } = useFetch('<URL HERE>', options, [])

  if (error) {
    throw error;
  }

• javascript
• reactjs

Share Improve this question Follow asked Jan 2 at 17:04 Tanner SummersTanner Summers 66311 gold badge88 silver badges3030 bronze badges 1

• Going to the ErrorBoundary means your component (and its parents) will be unmounted and loose their state. You can't easily get out of the error state (retry, timeout, button action etc). – Bergi Commented Jan 2 at 17:54

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

• Most react libraries let you check if an error occurred, but this error is not an error, but a boolean.
• An ErrorBoundary makes sure no surreptitious error leaks to the end user.

What you can do in most cases is to catch the boolean and throw an error (with the type and message you like) for consequent modal, redirections or monitoring.

Child.tsx

const { error } = useFetch()

if (error) {
  throw new Error(ErrorType.DataFetch, ErrorMessage.DataFetch)
}

Parent.tsx

<ErrorBoundary 
  onError={(error) => {
    if (error.type === ErrorType.DataFetch) {
      saveError(error, new Date())
    }
  }} 
  fallback={<ErrorScreen />}
>
  <Child />
</ErrorBounday>