Skip to content

feat: implement error boundaries for main screens and layout components#78

Merged
RUKAYAT-CODER merged 3 commits intorinafcode:mainfrom
Ekene001:feat/Error-Boundary-Implementation
Apr 24, 2026
Merged

feat: implement error boundaries for main screens and layout components#78
RUKAYAT-CODER merged 3 commits intorinafcode:mainfrom
Ekene001:feat/Error-Boundary-Implementation

Conversation

@Ekene001
Copy link
Copy Markdown
Contributor

closes #51

Summary

Prevents full-app crashes from isolated component failures by wrapping all navigation layers, screens, modals, and critical providers with a shared, production-ready ErrorBoundary. Isolated failures now show a scoped fallback UI with a retry button instead of taking down the entire app.

Also fixes a navigation crash caused by unregistered routes in SwipeableNavigation.tsx.


Changes

Enhanced shared ErrorBoundary (ErrorBoundary.tsx)

  • Added boundaryName prop for named boundary identification in crash reports
  • Added onError / onReset callbacks for lifecycle hooks
  • Integrated crash reporting via crashReporting.ts inside componentDidCatch
  • Implemented retry/reset via resetKey — increments to force a full subtree remount on tap
  • Supported function fallback API alongside static React node fallbacks
  • Dev-only component stack display in fallback UI

Navigation layer boundaries

  • _layout.tsx (root) — wrapped with boundaryName="RootLayout"
  • _layout.tsx (tab) — tab layout wrapped
  • index.tsx, explore.tsx — individual tab screens wrapped
  • modal.tsx — modal route wrapped
  • AppNavigator.tsx — all screens wrapped via withErrorBoundary HOC; NavigationContainer itself wrapped
  • SwipeableNavigation.tsx — per-screen boundaries via withErrorBoundary; section-level isolation added for the swipeable navigation body

Modal-level boundaries

Each modal's content tree is isolated so a crash inside a modal cannot propagate to the app shell.

  • BiometricPrompt.tsxboundaryName="BiometricPromptModal"
  • AvatarCamera.tsxboundaryName="AvatarCameraModal"
  • AchievementBadges.tsxboundaryName="AchievementBadgesModal"
  • FilterSheet.tsxboundaryName="FilterSheetModal"
  • MobileVideoPlayer.tsxboundaryName="MobileVideoPlayer.FullscreenModal"
  • MobileCourseViewer.tsxCourseViewer.NoteModal and CourseViewer.QuizModal
  • NotificationPrompt.tsx — both permission-request and fallback branches wrapped
  • SettingsPicker.tsxboundaryName="SettingsPickerModal"

Bug fix: missing navigation routes (out of scope, required for test validation)
SwipeableNavigation.tsx was missing CourseViewer, Settings, and Quiz as registered screens, causing a crash when navigating from HomeScreen - which blocked on-device testing of the boundary isolation. All three added as hidden drawer screens (drawerItemStyle: { display: 'none' }).

WhatsApp Image 2026-04-22 at 19 14 59 WhatsApp Image 2026-04-22 at 19 21 30

@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Apr 23, 2026

@Ekene001 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@RUKAYAT-CODER
Copy link
Copy Markdown
Contributor

Kindly resolve conflict

@Ekene001
Copy link
Copy Markdown
Contributor Author

@RUKAYAT-CODER okay ser, ive resolved the conflicts

@RUKAYAT-CODER RUKAYAT-CODER merged commit a8e5a8a into rinafcode:main Apr 24, 2026
1 check passed
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.

Error Boundary Implementation Incomplete

2 participants