Update developer options and ErrorBoundary
Developer options: - Remove option to trip ShiggyCord ErrorBoundary (broken) ErrorBoundary: - Rewrite bottom buttons - Remove core plugins section
This commit is contained in:
kmmiio99o
parent
35bcfb4ac8
commit
f4e9d86735
2 changed files with 76 additions and 168 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import React from "react";
|
||||
import { hasStack, isComponentStack } from "@core/ui/reporter/utils/isStack";
|
||||
import parseErrorStack from "@core/ui/reporter/utils/parseErrorStack";
|
||||
import { getDebugInfo, toggleSafeMode } from "@lib/api/debug";
|
||||
import { BundleUpdaterManager } from "@lib/api/native/modules";
|
||||
import { settings } from "@lib/api/settings";
|
||||
|
|
@ -9,201 +10,119 @@ import { tokens } from "@metro/common";
|
|||
import { showToast } from "@lib/ui/toasts";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
SafeAreaProvider,
|
||||
SafeAreaView,
|
||||
Text,
|
||||
TableRowGroup,
|
||||
TableRow,
|
||||
TableSwitchRow,
|
||||
Stack,
|
||||
} from "@metro/common/components";
|
||||
import { ScrollView, View, Clipboard } from "react-native";
|
||||
import { ScrollView, View } from "react-native";
|
||||
|
||||
import ErrorComponentStackCard from "./ErrorComponentStackCard";
|
||||
import ErrorStackCard from "./ErrorStackCard";
|
||||
import { NavigationNative } from "@metro/common";
|
||||
|
||||
const useStyles = createStyles(() => ({
|
||||
const useStyles = createStyles({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: tokens.colors.BG_BASE_SECONDARY,
|
||||
paddingHorizontal: 16,
|
||||
height: "100%",
|
||||
gap: 12,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingBottom: 100, // Extra space for fixed buttons
|
||||
},
|
||||
header: {
|
||||
alignItems: "center",
|
||||
paddingVertical: 32,
|
||||
backgroundColor: tokens.colors.BG_BASE_SECONDARY,
|
||||
},
|
||||
headerText: {
|
||||
textAlign: "center",
|
||||
marginBottom: 8,
|
||||
},
|
||||
debugInfo: {
|
||||
fontSize: 12,
|
||||
color: tokens.colors.TEXT_MUTED,
|
||||
textAlign: "center",
|
||||
marginTop: 8,
|
||||
},
|
||||
section: {
|
||||
marginHorizontal: 16,
|
||||
marginBottom: 12,
|
||||
},
|
||||
fixedButtonContainer: {
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: tokens.colors.BG_MOD_STRONG,
|
||||
padding: 16,
|
||||
gap: 8,
|
||||
},
|
||||
buttonRow: {
|
||||
flexDirection: "row",
|
||||
gap: 8,
|
||||
},
|
||||
fullButton: {
|
||||
flex: 1,
|
||||
},
|
||||
errorMessageRow: {
|
||||
backgroundColor: tokens.colors.BG_MOD_FAINT,
|
||||
borderRadius: 8,
|
||||
marginVertical: 4,
|
||||
overflow: "hidden",
|
||||
},
|
||||
centeredErrorText: {
|
||||
color: tokens.colors.TEXT_DANGER,
|
||||
fontSize: 14,
|
||||
textAlign: "center",
|
||||
paddingVertical: 8,
|
||||
flex: 1,
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
// Component entrypoint
|
||||
export default function ErrorBoundaryScreen(props: {
|
||||
error: Error;
|
||||
rerender: () => void;
|
||||
}) {
|
||||
// Hooks MUST be at the top level and unconditionally called.
|
||||
const styles = useStyles();
|
||||
const debugInfo = getDebugInfo();
|
||||
const navigation = NavigationNative.useNavigation();
|
||||
|
||||
const copyErrorDetails = () => {
|
||||
const errorText = `Error: ${props.error.message}\n\nStack: ${props.error.stack || "No stack trace"}`;
|
||||
Clipboard.setString(errorText);
|
||||
showToast("Error details copied");
|
||||
};
|
||||
// Bisect UI state (fixes ReferenceError when referenced below)
|
||||
const [bisectBatches, setBisectBatches] = React.useState<string[][] | null>(
|
||||
null,
|
||||
);
|
||||
const [bisectIndex, setBisectIndex] = React.useState<number>(0);
|
||||
const [showBisectUI, setShowBisectUI] = React.useState<boolean>(false);
|
||||
|
||||
const copyStackTrace = () => {
|
||||
if (props.error.stack) {
|
||||
Clipboard.setString(props.error.stack);
|
||||
showToast("Stack trace copied");
|
||||
} else {
|
||||
showToast("No stack trace available");
|
||||
}
|
||||
};
|
||||
// Use a safe fallback so renders don't throw if state hasn't been initialized yet
|
||||
const batches = bisectBatches ?? [];
|
||||
const currentBatch = batches[bisectIndex] ?? [];
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<SafeAreaView style={styles.container}>
|
||||
{/* Scrollable Content */}
|
||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||
{/* Header - Using the same approach as About.tsx */}
|
||||
<View style={styles.header}>
|
||||
<Text variant="heading-xl/bold" style={styles.headerText}>
|
||||
Uh oh.
|
||||
</Text>
|
||||
<Text variant="text-md/normal" style={styles.headerText}>
|
||||
A crash occurred while rendering a component
|
||||
</Text>
|
||||
<Text style={styles.debugInfo}>
|
||||
{debugInfo.os.name} • Discord {debugInfo.discord.version} •{" "}
|
||||
{debugInfo.bunny.version}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ gap: 4 }}>
|
||||
<Text variant="display-lg">Uh oh.</Text>
|
||||
<Text variant="text-md/normal">
|
||||
A crash occurred while rendering a component. This could be caused
|
||||
by a plugin, ShiggyCord, or Discord itself.
|
||||
</Text>
|
||||
<Text variant="text-sm/normal" color="text-muted">
|
||||
{debugInfo.os.name}; {debugInfo.discord.build} (
|
||||
{debugInfo.discord.version}); {debugInfo.bunny.version}
|
||||
</Text>
|
||||
</View>
|
||||
<ScrollView fadingEdgeLength={64} contentContainerStyle={{ gap: 12 }}>
|
||||
<Text
|
||||
variant="heading-md/extrabold"
|
||||
style={{
|
||||
color: tokens.colors.TEXT_NORMAL,
|
||||
marginBottom: 8,
|
||||
textAlign: "center",
|
||||
}}
|
||||
selectable
|
||||
>
|
||||
{props.error.message || "Unknown error occurred"}
|
||||
</Text>
|
||||
|
||||
{/* Error Details */}
|
||||
<View style={styles.section}>
|
||||
<TableRowGroup title="Error Details">
|
||||
<View style={styles.errorMessageRow}>
|
||||
<TableRow
|
||||
label={
|
||||
<Text style={styles.centeredErrorText}>
|
||||
{props.error.message || "Unknown error occurred"}
|
||||
</Text>
|
||||
}
|
||||
onPress={copyErrorDetails}
|
||||
style={{ justifyContent: "center" }}
|
||||
/>
|
||||
</View>
|
||||
</TableRowGroup>
|
||||
</View>
|
||||
|
||||
{/* Stack Traces */}
|
||||
{hasStack(props.error) && (
|
||||
<View style={styles.section}>
|
||||
<TableRowGroup title="JavaScript Stack Trace">
|
||||
<View style={{ paddingHorizontal: 8, paddingBottom: 8 }}>
|
||||
<ErrorStackCard error={props.error} />
|
||||
</View>
|
||||
</TableRowGroup>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{isComponentStack(props.error) && (
|
||||
<View style={styles.section}>
|
||||
<TableRowGroup title="Component Stack">
|
||||
<View style={{ paddingHorizontal: 8, paddingBottom: 8 }}>
|
||||
<ErrorComponentStackCard
|
||||
componentStack={props.error.componentStack}
|
||||
/>
|
||||
</View>
|
||||
</TableRowGroup>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Quick Actions */}
|
||||
<View style={styles.section}>
|
||||
<TableRowGroup title="Quick Actions">
|
||||
<TableRow label="Copy Error Message" onPress={copyErrorDetails} />
|
||||
{props.error.stack && (
|
||||
<TableRow label="Copy Stack Trace" onPress={copyStackTrace} />
|
||||
)}
|
||||
</TableRowGroup>
|
||||
</View>
|
||||
{hasStack(props.error) && <ErrorStackCard error={props.error} />}
|
||||
{isComponentStack(props.error) ? (
|
||||
<ErrorComponentStackCard
|
||||
componentStack={props.error.componentStack}
|
||||
/>
|
||||
) : null}
|
||||
</ScrollView>
|
||||
|
||||
{/* Fixed Bottom Buttons - Always visible */}
|
||||
<View style={styles.fixedButtonContainer}>
|
||||
<View style={styles.buttonRow}>
|
||||
<Card style={{ gap: 12, paddingVertical: 16, alignItems: "center" }}>
|
||||
<Stack
|
||||
direction="horizontal"
|
||||
spacing={12}
|
||||
style={{ justifyContent: "center", width: "100%" }}
|
||||
>
|
||||
<Button
|
||||
text="Reload Discord"
|
||||
style={styles.fullButton}
|
||||
onPress={() => BundleUpdaterManager.reload()}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
{!settings.safeMode?.enabled && (
|
||||
<Button
|
||||
text="Safe Mode"
|
||||
variant="secondary"
|
||||
style={styles.fullButton}
|
||||
onPress={() => toggleSafeMode()}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.buttonRow}>
|
||||
<Button
|
||||
text="Retry Render"
|
||||
variant="destructive"
|
||||
style={{ flex: 1 }}
|
||||
onPress={() => {
|
||||
try {
|
||||
console.log(
|
||||
"[ShiggyCord][ErrorBoundaryScreen] Retry Render clicked",
|
||||
);
|
||||
} catch {}
|
||||
props.rerender();
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="destructive"
|
||||
text="Retry Render"
|
||||
onPress={() => {
|
||||
try {
|
||||
console.log(
|
||||
"[ShiggyCord][ErrorBoundaryScreen] Retry Render clicked",
|
||||
);
|
||||
} catch {}
|
||||
props.rerender();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</Card>
|
||||
</SafeAreaView>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -280,18 +280,7 @@ export default function Developer() {
|
|||
},
|
||||
options: [
|
||||
{
|
||||
label: Strings.SHIGGYCORD,
|
||||
onPress: () =>
|
||||
navigation.push("SHIGGYCORD_CUSTOM_PAGE", {
|
||||
render: () => {
|
||||
// Trigger an error by accessing a property on undefined
|
||||
const undefinedObj: any = undefined;
|
||||
return undefinedObj.someProperty;
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: "Discord",
|
||||
label: "ShiggyCord",
|
||||
isDestructive: true,
|
||||
onPress: () =>
|
||||
navigation.push("SHIGGYCORD_CUSTOM_PAGE", {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue