feat(resilience): add glassmorphic ErrorBoundary and custom 404 page (#56, #65) - #90
Conversation
✅ Deploy Preview for toolglass-by-ajithakdev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
There was a problem hiding this comment.
Devin Review found 2 potential issues.
2 flags not posted on this PR by your GitHub settings — view them in Devin Review. (Configure)
| <Suspense fallback={<Loader />}> | ||
| <Component /> | ||
| </Suspense> | ||
| <ErrorBoundary toolTitle={tool.title}> |
There was a problem hiding this comment.
🟡 Error state survives route changes
After a tool crashes, navigateTo changes the slug while ErrorBoundary remains latched. The selected healthy tool displays an error card instead of rendering. The application boundary likewise ignores its fallback’s home navigation.
Prompt for agents
ErrorBoundary state persists independently of router location. In src/pages/ToolPage.tsx, navigating between /tools/:slug values through CommandPalette reuses the same boundary instance after an error, so the new tool never renders. Key or explicitly reset the tool boundary when the slug changes. The app-level boundary in src/App.tsx has the same stale-state behavior: its fallback's Return to Tools link changes location without clearing the boundary. Make navigation from that fallback reset or remount the application boundary as well, and add route-navigation recovery tests for both cases.
Was this helpful? React with 👍 or 👎 to provide feedback.
| this.setState({ | ||
| hasError: false, | ||
| error: null, | ||
| errorInfo: null, | ||
| copied: false, | ||
| showDetails: false, | ||
| }); |
There was a problem hiding this comment.
🟡 Chunk failures survive every retry
When a tool import rejects, resetError rerenders the same cached lazy component. Its rejection persists, so Try Again immediately returns to the error card after the network recovers.
Prompt for agents
The production tool components in src/tools/registry.tsx are singleton React.lazy objects. Once a dynamic import rejects, React.lazy retains the rejected payload. Clearing ErrorBoundary state in resetError therefore cannot retry the import. Add a recovery path that creates a fresh lazy import attempt or reloads the application for chunk-load failures, while preserving the current state-reset behavior for ordinary render errors. Cover a rejected lazy import followed by successful recovery in a test.
Was this helpful? React with 👍 or 👎 to provide feedback.
1 participant
Resolves #56 and #65.
Summary of Changes
Reusable Glassmorphic
ErrorBoundary(src/components/ErrorBoundary.tsx):componentDidCatchandstatic getDerivedStateFromError.ToolPage.tsx(wrapping tool components) and inApp.tsx(protecting the app shell).Custom 404 & Tool-Not-Found Page (
src/pages/NotFound.tsx):/#/tools/time-conv-> suggests Timestamp).Automated Unit & E2E Testing:
src/components/ErrorBoundary.test.tsx: 4 Vitest unit tests verifying normal rendering, error catching, fallback UI, and recovery via Try Again.src/pages/NotFound.test.tsx: 4 Vitest unit tests verifying generic 404, tool-specific 404, fuzzy suggestions, and live search filtering.Closes #56
Closes #65