Fix bad error handling in task recording (#737)

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 />
-        <video width={800} height={450} src={recordingURL} controls />
-      ) : (
-        <div>No recording available</div>
-      )}
     </div>
+  ) : (
+    <div>No recording available for this task</div>
   );
 }
 

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)}`;