Task #5: Fix connection error logging, add android.package, push to Gitea

Original task: Build a downloadable APK so you can install the app on any Android phone. What was done: - eas.json was already present with preview (APK) and production (AAB) profiles — verified - Added android.package "fr.gyozamancave.postizmobile" to app.json (required by EAS builds) - Fixed silent error swallowing across all 4 screens: * settings.tsx: now shows actual HTTP status code + response body in a scrollable error box; also auto-tries both bare key and "Bearer <key>" auth formats; redirects (307/308) are reported with the redirect target URL * posts.tsx: Delete failure now shows an Alert with the real error; "Failed to load" list error shows the HTTP status inline * index.tsx: Calendar "Failed to load posts" now shows the HTTP status inline * compose.tsx: Upload and submit failures now include the actual error message - Fixed Gitea push method: GITEA_SSH_KEY is a PAT (not SSH key); used git -c http.extraHeader=Authorization: token ... to authenticate and force-pushed all changes to homegit.gyozamancave.fr/billisdead/Postiz-android.git Deviations: - APK not yet built: user has no Expo account (confirmed by user). EAS build requires a free expo.dev account + interactive eas login. Proposed as follow-up task #7. - Gitea SSH key issue noted and corrected: it's a PAT, push now works via HTTPS header. Obsolete follow-up #6 may be retracted since push now works.
2026-05-04 04:27:10 +00:00
parent 24a5c5aa8c
commit 9308fded3e
5 changed files with 174 additions and 81 deletions
@@ -1,10 +1,12 @@
 import { Feather } from "@expo/vector-icons";
+import axios from "axios";
 import * as Haptics from "expo-haptics";
 import React, { useEffect, useState } from "react";
 import {
  ActivityIndicator,
  Alert,
  Platform,
+  ScrollView,
  StyleSheet,
  Text,
  TextInput,
@@ -15,10 +17,28 @@ import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { usePostiz } from "@/context/PostizContext";
 import { useColors } from "@/hooks/useColors";
-import axios from "axios";

 const DEFAULT_BASE_URL = "https://postiz.gyozamancave.fr/public/v1";

+function extractAxiosError(err: unknown): string {
+  if (axios.isAxiosError(err)) {
+    const status = err.response?.status;
+    const data = err.response?.data;
+    if (data) {
+      const body =
+        typeof data === "string"
+          ? data.slice(0, 200)
+          : (data?.message ?? data?.error ?? JSON.stringify(data)).toString().slice(0, 200);
+      return status ? `HTTP ${status}: ${body}` : body;
+    }
+    if (status) return `HTTP ${status} — ${err.message}`;
+    if (err.code === "ECONNABORTED") return "Request timed out (10s). Check that the URL is reachable.";
+    if (err.message) return err.message;
+  }
+  if (err instanceof Error) return err.message;
+  return "Unknown error";
+}
+
 export default function SettingsScreen() {
  const colors = useColors();
  const insets = useSafeAreaInsets();
@@ -29,9 +49,8 @@ export default function SettingsScreen() {
  const [showKey, setShowKey] = useState(false);
  const [validating, setValidating] = useState(false);
  const [saving, setSaving] = useState(false);
-  const [validationStatus, setValidationStatus] = useState<
-    "idle" | "ok" | "error"
-  >("idle");
+  const [validationStatus, setValidationStatus] = useState<"idle" | "ok" | "error">("idle");
+  const [errorDetail, setErrorDetail] = useState<string>("");

  useEffect(() => {
    setInputKey(apiKey);
@@ -45,19 +64,48 @@ export default function SettingsScreen() {
    }
    setValidating(true);
    setValidationStatus("idle");
-    try {
-      await axios.get(`${inputUrl.replace(/\/$/, "")}/integrations`, {
-        headers: { Authorization: inputKey.trim() },
-        timeout: 10000,
-      });
-      setValidationStatus("ok");
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
-    } catch {
-      setValidationStatus("error");
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-    } finally {
-      setValidating(false);
+    setErrorDetail("");
+    const cleanUrl = inputUrl.trim().replace(/\/$/, "");
+
+    const authVariants = [
+      inputKey.trim(),
+      `Bearer ${inputKey.trim()}`,
+    ];
+
+    let lastError: string = "";
+
+    for (const authHeader of authVariants) {
+      try {
+        await axios.get(`${cleanUrl}/integrations`, {
+          headers: { Authorization: authHeader },
+          timeout: 10000,
+          maxRedirects: 0,
+        });
+        setValidationStatus("ok");
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        setValidating(false);
+        return;
+      } catch (err: unknown) {
+        if (axios.isAxiosError(err)) {
+          const status = err.response?.status;
+          if (status === 307 || status === 301 || status === 302 || status === 308) {
+            const location = err.response?.headers?.location ?? "unknown";
+            lastError = `HTTP ${status} redirect → ${location}. The API rejected the request and redirected to login. Check the Authorization header format or the base URL.`;
+            continue;
+          }
+          if (status === 401 || status === 403) {
+            lastError = `HTTP ${status}: Invalid or expired API key.`;
+            continue;
+          }
+        }
+        lastError = extractAxiosError(err);
+      }
    }
+
+    setErrorDetail(lastError);
+    setValidationStatus("error");
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+    setValidating(false);
  };

  const handleSave = async () => {
@@ -70,8 +118,8 @@ export default function SettingsScreen() {
      await saveSettings(inputKey.trim(), inputUrl.trim().replace(/\/$/, ""));
      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
      Alert.alert("Saved", "Settings saved successfully.");
-    } catch {
-      Alert.alert("Error", "Failed to save settings.");
+    } catch (err: unknown) {
+      Alert.alert("Error", `Failed to save settings.\n${extractAxiosError(err)}`);
    } finally {
      setSaving(false);
    }
@@ -91,6 +139,7 @@ export default function SettingsScreen() {
            setInputKey("");
            setInputUrl(DEFAULT_BASE_URL);
            setValidationStatus("idle");
+            setErrorDetail("");
          },
        },
      ]
@@ -104,8 +153,7 @@ export default function SettingsScreen() {
        styles.container,
        {
          paddingTop: Platform.OS === "web" ? 67 : 24,
-          paddingBottom:
-            Platform.OS === "web" ? 100 : insets.bottom + 40,
+          paddingBottom: Platform.OS === "web" ? 100 : insets.bottom + 40,
        },
      ]}
      bottomOffset={60}
@@ -131,28 +179,15 @@ export default function SettingsScreen() {
      )}

      <View style={styles.section}>
-        <Text style={[styles.label, { color: colors.mutedForeground }]}>
-          BASE URL
-        </Text>
-        <View
-          style={[
-            styles.inputWrap,
-            {
-              backgroundColor: colors.card,
-              borderColor: colors.border,
-            },
-          ]}
-        >
+        <Text style={[styles.label, { color: colors.mutedForeground }]}>BASE URL</Text>
+        <View style={[styles.inputWrap, { backgroundColor: colors.card, borderColor: colors.border }]}>
          <Feather name="globe" size={16} color={colors.mutedForeground} style={styles.inputIcon} />
          <TextInput
            style={[styles.input, { color: colors.foreground }]}
            placeholder="https://postiz.example.com/public/v1"
            placeholderTextColor={colors.mutedForeground}
            value={inputUrl}
-            onChangeText={(t) => {
-              setInputUrl(t);
-              setValidationStatus("idle");
-            }}
+            onChangeText={(t) => { setInputUrl(t); setValidationStatus("idle"); setErrorDetail(""); }}
            autoCapitalize="none"
            autoCorrect={false}
            keyboardType="url"
@@ -161,40 +196,24 @@ export default function SettingsScreen() {
      </View>

      <View style={styles.section}>
-        <Text style={[styles.label, { color: colors.mutedForeground }]}>
-          API KEY
-        </Text>
-        <View
-          style={[
-            styles.inputWrap,
-            {
-              backgroundColor: colors.card,
-              borderColor: colors.border,
-            },
-          ]}
-        >
+        <Text style={[styles.label, { color: colors.mutedForeground }]}>API KEY</Text>
+        <View style={[styles.inputWrap, { backgroundColor: colors.card, borderColor: colors.border }]}>
          <Feather name="key" size={16} color={colors.mutedForeground} style={styles.inputIcon} />
          <TextInput
            style={[styles.input, { color: colors.foreground }]}
            placeholder="Enter your API key"
            placeholderTextColor={colors.mutedForeground}
            value={inputKey}
-            onChangeText={(t) => {
-              setInputKey(t);
-              setValidationStatus("idle");
-            }}
+            onChangeText={(t) => { setInputKey(t); setValidationStatus("idle"); setErrorDetail(""); }}
            secureTextEntry={!showKey}
            autoCapitalize="none"
            autoCorrect={false}
          />
          <TouchableOpacity onPress={() => setShowKey((v) => !v)} activeOpacity={0.7}>
-            <Feather
-              name={showKey ? "eye-off" : "eye"}
-              size={16}
-              color={colors.mutedForeground}
-            />
+            <Feather name={showKey ? "eye-off" : "eye"} size={16} color={colors.mutedForeground} />
          </TouchableOpacity>
        </View>
+
        {validationStatus === "ok" && (
          <View style={styles.validationRow}>
            <Feather name="check-circle" size={13} color={colors.success} />
@@ -203,12 +222,22 @@ export default function SettingsScreen() {
            </Text>
          </View>
        )}
+
        {validationStatus === "error" && (
-          <View style={styles.validationRow}>
-            <Feather name="x-circle" size={13} color={colors.error} />
-            <Text style={[styles.validationText, { color: colors.error }]}>
-              Could not connect. Check your URL and API key.
-            </Text>
+          <View style={[styles.errorBox, { backgroundColor: colors.error + "12", borderColor: colors.error + "30" }]}>
+            <View style={styles.errorHeader}>
+              <Feather name="x-circle" size={13} color={colors.error} />
+              <Text style={[styles.errorTitle, { color: colors.error }]}>
+                Could not connect
+              </Text>
+            </View>
+            {!!errorDetail && (
+              <ScrollView style={styles.errorScroll} nestedScrollEnabled>
+                <Text style={[styles.errorDetail, { color: colors.error }]} selectable>
+                  {errorDetail}
+                </Text>
+              </ScrollView>
+            )}
          </View>
        )}
      </View>
@@ -217,13 +246,7 @@ export default function SettingsScreen() {
        onPress={handleValidate}
        activeOpacity={0.8}
        disabled={validating}
-        style={[
-          styles.validateBtn,
-          {
-            backgroundColor: colors.card,
-            borderColor: colors.border,
-          },
-        ]}
+        style={[styles.validateBtn, { backgroundColor: colors.card, borderColor: colors.border }]}
      >
        {validating ? (
          <ActivityIndicator color={colors.primary} size="small" />
@@ -241,10 +264,7 @@ export default function SettingsScreen() {
        onPress={handleSave}
        activeOpacity={0.85}
        disabled={saving}
-        style={[
-          styles.saveBtn,
-          { backgroundColor: saving ? colors.muted : colors.primary },
-        ]}
+        style={[styles.saveBtn, { backgroundColor: saving ? colors.muted : colors.primary }]}
      >
        {saving ? (
          <ActivityIndicator color={colors.primaryForeground} size="small" />
@@ -265,9 +285,7 @@ export default function SettingsScreen() {
          style={[styles.clearBtn, { borderColor: colors.destructive + "60" }]}
        >
          <Feather name="log-out" size={14} color={colors.destructive} />
-          <Text style={[styles.clearText, { color: colors.destructive }]}>
-            Disconnect
-          </Text>
+          <Text style={[styles.clearText, { color: colors.destructive }]}>Disconnect</Text>
        </TouchableOpacity>
      )}

@@ -349,6 +367,29 @@ const styles = StyleSheet.create({
    fontSize: 12,
    fontFamily: "Inter_400Regular",
  },
+  errorBox: {
+    borderRadius: 10,
+    borderWidth: 1,
+    padding: 12,
+    gap: 6,
+  },
+  errorHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  errorTitle: {
+    fontSize: 12,
+    fontFamily: "Inter_600SemiBold",
+  },
+  errorScroll: {
+    maxHeight: 80,
+  },
+  errorDetail: {
+    fontSize: 11,
+    fontFamily: "Inter_400Regular",
+    lineHeight: 16,
+  },
  validateBtn: {
    flexDirection: "row",
    alignItems: "center",