Merge pull request #9 from SelfMadeSystem/main

Improve ErrorBoundary component to better display errors & fixed "SAFE_MODE_NOTICE_THEMES" key
bunny-mod · Mar 8, 2024 · bbcb5d4 · bbcb5d4
2 parents cea9b1c + 244dcdd
commit bbcb5d4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/core/i18n/default.json b/src/core/i18n/default.json
@@ -74,7 +74,7 @@
     "RETRY_RENDER": "Retry Render",
     "SAFE_MODE": "Safe Mode",
     "SAFE_MODE_NOTICE_PLUGINS": "You are in Safe Mode, so plugins cannot be loaded. Disable any misbehaving plugins, then return to Normal Mode from the General settings page.",
-    "SAFE_MODE_NOTICE_THEMES": "You are in Safe Mode, meaning themes have been temporarily disabled.{enabled, select, true { If a theme appears to be causing the issue, you can press below to disable it persistently.}}",
+    "SAFE_MODE_NOTICE_THEMES": "You are in Safe Mode, meaning themes have been temporarily disabled. {enabled, select, true {If a theme appears to be causing the issue, you can press below to disable it persistently.} false {}}",
     "SEARCH": "Search",
     "STACK_TRACE": "Stack Trace",
     "SUCCESSFULLY_INSTALLED": "Successfully installed",

diff --git a/src/lib/ui/components/ErrorBoundary.tsx b/src/lib/ui/components/ErrorBoundary.tsx
@@ -6,10 +6,12 @@ import { FormText } from "@ui/components/discord/Forms";
 import { createThemedStyleSheet } from "@ui/styles";
 import { ScrollView } from "react-native";
 
-interface ErrorBoundaryState {
-    hasErr: boolean;
-    errText?: string;
-}
+type ErrorBoundaryState = {
+    hasErr: false;
+} | {
+    hasErr: true;
+    error: Error;
+};
 
 export interface ErrorBoundaryProps {
     children: JSX.Element | JSX.Element[];
@@ -34,20 +36,24 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
         this.state = { hasErr: false };
     }
 
-    static getDerivedStateFromError = (error: Error) => ({ hasErr: true, errText: error.message });
+    static getDerivedStateFromError = (error: Error) => ({ hasErr: true, error });
 
     render() {
         if (!this.state.hasErr) return this.props.children;
 
         return (
             <ScrollView style={styles.view}>
                 <FormText style={styles.title}>{Strings.UH_OH}</FormText>
-                <Codeblock selectable style={{ marginBottom: 5 }}>{this.state.errText}</Codeblock>
+                <Codeblock selectable style={{ marginBottom: 5 }}>{this.state.error.name}</Codeblock>
+                <Codeblock selectable style={{ marginBottom: 5 }}>{this.state.error.message}</Codeblock>
+                {this.state.error.stack && <ScrollView style={{ maxHeight: 420, marginBottom: 5 }}>
+                    <Codeblock selectable>{this.state.error.stack}</Codeblock>
+                </ScrollView>}
                 <Button
                     color={Button.Colors.RED}
                     size={Button.Sizes.MEDIUM}
                     look={Button.Looks.FILLED}
-                    onPress={() => this.setState({ hasErr: false, errText: undefined })}
+                    onPress={() => this.setState({ hasErr: false })}
                     text={Strings.RETRY}
                 />
             </ScrollView>