-
Notifications
You must be signed in to change notification settings - Fork 134
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add error boundary #458
base: master
Are you sure you want to change the base?
feat: add error boundary #458
Conversation
a339afc
to
635d067
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
src/components/UI/ErrorPage.tsx
Outdated
<ExternalLink size={24} className="inline-block ml-2" /> | ||
</P> | ||
<P> | ||
Return to the <Link href="/">dashboard</Link> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This disconnect returns you to the "New Connection" page. I think it would be better if it would put you to "Connected Devices", so it doesn't disconnect you.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That makes sense, but what if the issue/error is on the dashboard? Also the landing page when you first connect is the Messages screen, which I wouldn't want to redirect users to, in order to avoid some kind of error loop. I think I need @Hunter275 to make a call on this one.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does the message history disappear if we take them back to the "New Connection" page?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The message history would disappear in either case this PR doesn't solve that issue. If they get the white screen its because the app had an error thrown that wasn't being handled, so they would need to reload the app anyway causing all components to remount.
The benefit of this work is that the error is isolated to a single route/page. The cavet is the way the web client is currently built we handle sidebar routing inside each compont instead of a higher level layout wrapper.
This PR provides a graceful fallback component to provide a the user with some feedback about what occurred, where as previously nothing existed before and they were presented with a blank white screen.
Addtionally if they file an issue using the included the Github link, we capture the stack trace as a query param and pass it to github to be included in the bug report (its added to the console log section), so smoother bug filing experience for the user and improved error reporting for us.
Add Error Boundary throughout the app to prevent unhandled errors from causing the application to crash. Due to how each page is wrapped, the error will be caught at the page level leaving the remainder of the application functional.
Created a fallback Component which displays a helpful message to the user about what occurred, and a way to file a github issue or navigate back to the root of the application.
Create a reusable Heading component that supports dynamic heading levels (h1-h5) through the as prop, this enables enabling consistent typography across the application, removed individual H1-H5 components updating references were required.
Create a reusable
newGithubIssueUrl
utility function to generate a properly formatted URL for creating new GitHub issues. It provides a type-safe and flexible way to construct issue URLs with various parameters like title, body, labels, and assignees.It supports the following parameters:
Title and body text
Labels
Issue templates
User assignments
Custom text fields by id
All fields except user and repo are optional.
Example Usage: