Skip to content
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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

danditomaso
Copy link
Collaborator

@danditomaso danditomaso commented Feb 22, 2025

  • 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.

image
  • 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:

newGithubIssueUrl({
  user: 'meshtastic',
  repo: 'web',
  title: 'Bug: Login not working',
  template: 'bug.yml',
  labels: ['bug', 'high-priority'],
  assignee: 'developer-name',
  body: 'Description of the issue...'
  logs: 'Relevant logs'
});

@danditomaso danditomaso changed the title feat: add error boundary feat: add headings component feat: add error boundary Feb 22, 2025
@danditomaso danditomaso requested a review from fifieldt February 23, 2025 02:28
@danditomaso danditomaso self-assigned this Feb 23, 2025
@danditomaso danditomaso requested a review from KomelT February 24, 2025 16:41
Copy link
Member

@KomelT KomelT left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should be page scroll bar when Error details is overflowing.
image

Currently you can't see whole error detail.

<ExternalLink size={24} className="inline-block ml-2" />
</P>
<P>
Return to the <Link href="/">dashboard</Link>
Copy link
Member

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.

Copy link
Collaborator Author

@danditomaso danditomaso Feb 25, 2025

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.

Copy link
Member

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?

Copy link
Collaborator Author

@danditomaso danditomaso Feb 27, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants