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

[Issue #3628] allow error page to be interactive without refresh #3629

Merged
merged 2 commits into from
Jan 29, 2025

Conversation

doug-s-nava
Copy link
Collaborator

Summary

Fixes #3628

Time to review: 10 mins

Changes proposed

Fixes bug where search error page had an unusable UI

Also introduces a usePrevious hook as pulled from https://www.developerway.com/posts/implementing-advanced-use-previous-hook (I think this hook implementation used to be in the React docs themselves, but I don't see it there anymore)

Context for reviewers

This was fixed by correctly using NextJs's reset method which is not well documented https://nextjs.org/docs/app/api-reference/file-conventions/error#reset

Because NextJS's error handling uses React error boundaries under the hood, which are basically designed to set an error state and take action based on that state, it makes sense that something explicit must be done to tell the error boundary that the app is no longer in an error state. That's what reset is for, so by calling reset whenever a user interaction occurs on the error page, the problem disappears.

Test steps

  1. start on main with npm run dev
  2. visit http://localhost:3000/search?status=fake
  3. VERIFY: you're on the error page
  4. click a filter or attempt to do a query based search
  5. VERIFY: url updates but UI does not update
  6. restart on this branch
  7. visit http://localhost:3000/search?status=fake
  8. VERIFY: you're on the error page
  9. click a filter or attempt to do a query based search
  10. VERIFY: the page performs the search and updates the UI

Additional information

Screenshots, GIF demos, code examples or output to help show the changes working as expected.

@doug-s-nava doug-s-nava force-pushed the dschrashun/reset-search-error-boundary branch from 0f1da69 to 57770f6 Compare January 23, 2025 16:08
@doug-s-nava doug-s-nava force-pushed the dschrashun/reset-search-error-boundary branch from 7e68146 to e32fb7a Compare January 23, 2025 17:31

useEffect(() => {
console.error(error);
}, [error]);
Copy link
Collaborator

Choose a reason for hiding this comment

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

Could we use or extend one of the errors from https://github.com/HHS/simpler-grants-gov/blob/main/frontend/src/errors.ts so we have more consistent error formatting and handling?

Copy link
Collaborator

Choose a reason for hiding this comment

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

We could punt to this #3651 if that is what yr thinking

Copy link
Collaborator Author

@doug-s-nava doug-s-nava Jan 28, 2025

Choose a reason for hiding this comment

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

the errors caught here largely will be based on the definitions in our errors file, so not sure what to do here

Copy link
Collaborator

Choose a reason for hiding this comment

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

I would think we would wrap the output. I guess I don't see how this error is formed or called.

Copy link
Collaborator

@acouch acouch left a comment

Choose a reason for hiding this comment

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

👍🏿 with question about the error reporting.

@doug-s-nava doug-s-nava merged commit 4c80f17 into main Jan 29, 2025
8 checks passed
@doug-s-nava doug-s-nava deleted the dschrashun/reset-search-error-boundary branch January 29, 2025 16:24
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.

Search page is unresponsive after error
2 participants