feat: add error boundary #319
Conversation
This adds an error boundary for the _auth routes. By adding this, errors are handled in a more consistent manner in a way that is interactable for the user. In addition this removes the sonners that would be shown when API errors occurred. If they are blocking errors, the user will now be directed to the error boundary. We'll want things to be more specific in the future, but this is a great start. Signed-off-by: tylerslaton <[email protected]>
| <Button | ||
| className="w-full" | ||
| variant="secondary" | ||
| onClick={() => window.location.reload()} |
There was a problem hiding this comment.
we should be using the useNavigate hook to perform routing options. It will handle some other stuff that Remix needs to manage it's router
There was a problem hiding this comment.
How would you recommend using useNavigate here? I tried a couple of things but nothing worked quite like this. I Know it reloads the whole page but that was desired by me.
| className="w-full" | ||
| variant="secondary" | ||
| onClick={() => { | ||
| window.location.href = |
There was a problem hiding this comment.
same here. The useNavigate hook is preferred over setting the window.location
There was a problem hiding this comment.
This is intentional since the Remix router will route to this with /admin prefixed. We do not want this here.
| switch (true) { | ||
| case error instanceof AxiosError: | ||
| if ( | ||
| error.response?.status === 403 && | ||
| me.username && | ||
| me.username !== AuthDisabledUsername | ||
| ) { | ||
| return <Unauthorized />; | ||
| } | ||
| return <SignIn />; | ||
| case isRouteErrorResponse(error): | ||
| return <RouteError error={error} />; | ||
| default: | ||
| return <Error error={error as Error} />; |
There was a problem hiding this comment.
I didn't know this was possible with JS switches 😮
There was a problem hiding this comment.
Yeah classic switch(true)!
| variant="secondary" | ||
| className="w-full" | ||
| onClick={() => { | ||
| window.location.href = "/oauth2/start?rd=/admin/"; |
There was a problem hiding this comment.
Same as above ^ intentional since it won't work with navigate or link.
This adds an error boundary for the _auth routes. By adding this, errors are handled in a more consistent manner in a way that is interactable for the user.
In addition this removes the sonners that would be shown when API errors occurred. If they are blocking errors, the user will now be directed to the error boundary. We'll want things to be more specific in the future, but this is a great start.
Screen.Recording.2024-10-24.at.10.21.42.PM.mov