react-error-boundary commit

[EtoKruto]

Dev Summary

Mocks

Test Plan

repro steps:

1. localhost:3000
2. click X button
   expected:

Resources

• stackoverflow is cool

[marvinsjsu]

hi @EtoKruto, I was reading up on ErrorBoundary and I think you've set everything up correctly, but we're using an event handler for triggering the error, which looks like ErrorBoundary won't be able to catch (based on https://medium.com/@danhuang1202/catch-error-from-event-handler-in-react-error-boundary-f36ec58786af). I've tried locally by just throwing the error in SignInModal by doing something like ...

    ...
    const [isLoading, setIsLoading] = React.useState<boolean>(false);
    const [error, setError] = React.useState<Error | null>(null);
    const { setUser } = React.useContext(UserContext);

    if (!isLoading) {
      throw new Error('An intentional error');
    }
   ...

This will show us the error pane, which I think will always show for development (will be the ErrorBoundary when in production), but we can close it and we'll see the ErrorBoundary displayed.

[marvinsjsu]

I couldn't find this mentioned in the new React dev docs, but they do have it in the legacy site:

• https://legacy.reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
• https://legacy.reactjs.org/docs/error-boundaries.html#how-about-event-handlers

[EtoKruto]

@marvinsjsu please feel free to review when you find some time. Thank you sir!

[marvinsjsu]

Aside from a suggestion and a question, this LGTM. Thanks for workin on this, @EtoKruto!

[marvinsjsu]

I'm assuming this comment was added before you started working on this, but do you know what this comment is about?

[EtoKruto]

Truly not sure, might need to go a few commits back to see the original placer of the said Modal position. I created the Modal and modal provider originally but do not remember adding the comment. I've since moved it to below footer for order but to my best understanding this doesn't directly impact its appearance or position on the screen, especially since it's styled with absolute positioning

[EtoKruto]

@marvinsjsu Please provide a quick glance on the new structure if possible - I've folderized the ErrorBound so its compartmentalized into it's own folder for additions in the future and so it's easy on the eyes.

[marvinsjsu]

I like how you re-organized the components. It was not required, but it is very helpful as it helps keep a nice structure to our app. Thanks again, @EtoKruto!