Add logout button to error page

[david-crespo]

Closes #1876

I thought about also checking specifically for the situation where nothing works, maybe by trying to hit /session/me and seeing if that fails, but I'd rather do that in a followup. Also the error message wouldn't be that different.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	May 15, 2024 9:20pm

[benjaminleonard]

What if instead of showing in all non-404 errors, we show it only on 403 errors where it is most relevant. Don't want people hitting a 500 and thinking they need to logout to resolve.

[david-crespo]

👍 will attempt

[david-crespo]

I can do it, but it makes me nervous because of the way this stuff works. When we get the error in the fallback, it's not actually the original error from the loader request that's bubbling up — RQ prefetchQuery eats all errors, and in order to get the error from the loader, we'd have to use fetchQuery instead. Which we could do, but I want to think it through. So instead we have to tell the usePrefetchApiQuery call to throw on 403s instead of eating it (currently we only do it for 404s). That gives us an error we can detect in the ErrorBoundary to only show the sign out button when we see a 403, but like I said it's such a weird approach that it makes me nervous.

small diff showing how that is done

diff --git a/app/api/hooks.ts b/app/api/hooks.ts index a6c464f4..75216f35 100644 --- a/app/api/hooks.ts +++ b/app/api/hooks.ts @@ -169,7 +169,7 @@ export const getUsePrefetchedApiQuery = // we can say Not Found. If you need to allow a 404 and want it to show // up as `error` state instead, pass `useErrorBoundary: false` as an // option from the calling component and it will override this - throwOnError: (err) => err.statusCode === 404, + throwOnError: (err) => err.statusCode === 404 || err.statusCode === 403, ...options, }) invariant( diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx index 95b6cf95..114d7f49 100644 --- a/app/components/ErrorBoundary.tsx +++ b/app/components/ErrorBoundary.tsx @@ -24,13 +24,15 @@ function ErrorFallback({ error }: Props) { return <NotFound /> } + const showSignOut = 'statusCode' in error && error.statusCode === 403 + return ( <ErrorPage> <h1 className="text-sans-2xl">Something went wrong</h1> <p className="text-tertiary"> Please try again. If the problem persists, contact your administrator. </p> - <SignOutButton className="!mt-4" /> + {showSignOut && <SignOutButton className="!mt-4" />} </ErrorPage> ) }

I'd like to postpone being smart and instead solve your concern by moving the button into the corner so it doesn't give the impression that it's an action specific to the error you're seeing.

[david-crespo]

We can still hide it on 404 but I kinda don't think we need to:

[benjaminleonard]

You have my blessing, thanks for looking into it.