From 6549b6d4290d75aa6214e908a65b5a5812c1b296 Mon Sep 17 00:00:00 2001
From: Zaki Ali <zaki@squareup.com>
Date: Tue, 15 Apr 2025 09:49:06 -0700
Subject: [PATCH] feat: show error on broken recipe url's (#2197)

---
 ui/desktop/src/App.tsx                      | 6 ++++++
 ui/desktop/src/components/ErrorBoundary.tsx | 8 +++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/ui/desktop/src/App.tsx b/ui/desktop/src/App.tsx
index 428992f5..0d73ed01 100644
--- a/ui/desktop/src/App.tsx
+++ b/ui/desktop/src/App.tsx
@@ -300,6 +300,12 @@ export default function App() {
         // Initialize config first
         await initConfig();
 
+        // note: if in a non recipe session, recipeConfig is undefined, otherwise null if error
+        if (recipeConfig === null) {
+          setFatalError('Cannot read recipe config. Please check the deeplink and try again.');
+          return;
+        }
+
         // Handle bot config extensions first
         if (recipeConfig?.extensions?.length > 0 && viewType != 'recipeEditor') {
           console.log('Found extensions in bot config:', recipeConfig.extensions);
diff --git a/ui/desktop/src/components/ErrorBoundary.tsx b/ui/desktop/src/components/ErrorBoundary.tsx
index a71402c7..26457aed 100644
--- a/ui/desktop/src/components/ErrorBoundary.tsx
+++ b/ui/desktop/src/components/ErrorBoundary.tsx
@@ -22,16 +22,18 @@ export function ErrorUI({ error }) {
           <AlertTriangle className="w-8 h-8 text-destructive" />
         </div>
 
-        <h1 className="text-2xl font-semibold text-foreground">Honk!</h1>
+        <h1 className="text-2xl font-semibold text-foreground dark:text-white">Honk!</h1>
 
-        <p className="text-base text-textSubtle mb-2">An error occurred.</p>
+        <p className="text-base text-textSubtle dark:text-muted-foreground mb-2">
+          An error occurred.
+        </p>
 
         <pre className="text-destructive text-sm dark:text-white p-4 bg-muted rounded-lg w-full overflow-auto border border-border">
           {error.message}
         </pre>
 
         <Button
-          className="flex items-center gap-2 flex-1 justify-center text-white dark:text-textSubtle bg-black dark:bg-white hover:bg-subtle"
+          className="flex items-center gap-2 flex-1 justify-center text-white dark:text-background bg-black dark:bg-foreground hover:bg-subtle dark:hover:bg-muted"
           onClick={() => window.electron.reloadApp()}
         >
           Reload