byGalax
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
|
|
import { colors } from '../theme/colors';
|
|
|
|
interface Props {
|
|
error: Error;
|
|
}
|
|
|
|
// Last-resort fallback. Renders whenever AppBootstrap's init effect throws or
|
|
// when the global JS error handler catches an unhandled exception. The
|
|
// env-diagnostic line ("env-ok" / "env-missing") makes future bug reports
|
|
// triageable from a single screenshot.
|
|
export function BootError({ error }: Props) {
|
|
const envOk = Boolean(process.env.EXPO_PUBLIC_SUPABASE_URL);
|
|
return (
|
|
<ScrollView contentContainerStyle={styles.container}>
|
|
<Text style={styles.title}>App-Start fehlgeschlagen</Text>
|
|
<Text style={styles.message}>{error.message}</Text>
|
|
<View style={styles.diagnostic}>
|
|
<Text style={styles.diagnosticLabel}>EXPO_PUBLIC_SUPABASE_URL:</Text>
|
|
<Text style={[styles.diagnosticValue, envOk ? styles.ok : styles.bad]}>
|
|
{envOk ? 'env-ok' : 'env-missing'}
|
|
</Text>
|
|
</View>
|
|
{error.stack && <Text style={styles.stack}>{error.stack}</Text>}
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexGrow: 1,
|
|
backgroundColor: colors.bg,
|
|
padding: 24,
|
|
paddingTop: 64,
|
|
gap: 12,
|
|
},
|
|
title: { color: colors.text, fontSize: 20, fontWeight: '700' },
|
|
message: { color: colors.danger, fontSize: 14, lineHeight: 20 },
|
|
diagnostic: { flexDirection: 'row', gap: 8, marginTop: 8 },
|
|
diagnosticLabel: { color: colors.textMuted, fontSize: 12 },
|
|
diagnosticValue: { fontSize: 12, fontWeight: '700' },
|
|
ok: { color: colors.success },
|
|
bad: { color: colors.danger },
|
|
stack: {
|
|
color: colors.textDim,
|
|
fontSize: 11,
|
|
fontFamily: 'Courier',
|
|
marginTop: 16,
|
|
},
|
|
});
|