Catch cron errors (#5707)

Co-authored-by: Douwe Osinga <douwe@squareup.com>

ui/desktop/src/App.tsx

@@ -45,6 +45,7 @@ import {
 } from './hooks/useAgent';
 import { useNavigation } from './hooks/useNavigation';
 import Pair2 from './components/Pair2';
+import { errorMessage } from './utils/conversionUtils';
 
 // Route Components
 const HubRouteWrapper = ({
@@ -580,7 +581,7 @@ export function AppInner() {
   }, [navigate]);
 
   if (fatalError) {
-    return <ErrorUI error={new Error(fatalError)} />;
+    return <ErrorUI error={errorMessage(fatalError)} />;
   }
 
   return (

ui/desktop/src/components/ErrorBoundary.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from './ui/button';
 import { AlertTriangle } from 'lucide-react';
+import { errorMessage } from '../utils/conversionUtils';
 
 // Capture unhandled promise rejections
 window.addEventListener('unhandledrejection', (event) => {
@@ -14,7 +15,7 @@ window.addEventListener('error', (event) => {
   );
 });
 
-export function ErrorUI({ error }: { error: Error }) {
+export function ErrorUI({ error }: { error: string }) {
   return (
     <div className="fixed inset-0 w-full h-full flex flex-col items-center justify-center gap-6 bg-background">
       <div className="flex flex-col items-center gap-4 max-w-[600px] text-center px-6">
@@ -35,7 +36,7 @@ export function ErrorUI({ error }: { error: Error }) {
         )}
 
         <pre className="text-destructive text-sm dark:text-white p-4 bg-muted rounded-lg w-full overflow-auto border border-border whitespace-pre-wrap">
-          {error.message}
+          {error}
         </pre>
 
         <Button onClick={() => window.electron.reloadApp()}>Reload</Button>
@@ -64,7 +65,7 @@ export class ErrorBoundary extends React.Component<
 
   render() {
     if (this.state.hasError) {
-      return <ErrorUI error={this.state.error || new Error('Unknown error')} />;
+      return <ErrorUI error={errorMessage(this.state.error || 'Unknown error')} />;
     }
     return this.props.children;
   }

ui/desktop/src/components/schedule/CronPicker.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import cronstrue from 'cronstrue';
 import { ScheduledJob } from '../../schedule';
+import { errorMessage } from '../../utils/conversionUtils';
 
 type Period = 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
 
@@ -17,6 +18,7 @@ type ParsedCron = {
 interface CronPickerProps {
   schedule: ScheduledJob | null;
   onChange: (cron: string) => void;
+  isValid: (valid: boolean) => void;
 }
 
 const parseCron = (cron: string): ParsedCron => {
@@ -76,16 +78,16 @@ const to12Hour = (hour24: number): { hour: number; isPM: boolean } => {
   return { hour: hour24, isPM: false };
 };
 
-export const CronPicker: React.FC<CronPickerProps> = ({ schedule, onChange }) => {
+export const CronPicker: React.FC<CronPickerProps> = ({ schedule, onChange, isValid }) => {
   const [period, setPeriod] = useState<Period>('day');
   const [second, setSecond] = useState('0');
   const [minute, setMinute] = useState('0');
   const [hour12, setHour12] = useState(2);
-  const [currentCron, setCurrentCron] = useState('');
   const [isPM, setIsPM] = useState(true);
   const [dayOfWeek, setDayOfWeek] = useState('1');
   const [dayOfMonth, setDayOfMonth] = useState('1');
   const [month, setMonth] = useState('1');
+  const [readableCron, setReadableCron] = useState('');
 
   useEffect(() => {
     const parsed = parseCron(schedule?.cron || '');
@@ -128,16 +130,18 @@ export const CronPicker: React.FC<CronPickerProps> = ({ schedule, onChange }) =>
         cron = '0 0 0 * * *';
     }
     onChange(cron);
-    setCurrentCron(cron);
-  }, [period, second, minute, hour12, isPM, dayOfWeek, dayOfMonth, month, onChange]);
-
-  const getReadable = () => {
-    if (!currentCron) {
-      return '';
+    if (cron) {
+      const cronWithoutSeconds = cron.split(' ').slice(1).join(' ');
+      try {
+        setReadableCron(cronstrue.toString(cronWithoutSeconds));
+        isValid(true);
+      } catch (e) {
+        isValid(false);
+        setReadableCron('error: ' + errorMessage(e));
+      }
     }
-    const cronWithoutSeconds = currentCron.split(' ').slice(1).join(' ');
-    return cronstrue.toString(cronWithoutSeconds);
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [period, second, minute, hour12, isPM, dayOfWeek, dayOfMonth, month]);
 
   const selectClassName = 'px-2 py-1 border rounded bg-white dark:bg-gray-800 dark:border-gray-600';
 
@@ -277,7 +281,7 @@ export const CronPicker: React.FC<CronPickerProps> = ({ schedule, onChange }) =>
         )}
       </div>
 
-      <div className="text-xs text-gray-500 mt-2">{getReadable()}</div>
+      <div className="text-xs text-gray-500 mt-2">{readableCron}</div>
     </div>
   );
 };

ui/desktop/src/components/schedule/ScheduleModal.tsx

@@ -212,6 +212,7 @@ export const ScheduleModal: React.FC<ScheduleModalProps> = ({
   const [parsedRecipe, setParsedRecipe] = useState<Recipe | null>(null);
   const [cronExpression, setCronExpression] = useState<string>('0 0 14 * * *');
   const [internalValidationError, setInternalValidationError] = useState<string | null>(null);
+  const [isValid, setIsValid] = useState(true);
 
   const handleDeepLinkChange = useCallback(async (value: string) => {
     setDeepLinkInput(value);
@@ -467,7 +468,7 @@ export const ScheduleModal: React.FC<ScheduleModalProps> = ({
 
           <div>
             <label className={modalLabelClassName}>Schedule:</label>
-            <CronPicker schedule={schedule} onChange={setCronExpression} />
+            <CronPicker schedule={schedule} onChange={setCronExpression} isValid={setIsValid} />
           </div>
         </form>
 
@@ -484,7 +485,7 @@ export const ScheduleModal: React.FC<ScheduleModalProps> = ({
           <Button
             type="submit"
             form="schedule-form"
-            disabled={isLoadingExternally}
+            disabled={isLoadingExternally || !isValid}
             className="flex-1"
           >
             {isLoadingExternally