How to skip caught error in error boundary

[alimertcakar]

<ErrorBoundary FallbackComponent={ErrorPage}>
</>

// inside error page

<Text>Error occured.</<Text>
<Text>Error reported to development team.</<Text>
<button>Ok, skip.</button>

//? How to skip?

ErrorBoundary itself does not return props.children to FallbackComponent. It should.

[johnkiely1]

Hi @alimertcakar,

Could you explain what behaviour you are trying to achieve with the skip button?

[alimertcakar]

Hi @alimertcakar,

Could you explain what behaviour you are trying to achieve with the skip button?

I'm trying to make the error screen skipable. Look, a error happened, we've sent some logs and its fine. You can continue shopping. I would like to make it skipable if its not the payment screen or something.

React documentation on error boundary uses a hasError property, if !hasError it returns props.children. I want to return children if user clicks "Skip"

I've tried clearErrors in production, but it just didn't do anything. Is there an easy way, or should I opt to a custom error boundary?

[johnkiely1]

Hi @alimertcakar,

You should be able to call clearError to reset the error boundary, which will re-render the children. You would need to pass this as a property to the fallback component. This should avoid you needing to create your own custom error boundary.

[alimertcakar]

Hi @alimertcakar,

You should be able to call clearError to reset the error boundary, which will re-render the children. You would need to pass this as a property to the fallback component. This should avoid you needing to create your own custom error boundary.

Children immediately throws again, now what?

[johnkiely1]

I imagine this would be because of whatever caused the render error in the first place.

I think you would need to fix/avoid whatever caused that error and then call clearError to reset the error boundary. Alternatively you may need to consider redirecting to another page if they original page has errors such that it cannot be reloaded.

[alimertcakar]

Thanks for the answer, it isn't optimal for errors on the homepage. It's rare, but its breaks the app completely. You may take this as a feature suggestion.

[jakecronin]

Hey Bugsnag team, please just provide a full example of the ErrorBoundary component :)

This seems to be working ok.

App:

render() {
 ...
   <ErrorBoundary
              FallbackComponent={ErrorScreen}
              onError={this.onError}>
         <App />
    </ErrorBoundary>
    ... 
}

Error Screen:

type Props = {
  clearError: () => unknown;
};
export const ErrorScreen = (props: Props) => {
  return (
    <View style={style.container}>
      <Text style={style.text}>
        Shoot, we ran into an error. Try force-closing and re-opening the app.
      </Text>
      <Spacer height={20} />
      <Text style={style.text}>
        If you keep seeing this annoying message, shoot us an intercom message
        or email us at help@siro.ai.
      </Text>
      <Spacer height={20} />
      <ButtonPrimary text={'Reload'} onPress={props.clearError} />
    </View>
  );
};

[johnkiely1]

Hi @alimertcakar,

Thanks for the suggestion. I don't think this is something we would look to create a bespoke solution for. I think, as you mentioned yourself, this type of the error would be rare and sounds like it would be significant enough that it possibly should break the app if it is not possible to handle it.