feat(app): desktop startup sequence with error recovery (#153)
Replace the silent daemon bootstrap failure path with a multi-phase startup screen that shows progress and surfaces errors. Uses Expo Router Stack.Protected to gate app screens behind bootstrap completion, keeping the Stack mounted at all times to avoid layout remounts. - bootstrapDesktop() returns structured result instead of swallowing errors - addConnectionFromListenAndWaitForOnline() waits for real connection, not just probe - Startup screen shows stacked progress steps with checkmark transitions - Error state shows daemon logs, copy button, GitHub issue link, docs link, retry - External URLs open in system browser via openExternalUrl
This commit is contained in:
Mohamed Boudra
@@ -1,29 +1,318 @@
|
||||
import { Text, View } from "react-native";
|
||||
import { StyleSheet } from "react-native-unistyles";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { ActivityIndicator, Platform, ScrollView, Text, View } from "react-native";
|
||||
import * as Clipboard from "expo-clipboard";
|
||||
import { openExternalUrl } from "@/utils/open-external-url";
|
||||
import { BookOpen, Check, Copy, RotateCw, TriangleAlert } from "lucide-react-native";
|
||||
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
||||
import { PaseoLogo } from "@/components/icons/paseo-logo";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Fonts } from "@/constants/theme";
|
||||
import {
|
||||
getDesktopDaemonLogs,
|
||||
type DesktopDaemonLogs,
|
||||
} from "@/desktop/daemon/desktop-daemon";
|
||||
import { useDesktopDragHandlers } from "@/utils/desktop-window";
|
||||
|
||||
type StartupSplashScreenProps = {
|
||||
bootstrapState?: {
|
||||
phase: "starting-daemon" | "connecting" | "online" | "error";
|
||||
error: string | null;
|
||||
retry: () => void;
|
||||
};
|
||||
};
|
||||
|
||||
const GITHUB_ISSUE_URL = "https://github.com/getpaseo/paseo/issues/new";
|
||||
const DOCS_URL = "https://paseo.sh/docs";
|
||||
|
||||
const styles = StyleSheet.create((theme) => ({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: theme.colors.surface0,
|
||||
paddingHorizontal: theme.spacing[8],
|
||||
paddingVertical: theme.spacing[8],
|
||||
},
|
||||
status: {
|
||||
containerError: {
|
||||
justifyContent: "flex-start",
|
||||
paddingTop: theme.spacing[16],
|
||||
},
|
||||
centeredContent: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
maxWidth: 520,
|
||||
width: "100%",
|
||||
},
|
||||
errorContent: {
|
||||
alignItems: "stretch",
|
||||
maxWidth: 720,
|
||||
width: "100%",
|
||||
gap: theme.spacing[6],
|
||||
},
|
||||
errorHeader: {
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
title: {
|
||||
marginTop: theme.spacing[8],
|
||||
color: theme.colors.foreground,
|
||||
fontSize: theme.fontSize["3xl"],
|
||||
fontWeight: theme.fontWeight.semibold,
|
||||
textAlign: "center",
|
||||
},
|
||||
titleError: {
|
||||
textAlign: "left",
|
||||
},
|
||||
subtitleRow: {
|
||||
marginTop: theme.spacing[4],
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[3],
|
||||
},
|
||||
progressSteps: {
|
||||
marginTop: theme.spacing[4],
|
||||
gap: theme.spacing[3],
|
||||
width: "100%",
|
||||
},
|
||||
progressStepRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: theme.spacing[3],
|
||||
},
|
||||
subtitle: {
|
||||
marginTop: theme.spacing[8],
|
||||
color: theme.colors.foregroundMuted,
|
||||
fontSize: theme.fontSize.lg,
|
||||
textAlign: "center",
|
||||
},
|
||||
subtitleInline: {
|
||||
color: theme.colors.foregroundMuted,
|
||||
fontSize: theme.fontSize.lg,
|
||||
textAlign: "center",
|
||||
},
|
||||
errorDescription: {
|
||||
color: theme.colors.foregroundMuted,
|
||||
fontSize: theme.fontSize.base,
|
||||
lineHeight: 22,
|
||||
},
|
||||
errorMessage: {
|
||||
color: theme.colors.destructive,
|
||||
fontSize: theme.fontSize.sm,
|
||||
lineHeight: 20,
|
||||
fontFamily: Fonts.mono,
|
||||
},
|
||||
logsMeta: {
|
||||
color: theme.colors.foregroundMuted,
|
||||
fontSize: theme.fontSize.sm,
|
||||
},
|
||||
logsContainer: {
|
||||
height: 200,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
backgroundColor: theme.colors.surface1,
|
||||
borderWidth: theme.borderWidth[1],
|
||||
borderColor: theme.colors.border,
|
||||
overflow: "hidden",
|
||||
},
|
||||
logsScroll: {
|
||||
flexGrow: 0,
|
||||
},
|
||||
logsContent: {
|
||||
padding: theme.spacing[4],
|
||||
},
|
||||
logsText: {
|
||||
fontFamily: Fonts.mono,
|
||||
fontSize: theme.fontSize.xs,
|
||||
color: theme.colors.foreground,
|
||||
lineHeight: 18,
|
||||
...(Platform.OS === "web"
|
||||
? {
|
||||
whiteSpace: "pre",
|
||||
overflowWrap: "normal",
|
||||
}
|
||||
: null),
|
||||
},
|
||||
actionRow: {
|
||||
flexDirection: "row",
|
||||
gap: theme.spacing[3],
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}));
|
||||
|
||||
export function StartupSplashScreen() {
|
||||
export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps) {
|
||||
const { theme } = useUnistyles();
|
||||
const dragHandlers = useDesktopDragHandlers();
|
||||
const [daemonLogs, setDaemonLogs] = useState<DesktopDaemonLogs | null>(null);
|
||||
const [logsError, setLogsError] = useState<string | null>(null);
|
||||
const [isLoadingLogs, setIsLoadingLogs] = useState(false);
|
||||
|
||||
const phase = bootstrapState?.phase;
|
||||
const isError = phase === "error";
|
||||
const isSimpleSplash = bootstrapState === undefined;
|
||||
|
||||
useEffect(() => {
|
||||
if (!isError) {
|
||||
setDaemonLogs(null);
|
||||
setLogsError(null);
|
||||
setIsLoadingLogs(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let isCancelled = false;
|
||||
setIsLoadingLogs(true);
|
||||
setLogsError(null);
|
||||
|
||||
void getDesktopDaemonLogs()
|
||||
.then((logs) => {
|
||||
if (isCancelled) {
|
||||
return;
|
||||
}
|
||||
setDaemonLogs(logs);
|
||||
})
|
||||
.catch((error) => {
|
||||
if (isCancelled) {
|
||||
return;
|
||||
}
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
setDaemonLogs(null);
|
||||
setLogsError(`Unable to load daemon logs: ${message}`);
|
||||
})
|
||||
.finally(() => {
|
||||
if (!isCancelled) {
|
||||
setIsLoadingLogs(false);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
isCancelled = true;
|
||||
};
|
||||
}, [isError]);
|
||||
|
||||
const progressSteps =
|
||||
phase === "starting-daemon"
|
||||
? [{ key: "starting-daemon", label: "Starting local server...", status: "active" as const }]
|
||||
: phase === "connecting"
|
||||
? [
|
||||
{ key: "starting-daemon", label: "Started local server", status: "complete" as const },
|
||||
{ key: "connecting", label: "Connecting to local server...", status: "active" as const },
|
||||
]
|
||||
: [
|
||||
{ key: "starting-daemon", label: "Started local server", status: "complete" as const },
|
||||
{ key: "connecting", label: "Connected to local server", status: "complete" as const },
|
||||
];
|
||||
|
||||
const logsText = useMemo(() => {
|
||||
if (isLoadingLogs) {
|
||||
return "Loading daemon logs...";
|
||||
}
|
||||
if (daemonLogs?.contents) {
|
||||
return daemonLogs.contents;
|
||||
}
|
||||
if (logsError) {
|
||||
return logsError;
|
||||
}
|
||||
return "No daemon logs available.";
|
||||
}, [daemonLogs?.contents, isLoadingLogs, logsError]);
|
||||
|
||||
const handleCopyLogs = () => {
|
||||
const payload = daemonLogs?.logPath
|
||||
? `${daemonLogs.logPath}\n\n${daemonLogs.contents}`
|
||||
: logsText;
|
||||
void Clipboard.setStringAsync(payload);
|
||||
};
|
||||
|
||||
if (isSimpleSplash) {
|
||||
return (
|
||||
<View style={styles.container} {...dragHandlers}>
|
||||
<PaseoLogo size={96} />
|
||||
<Text style={styles.subtitle}>Starting up…</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isError) {
|
||||
return (
|
||||
<View style={styles.container} {...dragHandlers}>
|
||||
<View style={styles.centeredContent}>
|
||||
<PaseoLogo size={96} />
|
||||
<Text style={styles.title}>Welcome to Paseo</Text>
|
||||
<View style={styles.progressSteps}>
|
||||
{progressSteps.map((step) => (
|
||||
<View key={step.key} style={styles.progressStepRow}>
|
||||
{step.status === "complete" ? (
|
||||
<Check size={18} color={theme.colors.success} />
|
||||
) : (
|
||||
<ActivityIndicator color={theme.colors.accent} />
|
||||
)}
|
||||
<Text style={styles.subtitleInline}>{step.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container} {...dragHandlers}>
|
||||
<PaseoLogo size={96} />
|
||||
<Text style={styles.status}>Starting up…</Text>
|
||||
<View style={[styles.container, styles.containerError]} {...dragHandlers}>
|
||||
<View style={styles.errorContent}>
|
||||
<View style={styles.errorHeader}>
|
||||
<PaseoLogo size={64} />
|
||||
<Text style={[styles.title, styles.titleError]}>Something went wrong</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.errorDescription}>
|
||||
The local server failed to start. If this keeps happening, please report the issue on GitHub and include the logs below.
|
||||
</Text>
|
||||
|
||||
<Text style={styles.errorMessage}>
|
||||
{bootstrapState.error}
|
||||
</Text>
|
||||
|
||||
{daemonLogs?.logPath ? <Text style={styles.logsMeta}>{daemonLogs.logPath}</Text> : null}
|
||||
|
||||
<View style={styles.logsContainer}>
|
||||
<ScrollView
|
||||
style={styles.logsScroll}
|
||||
contentContainerStyle={styles.logsContent}
|
||||
showsVerticalScrollIndicator
|
||||
>
|
||||
<Text selectable style={styles.logsText}>
|
||||
{logsText}
|
||||
</Text>
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<View style={styles.actionRow}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
leftIcon={<Copy size={16} color={theme.colors.foreground} />}
|
||||
onPress={handleCopyLogs}
|
||||
>
|
||||
Copy logs
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
leftIcon={<TriangleAlert size={16} color={theme.colors.foreground} />}
|
||||
onPress={() => void openExternalUrl(GITHUB_ISSUE_URL)}
|
||||
>
|
||||
Open GitHub issue
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
leftIcon={<BookOpen size={16} color={theme.colors.foreground} />}
|
||||
onPress={() => void openExternalUrl(DOCS_URL)}
|
||||
>
|
||||
Docs
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
leftIcon={<RotateCw size={16} color={theme.colors.palette.white} />}
|
||||
onPress={bootstrapState.retry}
|
||||
>
|
||||
Retry
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user