show webhook failure front (#3044)

skyvern-frontend/src/api/types.ts

@@ -104,6 +104,7 @@ export type Task = {
   title: string | null;
   url: string;
   webhook_callback_url: string | null;
+  webhook_failure_reason: string | null;
   navigation_goal: string | null;
   data_extraction_goal: string | null;
   navigation_payload: Record<string, unknown> | string | null;
@@ -122,6 +123,7 @@ export type TaskApiResponse = {
   screenshot_url: string | null;
   recording_url: string | null;
   failure_reason: string | null;
+  webhook_failure_reason: string | null;
   errors: Array<Record<string, unknown>>;
   max_steps_per_run: number | null;
   task_v2: TaskV2 | null;
@@ -302,6 +304,7 @@ export type WorkflowRunStatusApiResponse = {
   recording_url: string | null;
   outputs: Record<string, unknown> | null;
   failure_reason: string | null;
+  webhook_failure_reason: string | null;
   downloaded_file_urls: Array<string> | null;
   total_steps: number | null;
   total_cost: number | null;
@@ -348,6 +351,7 @@ export type TaskV2 = {
   output: Record<string, unknown> | null;
   summary: string | null;
   webhook_callback_url: string | null;
+  webhook_failure_reason: string | null;
   totp_verification_url: string | null;
   totp_identifier: string | null;
   proxy_location: ProxyLocation | null;

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -167,6 +167,15 @@ function TaskDetails() {
     </div>
   ) : null;
 
+  const webhookFailureReason = task?.webhook_failure_reason ? (
+    <div className="space-y-1">
+      <Label>Webhook Failure Reason</Label>
+      <div className="rounded-md border border-yellow-600 p-4 text-sm">
+        {task.webhook_failure_reason}
+      </div>
+    </div>
+  ) : null;
+
   return (
     <div className="flex flex-col gap-8">
       <header className="space-y-3">
@@ -267,6 +276,7 @@ function TaskDetails() {
         <>
           {extractedInformation}
           {failureReason}
+          {webhookFailureReason}
         </>
       )}
       <SwitchBarNavigation

skyvern-frontend/src/routes/workflows/WorkflowRun.tsx

@@ -138,6 +138,19 @@ function WorkflowRun() {
 
   const isTaskv2Run = workflowRun && workflowRun.task_v2 !== null;
 
+  const webhookFailureReasonData =
+    workflowRun?.task_v2?.webhook_failure_reason ??
+    workflowRun?.webhook_failure_reason;
+
+  const webhookFailureReason = webhookFailureReasonData ? (
+    <div className="space-y-4">
+      <Label>Webhook Failure Reason</Label>
+      <div className="rounded-md border border-yellow-600 p-4 text-sm">
+        {webhookFailureReasonData}
+      </div>
+    </div>
+  ) : null;
+
   const outputs = workflowRun?.outputs;
   const extractedInformation =
     typeof outputs === "object" &&
@@ -166,7 +179,10 @@ function WorkflowRun() {
 
   const showOutputSection =
     workflowRunIsFinalized &&
-    (hasSomeExtractedInformation || hasFileUrls || hasTaskv2Output) &&
+    (hasSomeExtractedInformation ||
+      hasFileUrls ||
+      hasTaskv2Output ||
+      webhookFailureReasonData) &&
     workflowRun.status === Status.Completed;
 
   return (
@@ -308,6 +324,7 @@ function WorkflowRun() {
               </ScrollArea>
             </div>
           )}
+          {webhookFailureReason}
         </div>
       )}
       {workflowFailureReason}

skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOutput.tsx

@@ -52,9 +52,22 @@ function WorkflowRunOutput() {
   const outputs = workflowRun?.outputs;
   const fileUrls = workflowRun?.downloaded_file_urls ?? [];
   const observerOutput = workflowRun?.task_v2?.output;
+  const webhookFailureReasonData =
+    workflowRun?.task_v2?.webhook_failure_reason ??
+    workflowRun?.webhook_failure_reason;
 
   return (
     <div className="space-y-5">
+      {webhookFailureReasonData ? (
+        <div className="rounded bg-slate-elevation2 p-6">
+          <div className="space-y-4">
+            <h1 className="text-lg font-bold">Webhook Failure Reason</h1>
+            <div className="space-y-2 text-yellow-600">
+              {webhookFailureReasonData}
+            </div>
+          </div>
+        </div>
+      ) : null}
       {activeBlock ? (
         <div className="rounded bg-slate-elevation2 p-6">
           <div className="space-y-4">