Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React design: Throw exception or render error componnet?

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;
  }
Tags:

2

Answers


  1. 0

    Both approaches work but here are some considerations for when to use each:

    Method 1: Error Component

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

    When to use:

    • You want to handle the error locally within the component and provide a custom error message or UI specific to that component.
    • If the error is specific to the component and doesn’t need to bubble up to a global error handler, this is a simpler and more isolated approach.

    Method 2: Throw Exception

    if (error) {
  throw error;
}

    When to use:

    • You want the ErrorBoundary to catch the error and display a standardized fallback UI.
    • When an error is critical, and you want it to bubble up, making it more visible.

    Advantages:

    • Centralized error handling through the ErrorBoundary and consistent fallback UI for errors

    Disadvantages:

    • Less granular control over how individual errors are displayed

    You want to use Method 1 if the error only impacts the current component and you want to display a specific error message and method 2 if the error impacts multiple components or is critical, and you want to rely on the ErrorBoundary for consistency.

    I’d generally recommend Method 2. Hope this helps

    Login or Signup to reply.
  2. 0
    • 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search