fix(hero): ErrorBoundary + non-SVG fallback so the app stops crashing#69
Merged
Conversation
…rashing
Hero kept crashing on Android. Adding instrumentation so the user can
diagnose without adb logcat:
- New ErrorBoundary component (class component with
getDerivedStateFromError + componentDidCatch). Catches any render-
time throw inside its children and renders the error message +
component stack inline.
- New HexChartFallback: pure-RN (no react-native-svg) representation
of the same data — overall number on top, 6 dim cards in a 2 × 3
grid with pip rows for each sub.
- Hero wraps HexChart in ErrorBoundary. If the SVG throws on mount,
the user sees:
1. A red diagnostic card with the actual error message + stack
2. The HexChartFallback below so they keep their data
No more silent app close.
Tangentially fixes the deprecated `pointerEvents` prop warning by
moving it into `style` on ScreenBackground's LinearGradient.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 tasks
andrlut
added a commit
that referenced
this pull request
May 3, 2026
…store Manrope on iOS/web (#70) Hero kept native-crashing on Android even with ErrorBoundary in place. A native crash from react-native-svg's C++/Java side bypasses the JS boundary — there's no way to catch it in JS. The user reported the app still force-closes after PR #69 OTA'd. Pivot: on Android, never construct any react-native-svg components. Render HexChartFallback (pure-RN Views/Text) directly. Same data, same look-and-feel for the dim cards / pips, just without the radar polygon. iOS and web continue to render the proper HexChart with Manrope on SvgText labels. Both platforms still wear the ErrorBoundary so any JS-level throw drops in inline. Restored fontFamily="Manrope_800ExtraBold" on the SvgText labels per user request — the rest of the app already uses Manrope and the inconsistency was visible. Re-enable the SVG path on Android once react-native-svg ships the Brush.getVal null guard (PR software-mansion/react-native-svg#2940) and we resolve native typeface registration for SVG text. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PR #68's gradient + fontFamily mitigations didn't stop the Android crash. Without a stack trace from the device we're guessing — so this PR adds on-screen instrumentation so the user can see the actual error inside the app, plus a pure-RN fallback so Hero loads even when the SVG chart blows up.
What this adds
ErrorBoundary(app/components/ErrorBoundary.tsx) — a class component that catches render errors in its children and renders the error message + component stack inline. Logs toconsole.errorfor device-side debugging.HexChartFallback(app/components/HexChartFallback.tsx) — a pure-React-Native representation of the same data. Noreact-native-svgdependency at all. Overall score on top, 2 × 3 grid of dim cards with pip rows for each sub. Same data, no native module risk.Hero wraps
HexChartin the boundary. On crash, the user sees:error.message+ component stack so they can read what threwHexChartFallbackbelow so they keep their data and can still tap to editSide fixes
ScreenBackground's<LinearGradient pointerEvents="none">→ moved intostyle.pointerEventsto silence the RN deprecation warning the user surfaced.Why two layers (boundary + fallback)
ErrorBoundary alone would render an error card and nothing else. The user wouldn't be stuck, but they also couldn't use the data. Combining both means:
Test plan
NullPointerException at com.horcrux.svg.Brush.getVal) so we can target the next fix🤖 Generated with Claude Code