[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

@@ -6,4 +6,5 @@ export const General = findByProps("Button", "Text", "View");
 export const Search = findByDisplayName("StaticSearchBarContainer");
 
 // Vendetta
-export { default as Summary } from "@ui/components/Summary";
+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";
@@ -10,32 +10,34 @@ export default function SettingsSection() {
     const navigation = NavigationNative.useNavigation();
     useProxy(settings);
 
-    return ( 
-        <FormSection key="Vendetta" title="Vendetta">
-            <FormRow
-                label="General"
-                leading={<FormRow.Icon source={getAssetIDByName("settings")} />}
-                trailing={FormRow.Arrow}
-                onPress={() => navigation.push("VendettaSettings")}
-            />
-            <FormDivider />
-            <FormRow
-                label="Plugins"
-                leading={<FormRow.Icon source={getAssetIDByName("debug")} />}
-                trailing={FormRow.Arrow}
-                onPress={() => navigation.push("VendettaPlugins")}
-            />
-            {settings.developerSettings && (
-                <>
-                    <FormDivider />
-                    <FormRow
-                        label="Developer"
-                        leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
-                        trailing={FormRow.Arrow}
-                        onPress={() => navigation.push("VendettaDeveloper")}
-                    />
-                </>
-            )}
-        </FormSection>
+    return (
+        <ErrorBoundary>
+            <FormSection key="Vendetta" title="Vendetta">
+                <FormRow
+                    label="General"
+                    leading={<FormRow.Icon source={getAssetIDByName("settings")} />}
+                    trailing={FormRow.Arrow}
+                    onPress={() => navigation.push("VendettaSettings")}
+                />
+                <FormDivider />
+                <FormRow
+                    label="Plugins"
+                    leading={<FormRow.Icon source={getAssetIDByName("debug")} />}
+                    trailing={FormRow.Arrow}
+                    onPress={() => navigation.push("VendettaPlugins")}
+                />
+                {settings.developerSettings && (
+                    <>
+                        <FormDivider />
+                        <FormRow
+                            label="Developer"
+                            leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
+                            trailing={FormRow.Arrow}
+                            onPress={() => navigation.push("VendettaDeveloper")}
+                        />
+                    </>
+                )}
+            </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,22 +20,24 @@ export default function AssetBrowser() {
     const [search, setSearch] = React.useState("");
 
     return (
-        <RN.View style={{ flex: 1 }}>
-            <Search
-                style={styles.search}
-                onChangeText={(v: string) => setSearch(v)}
-                placeholder="Search"
-            />
-            <RN.FlatList
-                data={Object.values(all).filter(a => a.name.includes(search) || a.id.toString() === search)}
-                renderItem={({ item }) => (
-                    <>
-                        <AssetDisplay asset={item} />
-                        <FormDivider />
-                    </>
-                )}
-                keyExtractor={item => item.name}
-            />
-        </RN.View>
+        <ErrorBoundary>
+            <RN.View style={{ flex: 1 }}>
+                <Search
+                    style={styles.search}
+                    onChangeText={(v: string) => setSearch(v)}
+                    placeholder="Search"
+                />
+                <RN.FlatList
+                    data={Object.values(all).filter(a => a.name.includes(search) || a.id.toString() === search)}
+                    renderItem={({ item }) => (
+                        <>
+                            <AssetDisplay asset={item} />
+                            <FormDivider />
+                        </>
+                    )}
+                    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 { Forms, General } from "@ui/components";
+import { ReactNative as RN, NavigationNative } from "@metro/common";
+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,78 +17,80 @@ export default function Developer() {
     useProxy(loaderConfig);
 
     return (
-        <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
-            <FormSection title="Debug" titleStyleType="no_border">
-                <FormInput
-                    value={settings.debuggerUrl}
-                    onChange={(v: string) => settings.debuggerUrl = v}
-                    placeholder="127.0.0.1:9090"
-                    title="DEBUGGER URL"
-                />
-                <FormDivider />
-                <FormRow
-                    label="Connect to debug websocket"
-                    leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
-                    onPress={() => connectToDebugger(settings.debuggerUrl)}
-                />
-                {window.__vendetta_rdc && <>
+        <ErrorBoundary>
+            <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
+                <FormSection title="Debug" titleStyleType="no_border">
+                    <FormInput
+                        value={settings.debuggerUrl}
+                        onChange={(v: string) => settings.debuggerUrl = v}
+                        placeholder="127.0.0.1:9090"
+                        title="DEBUGGER URL"
+                    />
                     <FormDivider />
                     <FormRow
-                        label="Connect to React DevTools"
-                        leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
-                        onPress={() => {
-                            try {
-                                window.__vendetta_rdc?.connectToDevTools({
-                                    host: settings.debuggerUrl.split(":")?.[0],
-                                    resolveRNStyle: RN.StyleSheet.flatten,
-                                });
-                            } catch (e) {
-                                // TODO: Check if this ever actually catches anything
-                                logger.error("Failed to connect to React DevTools!", e);
-                                showToast("Failed to connect to React DevTools!", getAssetIDByName("Small"));
-                            }
+                        label="Connect to debug websocket"
+                        leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
+                        onPress={() => connectToDebugger(settings.debuggerUrl)}
+                    />
+                    {window.__vendetta_rdc && <>
+                        <FormDivider />
+                        <FormRow
+                            label="Connect to React DevTools"
+                            leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
+                            onPress={() => {
+                                try {
+                                    window.__vendetta_rdc?.connectToDevTools({
+                                        host: settings.debuggerUrl.split(":")?.[0],
+                                        resolveRNStyle: RN.StyleSheet.flatten,
+                                    });
+                                } catch (e) {
+                                    // TODO: Check if this ever actually catches anything
+                                    logger.error("Failed to connect to React DevTools!", e);
+                                    showToast("Failed to connect to React DevTools!", getAssetIDByName("Small"));
+                                }
+                            }}
+                        />
+                    </>}
+                </FormSection>
+                {window.__vendetta_loader?.features.loaderConfig && <FormSection title="Loader config">
+                    <FormSwitchRow
+                        label="Load from custom url"
+                        subLabel={"Load Vendetta from a custom endpoint."}
+                        leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
+                        value={loaderConfig.customLoadUrl.enabled}
+                        onValueChange={(v: boolean) => {
+                            loaderConfig.customLoadUrl.enabled = v;
                         }}
                     />
-                </>}
-            </FormSection>
-            {window.__vendetta_loader?.features.loaderConfig && <FormSection title="Loader config">
-                <FormSwitchRow
-                    label="Load from custom url"
-                    subLabel={"Load Vendetta from a custom endpoint."}
-                    leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
-                    value={loaderConfig.customLoadUrl.enabled}
-                    onValueChange={(v: boolean) => {
-                        loaderConfig.customLoadUrl.enabled = v;
-                    }}
-                />
-                <FormDivider />
-                {loaderConfig.customLoadUrl.enabled && <>
-                    <FormInput
-                        value={loaderConfig.customLoadUrl.url}
-                        onChange={(v: string) => loaderConfig.customLoadUrl.url = v}
-                        placeholder="http://localhost:4040/vendetta.js"
-                        title="VENDETTA URL"
-                    />
                     <FormDivider />
-                </>}
-                {window.__vendetta_loader.features.devtools && <FormSwitchRow
-                    label="Load React DevTools"
-                    subLabel={`Version: ${window.__vendetta_loader.features.devtools.version}`}
-                    leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
-                    value={loaderConfig.loadReactDevTools}
-                    onValueChange={(v: boolean) => {
-                        loaderConfig.loadReactDevTools = v;
-                    }}
-                />}
-            </FormSection>}
-            <FormSection title="Other">
-                <FormRow
-                    label="Asset Browser"
-                    leading={<FormRow.Icon source={getAssetIDByName("ic_media_upload")} />}
-                    trailing={FormRow.Arrow}
-                    onPress={() => navigation.push("VendettaAssetBrowser")}
-                />
-            </FormSection>
-        </RN.ScrollView>
+                    {loaderConfig.customLoadUrl.enabled && <>
+                        <FormInput
+                            value={loaderConfig.customLoadUrl.url}
+                            onChange={(v: string) => loaderConfig.customLoadUrl.url = v}
+                            placeholder="http://localhost:4040/vendetta.js"
+                            title="VENDETTA URL"
+                        />
+                        <FormDivider />
+                    </>}
+                    {window.__vendetta_loader.features.devtools && <FormSwitchRow
+                        label="Load React DevTools"
+                        subLabel={`Version: ${window.__vendetta_loader.features.devtools.version}`}
+                        leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
+                        value={loaderConfig.loadReactDevTools}
+                        onValueChange={(v: boolean) => {
+                            loaderConfig.loadReactDevTools = v;
+                        }}
+                    />}
+                </FormSection>}
+                <FormSection title="Other">
+                    <FormRow
+                        label="Asset Browser"
+                        leading={<FormRow.Icon source={getAssetIDByName("ic_media_upload")} />}
+                        trailing={FormRow.Arrow}
+                        onPress={() => navigation.push("VendettaAssetBrowser")}
+                    />
+                </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,57 +81,59 @@ export default function General() {
     ];
 
     return (
-        <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
-            <FormSection title="Links" titleStyleType="no_border">
-                <FormRow
-                    label="Discord Server"
-                    leading={<FormRow.Icon source={getAssetIDByName("Discord")} />}
-                    trailing={FormRow.Arrow}
-                    onPress={() => invites.acceptInviteAndTransitionToInviteChannel({ inviteKey: DISCORD_SERVER })}
-                />
-                <FormDivider />
-                <FormRow
-                    label="GitHub"
-                    leading={<FormRow.Icon source={getAssetIDByName("img_account_sync_github_white")} />}
-                    trailing={FormRow.Arrow}
-                    onPress={() => url.openURL(GITHUB)}
-                />
-            </FormSection>
-            <FormSection title="Actions">
-                <FormRow
-                    label="Reload Discord"
-                    leading={<FormRow.Icon source={getAssetIDByName("ic_message_retry")} />}
-                    onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
-                />
-                <FormDivider />
-                <FormSwitchRow
-                    label="Developer Settings"
-                    leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
-                    value={settings.developerSettings}
-                    onValueChange={(v: boolean) => {
-                        settings.developerSettings = v;
-                    }}
-                />
-            </FormSection>
-            <FormSection title="Info">
-                <Summary label="Versions" icon="ic_information_filled_24px">
-                    {versions.map((v, i) => (
-                        <>
-                            <Version label={v.label} version={v.version} icon={v.icon} />
-                            {i !== versions.length - 1 && <FormDivider />}
-                        </>
-                    ))}
-                </Summary>
-                <FormDivider />
-                <Summary label="Platform" icon="ic_mobile_device">
-                    {platformInfo.map((p, i) => (
-                        <>
-                            <Version label={p.label} version={p.version} icon={p.icon} />
-                            {i !== platformInfo.length - 1 && <FormDivider />}
-                        </>
-                    ))}
-                </Summary>
-            </FormSection>
-        </RN.ScrollView>
+        <ErrorBoundary>
+            <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
+                <FormSection title="Links" titleStyleType="no_border">
+                    <FormRow
+                        label="Discord Server"
+                        leading={<FormRow.Icon source={getAssetIDByName("Discord")} />}
+                        trailing={FormRow.Arrow}
+                        onPress={() => invites.acceptInviteAndTransitionToInviteChannel({ inviteKey: DISCORD_SERVER })}
+                    />
+                    <FormDivider />
+                    <FormRow
+                        label="GitHub"
+                        leading={<FormRow.Icon source={getAssetIDByName("img_account_sync_github_white")} />}
+                        trailing={FormRow.Arrow}
+                        onPress={() => url.openURL(GITHUB)}
+                    />
+                </FormSection>
+                <FormSection title="Actions">
+                    <FormRow
+                        label="Reload Discord"
+                        leading={<FormRow.Icon source={getAssetIDByName("ic_message_retry")} />}
+                        onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
+                    />
+                    <FormDivider />
+                    <FormSwitchRow
+                        label="Developer Settings"
+                        leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
+                        value={settings.developerSettings}
+                        onValueChange={(v: boolean) => {
+                            settings.developerSettings = v;
+                        }}
+                    />
+                </FormSection>
+                <FormSection title="Info">
+                    <Summary label="Versions" icon="ic_information_filled_24px">
+                        {versions.map((v, i) => (
+                            <>
+                                <Version label={v.label} version={v.version} icon={v.icon} />
+                                {i !== versions.length - 1 && <FormDivider />}
+                            </>
+                        ))}
+                    </Summary>
+                    <FormDivider />
+                    <Summary label="Platform" icon="ic_mobile_device">
+                        {platformInfo.map((p, i) => (
+                            <>
+                                <Version label={p.label} version={p.version} icon={p.icon} />
+                                {i !== platformInfo.length - 1 && <FormDivider />}
+                            </>
+                        ))}
+                    </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,32 +14,34 @@ export default function Plugins() {
     const [pluginUrl, setPluginUrl] = React.useState("");
 
     return (
-        <RN.View style={{ flex: 1 }}>
-            <FormInput 
-                value={pluginUrl}
-                onChange={(v: string) => setPluginUrl(v)}
-                placeholder="https://example.com/"
-                title="PLUGIN URL"
-            />
-            <FormRow
-                label="Install plugin"
-                // I checked, this icon exists on a fresh Discord install. Please, stop disappearing.
-                leading={<FormRow.Icon source={getAssetIDByName("ic_add_24px")} />}
-                onPress={() => {
-                        installPlugin(pluginUrl).then(() => {
-                            setPluginUrl("");
-                        }).catch((e: Error) => {
-                            showToast(e.message, getAssetIDByName("Small"));
-                        });
+        <ErrorBoundary>
+            <RN.View style={{ flex: 1 }}>
+                <FormInput 
+                    value={pluginUrl}
+                    onChange={(v: string) => setPluginUrl(v)}
+                    placeholder="https://example.com/"
+                    title="PLUGIN URL"
+                />
+                <FormRow
+                    label="Install plugin"
+                    // I checked, this icon exists on a fresh Discord install. Please, stop disappearing.
+                    leading={<FormRow.Icon source={getAssetIDByName("ic_add_24px")} />}
+                    onPress={() => {
+                            installPlugin(pluginUrl).then(() => {
+                                setPluginUrl("");
+                            }).catch((e: Error) => {
+                                showToast(e.message, getAssetIDByName("Small"));
+                            });
+                        }
                     }
-                }
-            />
-            <RN.FlatList
-                style={{ marginTop: 10 }}
-                data={Object.values(plugins)}
-                renderItem={({ item }) => <PluginCard plugin={item} />}
-                keyExtractor={item => item.id}
-            />
-        </RN.View>
+                />
+                <RN.FlatList
+                    style={{ marginTop: 10 }}
+                    data={Object.values(plugins)}
+                    renderItem={({ item }) => <PluginCard plugin={item} />}
+                    keyExtractor={item => item.id}
+                />
+            </RN.View>
+        </ErrorBoundary>
     )
 }