Files
codexbar-mobile/components/ErrorMessage.tsx
T
space 5a00822690
CodexBar Mobile Build / build-android (push) Successful in 22m12s
CodexBar Mobile Build / release (push) Successful in 17s
fix: show meaningful error messages in dashboard
Replace hardcoded "Failed to fetch usage" in the Dashboard tab with the
ErrorMessage component so errors like TOKEN_EXPIRED, HTTP 429, and network
failures display human-readable text consistent with the detail tabs.
Also improve HTTP error copy and add network-level error detection.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 16:28:44 +02:00

48 lines
1.8 KiB
TypeScript

import { View, Text } from "react-native";
const ERROR_MESSAGES: Record<string, string> = {
TOKEN_EXPIRED: "Your session token has expired. Please reconfigure.",
MISSING_ACCESS_TOKEN: "auth.json is missing the accessToken field.",
INVALID_JSON: "The selected file is not valid JSON.",
NO_ORGS_FOUND: "No Claude organizations found for this session key.",
INVALID_CODEX_RESPONSE:
"Codex returned an unexpected response. The app was kept safe from invalid data.",
INVALID_CLAUDE_RESPONSE:
"Claude returned an unexpected usage response. The app was kept safe from invalid data.",
INVALID_CLAUDE_ORGS_RESPONSE:
"Claude returned an unexpected organizations response.",
UNKNOWN_ERROR: "An unknown error occurred. Try refreshing.",
};
function humanize(code: string): string {
if (code.startsWith("HTTP_ERROR_")) {
const status = code.replace("HTTP_ERROR_", "");
if (status === "429") return "Rate limited by the server. Try again shortly.";
if (status === "500" || status === "502" || status === "503")
return `Server error (${status}). The service may be down.`;
return `Unexpected server response (HTTP ${status}).`;
}
if (
code === "Network request failed" ||
code.includes("fetch") ||
code.includes("network")
) {
return "Network error. Check your internet connection and try again.";
}
return ERROR_MESSAGES[code] ?? `Unexpected error: ${code}`;
}
interface ErrorMessageProps {
message: string | null;
}
export function ErrorMessage({ message }: ErrorMessageProps) {
if (!message) return null;
return (
<View className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-xl px-3 py-2.5 mb-3">
<Text className="text-sm text-red-700 dark:text-red-300">{humanize(message)}</Text>
</View>
);
}