feat: add worker execution replay feature

Author: moonrailgun

src/client/components/worker/WorkerEditForm.tsx

@@ -60,7 +60,7 @@ const formSchema = z
     }
   );
 
-const defaultCode = `async function fetch(params) {
+const defaultCode = `async function fetch(payload, ctx) {
   return 'Hello, World!';
 }
 `;

src/client/components/worker/WorkerExecutionDetail.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import { useTranslation } from '@i18next-toolkit/react';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { SheetDataSection } from '@/components/ui/sheet';
 import dayjs from 'dayjs';
 import { cn } from '@/utils/style';
 import { formatDate } from '@/utils/date';
 import { DataRender } from '../DataRender';
 import { drop } from 'lodash-es';
+import { LuPlay } from 'react-icons/lu';
+import { useEventWithLoading } from '@/hooks/useEvent';
+import { AlertConfirm } from '../AlertConfirm';
 
 interface WorkerExecutionDetailProps {
   vertical?: boolean;
@@ -23,13 +27,20 @@ interface WorkerExecutionDetailProps {
     responsePayload?: unknown;
     logs?: (string | number)[][] | null;
   };
+  onReplay?: (payload: unknown) => Promise<void>;
 }
 
 export const WorkerExecutionDetail: React.FC<WorkerExecutionDetailProps> =
   React.memo((props) => {
-    const { vertical = false, execution } = props;
+    const { vertical = false, execution, onReplay } = props;
     const { t } = useTranslation();
 
+    const [handleReplay, isReplaying] = useEventWithLoading(async () => {
+      if (onReplay) {
+        await onReplay(execution.requestPayload);
+      }
+    });
+
     return (
       <ScrollArea className="h-full">
         <div className="space-y-4 p-1">
@@ -76,11 +87,34 @@ export const WorkerExecutionDetail: React.FC<WorkerExecutionDetailProps> =
 
           {execution.requestPayload !== null &&
             execution.requestPayload !== undefined && (
-              <SheetDataSection label={t('Request')}>
-                <div className="mt-1 max-h-[400px] overflow-auto rounded-md bg-gray-100 p-3 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
-                  <DataRender type="json" value={execution.requestPayload} />
-                </div>
-              </SheetDataSection>
+              <>
+                <SheetDataSection label={t('Request')}>
+                  <div className="mt-1 max-h-[400px] overflow-auto rounded-md bg-gray-100 p-3 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+                    <DataRender type="json" value={execution.requestPayload} />
+                  </div>
+                </SheetDataSection>
+
+                {onReplay && (
+                  <div className="flex justify-end">
+                    <AlertConfirm
+                      title={t('Replay Worker Execution')}
+                      description={t(
+                        'Are you sure you want to replay this execution with the same payload?'
+                      )}
+                      onConfirm={handleReplay}
+                    >
+                      <Button
+                        size="sm"
+                        Icon={LuPlay}
+                        loading={isReplaying}
+                        disabled={isReplaying}
+                      >
+                        {t('Replay')}
+                      </Button>
+                    </AlertConfirm>
+                  </div>
+                )}
+              </>
             )}
 
           {execution.responsePayload !== null &&

src/client/routes/worker/$workerId/index.tsx

@@ -167,6 +167,20 @@ function PageComponent() {
     refetchExecutions();
   });
 
+  const handleReplay = useEvent(async (payload: unknown) => {
+    if (!worker) {
+      return;
+    }
+
+    await executeMutation.mutateAsync({
+      workspaceId,
+      workerId: worker.id,
+      payload: payload as Record<string, any> | undefined,
+    });
+    refetchExecutions();
+    setSelectedExecutionIndex(-1);
+  });
+
   const handleEdit = useEvent(() => {
     navigate({
       to: '/worker/$workerId/edit',
@@ -542,6 +556,7 @@ function PageComponent() {
             <WorkerExecutionDetail
               vertical={true}
               execution={selectedExecution}
+              onReplay={handleReplay}
             />
           )}
         </SheetContent>

src/client/routes/worker_/$workerId/editor.tsx

@@ -11,7 +11,7 @@ import { WorkerExecutionsTable } from '@/components/worker/WorkerExecutionsTable
 import { WorkerExecutionDetail } from '@/components/worker/WorkerExecutionDetail';
 import { WorkerApiPreview } from '@/components/worker/WorkerApiPreview';
 import { NavigationBlocker } from '@/components/NavigationBlocker';
-import { AppRouterOutput, trpc } from '@/api/trpc';
+import { AppRouterOutput, defaultErrorHandler, trpc } from '@/api/trpc';
 import { useEvent } from '@/hooks/useEvent';
 import { Loading } from '@/components/Loading';
 import { ErrorTip } from '@/components/ErrorTip';
@@ -79,13 +79,11 @@ function PageComponent() {
   });
 
   const updateMutation = trpc.worker.upsert.useMutation({
-    onError: (error) => {
-      toast.error(error.message);
-    },
-    onSuccess: () => {
-      toast.success(t('Worker updated successfully'));
-      refetchWorker();
-    },
+    onError: defaultErrorHandler,
+  });
+
+  const executeMutation = trpc.worker.execute.useMutation({
+    onError: defaultErrorHandler,
   });
 
   useEffect(() => {
@@ -136,6 +134,8 @@ function PageComponent() {
       enableCron: worker.enableCron,
       cronExpression: worker.cronExpression ?? undefined,
     });
+    toast.success(t('Worker updated successfully'));
+    refetchWorker();
   });
 
   const handleLogRefresh = useEvent(() => {
@@ -157,6 +157,21 @@ function PageComponent() {
     });
   });
 
+  const handleReplay = useEvent(async (payload: unknown) => {
+    if (!worker) {
+      return;
+    }
+
+    await executeMutation.mutateAsync({
+      workspaceId,
+      workerId: worker.id,
+      payload: payload as Record<string, any> | undefined,
+    });
+    toast.success(t('Worker executed successfully'));
+    refetchExecutions();
+    setSelectedExecutionIndex(-1);
+  });
+
   useEffect(() => {
     if (currentPage > 1 && pagination && currentPage > pagination.totalPages) {
       setCurrentPage(Math.max(1, pagination.totalPages));
@@ -314,6 +329,7 @@ function PageComponent() {
               <WorkerExecutionDetail
                 vertical={true}
                 execution={selectedExecution}
+                onReplay={handleReplay}
               />
             ) : (
               <div className="text-muted-foreground flex flex-1 items-center justify-center text-center text-sm">

src/server/model/worker/index.ts

@@ -56,7 +56,7 @@ export async function execWorker(
       cpuTime,
       requestPayload,
       responsePayload: result,
-      error: String(error),
+      error: error ? String(error) : undefined,
       logs: Array.isArray(logger) ? logger : [],
     };
 

src/server/trpc/routers/worker.ts

@@ -266,10 +266,11 @@ export const workerRouter = router({
     .input(
       z.object({
         workerId: z.cuid2(),
+        payload: z.record(z.string(), z.any()).optional(),
       })
     )
     .mutation(async ({ input, ctx }) => {
-      const { workerId, workspaceId } = input;
+      const { workerId, workspaceId, payload = undefined } = input;
 
       if (!env.enableFunctionWorker) {
         throw new Error('Function worker is not enabled');
@@ -287,7 +288,7 @@ export const workerRouter = router({
         throw new Error('Worker not found');
       }
 
-      const execution = await execWorker(worker.code, workerId, undefined, {
+      const execution = await execWorker(worker.code, workerId, payload, {
         type: 'manual',
       });
 
@@ -420,9 +421,9 @@ export const workerRouter = router({
         totalExecutions: Number(result.totalExecutions),
         successExecutions: Number(result.successExecutions),
         failedExecutions: Number(result.failedExecutions),
-        avgDuration: result.avgDuration,
-        avgMemoryUsed: result.avgMemoryUsed,
-        avgCpuTime: result.avgCpuTime,
+        avgDuration: Number(result.avgDuration),
+        avgMemoryUsed: Number(result.avgMemoryUsed),
+        avgCpuTime: Number(result.avgCpuTime),
       };
     }),