feat: implement comprehensive React error boundary framework - #5690
feat: implement comprehensive React error boundary framework#5690anshgoyalevil wants to merge 1 commit into
Conversation
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (10)
🚧 Files skipped from review as they are similar to previous changes (6)
📝 WalkthroughWalkthroughAdds a typed React error boundary framework with global and contextual fallback UIs, retry and route-change recovery, Storybook coverage, and wrappers around application and layout content. ChangesError boundary framework
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Descendant
participant ErrorBoundary
participant Fallback
participant NextRouter
Descendant->>ErrorBoundary: render throws Error
ErrorBoundary->>Fallback: render fallback with error and reset
Fallback->>ErrorBoundary: invoke reset
ErrorBoundary->>Descendant: render children again
NextRouter->>ErrorBoundary: route change completes
ErrorBoundary->>Descendant: reset errored state
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: dependency version conflict. Check your lock file or package.json. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5690--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/error/ErrorBoundary.tsx`:
- Around line 69-84: Update componentDidUpdate to detect changes to
resetOnRouteChange and register or remove the Router.events routeChangeComplete
listener so it matches the current prop value. Keep the existing resetKeys
handling intact, and make componentWillUnmount unconditionally remove the
listener regardless of the prop value.
In `@components/layout/BlogLayout.tsx`:
- Line 95: Replace the omitted fallbacks on the nested ErrorBoundary instances
with render-function fallbacks that render ContextualErrorFallback, preserving
local recovery UI for each content region. Apply this to the blog article in
components/layout/BlogLayout.tsx:95-95, explorer and documentation content in
components/layout/DocsLayout.tsx:115-117 and 204-206, and post and default page
content in components/layout/Layout.tsx:59-63 and 66-70.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: d956c04d-4e08-4706-b7ff-bd460d450020
📒 Files selected for processing (9)
components/error/ContextualErrorFallback.tsxcomponents/error/ErrorBoundary.stories.tsxcomponents/error/ErrorBoundary.tsxcomponents/error/GlobalErrorFallback.tsxcomponents/layout/BlogLayout.tsxcomponents/layout/DocsLayout.tsxcomponents/layout/Layout.tsxpages/_app.tsxtypes/components/error/ErrorBoundaryProps.ts
3d6dd48 to
a742f43
Compare
|
Note GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
Add a reusable ErrorBoundary class component with getDerivedStateFromError and componentDidCatch, dynamic fallback injection, a reset mechanism, and automatic route-based reset via Next.js Router events. Add accessible fallback UIs: a full-page GlobalErrorFallback (icon, explanation, Try Again, home link) used as the app-wide safety net, and a lightweight ContextualErrorFallback card (via ContentErrorBoundary) for content regions so a failed section keeps a local inline recovery UI. Both are WCAG 2.1 AA keyboard/screen-reader friendly. Wire boundaries as a global safety net in pages/_app.tsx and around content containers in Layout, DocsLayout, and BlogLayout so navigation and sidebars stay functional when page content crashes. Includes Storybook stories. Closes asyncapi#5559
a742f43 to
1a66607
Compare
|
Note GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
|
|
Superseded by #5691 (branch history was accidentally rewritten). Continuing the work there. |
2 participants
Add a reusable ErrorBoundary class component with getDerivedStateFromError and componentDidCatch, dynamic fallback injection, a reset mechanism, and automatic route-based reset via Next.js Router events.
Add accessible fallback UIs: a full-page GlobalErrorFallback (icon, explanation, Try Again, home link) and a lightweight ContextualErrorFallback card for widgets/sidebars, both WCAG 2.1 AA keyboard/screen-reader friendly.
Wire boundaries as a global safety net in pages/_app.tsx and around content containers in Layout, DocsLayout, and BlogLayout so navigation and sidebars stay functional when page content crashes. Includes Storybook stories.
Closes #5559
Related issue(s)
Summary by CodeRabbit