[UI] Implement and use ErrorBoundary

src/def.d.ts

@@ -7,7 +7,6 @@ import _moment from "moment";
 type MetroModules = { [id: number]: any };
 
 // Component types
-// TODO: Make these not be here?
 interface SummaryProps {
     label: string;
     icon?: string;
@@ -15,6 +14,10 @@ interface SummaryProps {
     children: JSX.Element | JSX.Element[];
 }
 
+interface ErrorBoundaryProps {
+    children: JSX.Element | JSX.Element[],
+}
+
 // Helper types for API functions
 type PropIntellisense<P extends string | symbol> = Record<P, any> & Record<PropertyKey, any>;
 type PropsFinder = <T extends string | symbol>(...props: T[]) => PropIntellisense<T>;
@@ -331,6 +334,7 @@ interface VendettaObject {
             Search: _React.ComponentType;
             // Vendetta
             Summary: (props: SummaryProps) => JSX.Element;
+            ErrorBoundary: (props: ErrorBoundaryProps) => JSX.Element;
         }
         toasts: {
             showToast: (content: string, asset: number) => void;

src/ui/components/ErrorBoundary.tsx

@@ -0,0 +1,61 @@
+import { ErrorBoundaryProps } from "@types";
+import { React, ReactNative as RN, stylesheet, constants } from "@metro/common";
+import { findByProps } from "@metro/filters";
+import { Forms } from "@ui/components";
+import { semanticColors } from "@ui/color";
+
+interface ErrorBoundaryState {
+    hasErr: boolean;
+    errText?: string;
+}
+
+const Button = findByProps("Looks", "Colors", "Sizes") as any;
+
+const styles = stylesheet.createThemedStyleSheet({
+    view: {
+        flex: 1,
+        flexDirection: "column",
+        margin: 10,
+    },
+    title: {
+        fontSize: 20,
+        textAlign: "center",
+        marginBottom: 5,
+    },
+    codeblock: {
+        fontFamily: constants.Fonts.CODE_SEMIBOLD,
+        includeFontPadding: false,
+        fontSize: 12,
+        backgroundColor: semanticColors.BACKGROUND_SECONDARY,
+        padding: 5,
+        borderRadius: 5,
+        marginBottom: 5,
+    }
+});
+
+export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = { hasErr: false };
+    }
+
+    static getDerivedStateFromError = (error: Error) => ({ hasErr: true, errText: error.message });
+
+    render() {
+        if (!this.state.hasErr) return this.props.children;
+
+        return (
+            <RN.ScrollView style={styles.view}>
+                <Forms.FormText style={styles.title}>Uh oh.</Forms.FormText>
+                <Forms.FormText style={styles.codeblock}>{this.state.errText}</Forms.FormText>
+                <Button
+                    color={Button.Colors.RED}
+                    size={Button.Sizes.MEDIUM}
+                    look={Button.Looks.FILLED}
+                    onPress={() => this.setState({ hasErr: false, errText: undefined })}
+                    text="Retry"
+                />
+            </RN.ScrollView>
+        )
+    }
+}

src/ui/components/Summary.tsx

@@ -1,7 +1,7 @@
 import { SummaryProps } from "@types";
+import { Forms } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
 import { ReactNative as RN } from "@metro/common";
-import { Forms } from "@ui/components";
 
 // TODO: Animated would be awesome
 // TODO: Destructuring Forms doesn't work here. Why?

src/ui/components/index.ts

@@ -7,3 +7,4 @@ export const Search = findByDisplayName("StaticSearchBarContainer");
 
 // Vendetta
 export { default as Summary } from "@ui/components/Summary";
+export { default as ErrorBoundary } from "@ui/components/ErrorBoundary";

src/ui/settings/components/SettingsSection.tsx

@@ -1,5 +1,5 @@
 import { NavigationNative } from "@metro/common";
-import { Forms } from "@ui/components";
+import { ErrorBoundary, Forms } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
 import { useProxy } from "@lib/storage";
 import settings from "@lib/settings";
@@ -11,6 +11,7 @@ export default function SettingsSection() {
     useProxy(settings);
 
     return (
+        <ErrorBoundary>
             <FormSection key="Vendetta" title="Vendetta">
                 <FormRow
                     label="General"
@@ -37,5 +38,6 @@ export default function SettingsSection() {
                     </>
                 )}
             </FormSection>
+        </ErrorBoundary>
     )
 }

src/ui/settings/index.tsx

@@ -2,6 +2,7 @@ import { NavigationNative, i18n } from "@metro/common";
 import { findByDisplayName } from "@metro/filters";
 import { after } from "@lib/patcher";
 import findInReactTree from "@utils/findInReactTree";
+import ErrorBoundary from "@ui/components/ErrorBoundary";
 import SettingsSection from "@ui/settings/components/SettingsSection";
 import General from "@ui/settings/pages/General";
 import Plugins from "@ui/settings/pages/Plugins";
@@ -38,7 +39,8 @@ export default function initSettings() {
                 render: ({ render: PageView, ...options }: { render: React.ComponentType }) => {
                     const navigation = NavigationNative.useNavigation();
                     React.useEffect(() => options && navigation.setOptions(options));
-                    return <PageView />;
+                    // TODO: Is wrapping this in ErrorBoundary a good idea?
+                    return <ErrorBoundary><PageView /></ErrorBoundary>;
                 }
             }
         }

src/ui/settings/pages/AssetBrowser.tsx

@@ -1,6 +1,7 @@
 import { ReactNative as RN, stylesheet } from "@metro/common";
 import { Forms, Search } from "@ui/components";
 import { all } from "@ui/assets";
+import ErrorBoundary from "@ui/components/ErrorBoundary";
 import AssetDisplay from "@ui/settings/components/AssetDisplay";
 
 const { FormDivider } = Forms;
@@ -19,6 +20,7 @@ export default function AssetBrowser() {
     const [search, setSearch] = React.useState("");
 
     return (
+        <ErrorBoundary>
             <RN.View style={{ flex: 1 }}>
                 <Search
                     style={styles.search}
@@ -36,5 +38,6 @@ export default function AssetBrowser() {
                     keyExtractor={item => item.name}
                 />
             </RN.View>
+        </ErrorBoundary>
     )
 }

src/ui/settings/pages/Developer.tsx

@@ -1,22 +1,14 @@
-import { ReactNative as RN, NavigationNative, stylesheet, constants } from "@metro/common";
+import { ReactNative as RN, NavigationNative } from "@metro/common";
-import { Forms, General } from "@ui/components";
+import { Forms } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
 import { showToast } from "@ui/toasts";
 import { connectToDebugger } from "@lib/debug";
 import { useProxy } from "@lib/storage";
 import settings, { loaderConfig } from "@lib/settings";
 import logger from "@lib/logger";
+import ErrorBoundary from "@ui/components/ErrorBoundary";
 
 const { FormSection, FormRow, FormSwitchRow, FormInput, FormDivider } = Forms;
-const { Text } = General;
-
-const styles = stylesheet.createThemedStyleSheet({
-    code: {
-        fontFamily: constants.Fonts.CODE_SEMIBOLD,
-        includeFontPadding: false,
-        fontSize: 12,
-    }
-});
 
 export default function Developer() {
     const navigation = NavigationNative.useNavigation();
@@ -25,6 +17,7 @@ export default function Developer() {
     useProxy(loaderConfig);
 
     return (
+        <ErrorBoundary>
             <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
                 <FormSection title="Debug" titleStyleType="no_border">
                     <FormInput
@@ -98,5 +91,6 @@ export default function Developer() {
                     />
                 </FormSection>
             </RN.ScrollView>
+        </ErrorBoundary>
     )
 }

src/ui/settings/pages/General.tsx

@@ -6,6 +6,7 @@ import { getDebugInfo } from "@lib/debug";
 import { useProxy } from "@lib/storage";
 import settings from "@lib/settings";
 import Version from "@ui/settings/components/Version";
+import ErrorBoundary from "@ui/components/ErrorBoundary";
 
 const { FormRow, FormSwitchRow, FormSection, FormDivider } = Forms;
 const debugInfo = getDebugInfo();
@@ -80,6 +81,7 @@ export default function General() {
     ];
 
     return (
+        <ErrorBoundary>
             <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
                 <FormSection title="Links" titleStyleType="no_border">
                     <FormRow
@@ -132,5 +134,6 @@ export default function General() {
                     </Summary>
                 </FormSection>
             </RN.ScrollView>
+        </ErrorBoundary>
     )
 }

src/ui/settings/pages/Plugins.tsx

@@ -5,6 +5,7 @@ import { getAssetIDByName } from "@ui/assets";
 import { useProxy } from "@lib/storage";
 import { plugins, installPlugin } from "@lib/plugins";
 import PluginCard from "@ui/settings/components/PluginCard";
+import ErrorBoundary from "@ui/components/ErrorBoundary";
 
 const { FormInput, FormRow } = Forms;
 
@@ -13,6 +14,7 @@ export default function Plugins() {
     const [pluginUrl, setPluginUrl] = React.useState("");
 
     return (
+        <ErrorBoundary>
             <RN.View style={{ flex: 1 }}>
                 <FormInput 
                     value={pluginUrl}
@@ -40,5 +42,6 @@ export default function Plugins() {
                     keyExtractor={item => item.id}
                 />
             </RN.View>
+        </ErrorBoundary>
     )
 }