From 106f7793db8771af8a46c88629bf21fb5f601607 Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Mon, 26 Aug 2024 22:51:27 +0300
Subject: [PATCH] Fix bad error handling in task recording (#737)

---
 .../src/routes/tasks/detail/TaskRecording.tsx     | 15 +++++++--------
 .../src/routes/tasks/detail/artifactUtils.ts      |  2 +-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
index 737111bef..4ebf0076a 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
@@ -4,6 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { getRecordingURL } from "./artifactUtils";
 import { useParams } from "react-router-dom";
 import { Skeleton } from "@/components/ui/skeleton";
+import { TaskApiResponse } from "@/api/types";
 
 function TaskRecording() {
   const { taskId } = useParams();
@@ -13,11 +14,11 @@ function TaskRecording() {
     data: recordingURL,
     isLoading: taskIsLoading,
     isError: taskIsError,
-  } = useQuery<string | undefined>({
+  } = useQuery<string | null>({
     queryKey: ["task", taskId, "recordingURL"],
     queryFn: async () => {
       const client = await getClient(credentialGetter);
-      const task = await client
+      const task: TaskApiResponse = await client
         .get(`/tasks/${taskId}`)
         .then((response) => response.data);
       return getRecordingURL(task);
@@ -39,14 +40,12 @@ function TaskRecording() {
     return <div>Error loading recording</div>;
   }
 
-  return (
+  return recordingURL ? (
     <div className="mx-auto flex">
-      {recordingURL ? (
-        <video width={800} height={450} src={recordingURL} controls />
-      ) : (
-        <div>No recording available</div>
-      )}
+      <video width={800} height={450} src={recordingURL} controls />
     </div>
+  ) : (
+    <div>No recording available for this task</div>
   );
 }
 
diff --git a/skyvern-frontend/src/routes/tasks/detail/artifactUtils.ts b/skyvern-frontend/src/routes/tasks/detail/artifactUtils.ts
index 4e8e9b9db..f3760f293 100644
--- a/skyvern-frontend/src/routes/tasks/detail/artifactUtils.ts
+++ b/skyvern-frontend/src/routes/tasks/detail/artifactUtils.ts
@@ -22,7 +22,7 @@ export function getScreenshotURL(task: TaskApiResponse) {
 
 export function getRecordingURL(task: TaskApiResponse) {
   if (!task.recording_url) {
-    return;
+    return null;
   }
   if (task.recording_url?.startsWith("file://")) {
     return `${artifactApiBaseUrl}/artifact/recording?path=${task.recording_url.slice(7)}`;