fix: add an error boundary for each section #176
Conversation
There was a problem hiding this comment.
The error boundary is a great addition and will help isolate section failures 🎉
I am just not sure about the "Reload section" button in the fallback UI: In most cases, if a data fetching issue resolves, the props or state will update and automatically trigger a re-render, resetting the error boundary. The reload button may not help with persistent errors and could frustrate users if it doesn’t resolve the issue. Do you think the button is really necessary?
Otherwise, this is a good improvement!
BTW the Colorado NAIP example is loading for me without any issues! I had to manually throw an Error to see the boundary in action.
|
I agree with your note on the button, removed. Thanks for the review! |
|
🎉 This PR is included in version 0.9.5 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
So when reviewing the error boundary PR #176 which I did a couple of days ago.. apologies for not approving and bringing this up sooner but I realized the app looked like it was infinitely rendering.. Is this supposed to happen?? If not, I went down a path trying to figure out where this was happening. It looked like the `useStacValue` hook's useEffect had a dep `fileUpload` which is hook from chakra that was causing this. This PR just removes that dep to stop the app from infinitely rendering. But maybe this could be solved another way? Either way, I dont think this should cause a big issue having that missing dep as I think it will still be stable enough. What do you think @gadomski? -------------------- **Behavior before (infinite render):** https://github.com/user-attachments/assets/d895a717-b039-4cf6-a59c-c963f7a2ee44 **Behavior now:** https://github.com/user-attachments/assets/0dcda900-f47b-4485-9b35-663a71e13222
This is a guardrail to keep a bad section from crashing the whole app. It's a bit of a hack until I can figure out what's going on with #174
I intentionally broke that section to check how it worked, this is what it looks like:
Checklist
yarn format)yarn lint)yarn build)yarn test)