From b93f0e0f791f97393fb7477cde30f6523090c7f5 Mon Sep 17 00:00:00 2001
From: LawyZheng <lawyzheng1106@gmail.com>
Date: Fri, 1 Aug 2025 15:37:44 +0800
Subject: [PATCH] show webhook failure front (#3044)

---
 skyvern-frontend/src/api/types.ts             |  4 ++++
 .../src/routes/tasks/detail/TaskDetails.tsx   | 10 ++++++++++
 .../src/routes/workflows/WorkflowRun.tsx      | 19 ++++++++++++++++++-
 .../workflowRun/WorkflowRunOutput.tsx         | 13 +++++++++++++
 4 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/skyvern-frontend/src/api/types.ts b/skyvern-frontend/src/api/types.ts
index dea2c671..c2e3a285 100644
--- a/skyvern-frontend/src/api/types.ts
+++ b/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;
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
index a81f0e35..31d99eef 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
+++ b/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
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index c93772c5..afb64fcc 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/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}
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOutput.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOutput.tsx
index 26432fd3..f615155b 100644
--- a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunOutput.tsx
+++ b/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">