This PR adds error handling for the session endpoint. If it fails to retrieve an error it tends to bubble up into a very cryptic error for the user. This solves the issue by catching the errors, explicitly raising known errors, and displaying a recovery UX for the user to reset the session.
How does this work?
We assert that we've found a valid session on the server from the getSessionData function. If we don't we throw a new SessionError. And if crashes for any other reason, we'll still throw that same error. Double safety.
We let the error bubble up all the way to the root of the application in our layout.tsx component.
Once the error bubbles up we set a local variable for the error, render a component instead of children and then have a server action that can delete the cookie and reload the page.
What is this?
This PR adds error handling for the session endpoint. If it fails to retrieve an error it tends to bubble up into a very cryptic error for the user. This solves the issue by catching the errors, explicitly raising known errors, and displaying a recovery UX for the user to reset the session.
How does this work?
getSessionDatafunction. If we don't we throw a newSessionError. And if crashes for any other reason, we'll still throw that same error. Double safety.layout.tsxcomponent.global-error.tsxmangles errors on the client and doesn't display in dev mode we're opting for manual client-side error handling since this is not a sensitive error and is controlled.BEFORE:
AFTER: