feat: add error state for trace and spans load (#941)

* feat: add error state for trace and spans load

* fix: fix comment

Author: olzhik11

frontend/app/api/projects/[projectId]/traces/[traceId]/route.ts

@@ -21,7 +21,12 @@ export async function GET(
     return NextResponse.json(trace);
   } catch (error) {
     console.error("Error fetching trace:", error);
-    return NextResponse.json({ error: "Failed to fetch trace" }, { status: 500 });
+    return NextResponse.json(
+      {
+        error: error instanceof Error ? error.message : "Failed to fetch trace",
+      },
+      { status: 500 }
+    );
   }
 }
 

frontend/components/traces/trace-view/header.tsx

@@ -63,11 +63,13 @@ const Header = ({ handleClose }: HeaderProps) => {
           <Button variant={"ghost"} className="px-0" onClick={handleClose}>
             <ChevronsRight />
           </Button>
-          <Link passHref href={`/project/${projectId}/traces/${trace?.id}?${fullScreenParams.toString()}`}>
-            <Button variant="ghost" className="px-0 mr-1">
-              <Expand className="w-4 h-4" size={16} />
-            </Button>
-          </Link>
+          {trace && (
+            <Link passHref href={`/project/${projectId}/traces/${trace?.id}?${fullScreenParams.toString()}`}>
+              <Button variant="ghost" className="px-0 mr-1">
+                <Expand className="w-4 h-4" size={16} />
+              </Button>
+            </Link>
+          )}
           <TooltipProvider delayDuration={0}>
             <Tooltip>
               <TooltipTrigger asChild>
@@ -88,7 +90,7 @@ const Header = ({ handleClose }: HeaderProps) => {
           <>
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button onClick={navigateDown} className="hover:bg-secondary px-1.5" variant="ghost">
+                <Button disabled={!trace} onClick={navigateDown} className="hover:bg-secondary px-1.5" variant="ghost">
                   <ChevronDown className="w-4 h-4" />
                 </Button>
               </TooltipTrigger>
@@ -104,7 +106,7 @@ const Header = ({ handleClose }: HeaderProps) => {
             </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button onClick={navigateUp} className="hover:bg-secondary px-1.5" variant="ghost">
+                <Button disabled={!trace} onClick={navigateUp} className="hover:bg-secondary px-1.5" variant="ghost">
                   <ChevronUp className="w-4 h-4" />
                 </Button>
               </TooltipTrigger>
@@ -123,6 +125,7 @@ const Header = ({ handleClose }: HeaderProps) => {
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
+              disabled={!trace}
               className="hover:bg-secondary px-1.5"
               variant="ghost"
               onClick={() => setBrowserSession(!browserSession)}

frontend/components/traces/trace-view/index.tsx

@@ -1,5 +1,5 @@
 import { get } from "lodash";
-import { ChartNoAxesGantt, ListFilter, Minus, Plus, Search, Sparkles } from "lucide-react";
+import { AlertTriangle, ChartNoAxesGantt, ListFilter, Minus, Plus, Search, Sparkles } from "lucide-react";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback, useEffect, useMemo } from "react";
 
@@ -27,7 +27,6 @@ import { StatefulFilter, StatefulFilterList } from "@/components/ui/datatable-fi
 import { useFiltersContextProvider } from "@/components/ui/datatable-filter/context";
 import { DatatableFilter } from "@/components/ui/datatable-filter/utils";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useToast } from "@/lib/hooks/use-toast";
 import { SpanType } from "@/lib/traces/types";
 import { cn } from "@/lib/utils.ts";
 
@@ -52,7 +51,6 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
   const router = useRouter();
   const pathName = usePathname();
   const { projectId } = useParams();
-  const { toast } = useToast();
 
   // Data states
   const {
@@ -66,6 +64,10 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
     isTraceLoading,
     setIsTraceLoading,
     setIsSpansLoading,
+    traceError,
+    setTraceError,
+    spansError,
+    setSpansError,
   } = useTraceViewStoreContext((state) => ({
     selectedSpan: state.selectedSpan,
     setSelectedSpan: state.setSelectedSpan,
@@ -77,6 +79,10 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
     isSpansLoading: state.isSpansLoading,
     setIsSpansLoading: state.setIsSpansLoading,
     setIsTraceLoading: state.setIsTraceLoading,
+    traceError: state.traceError,
+    setTraceError: state.setTraceError,
+    spansError: state.spansError,
+    setSpansError: state.setSpansError,
   }));
 
   // UI states
@@ -135,31 +141,31 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
   const handleFetchTrace = useCallback(async () => {
     try {
       setIsTraceLoading(true);
+      setTraceError(undefined);
+
       if (propsTrace) {
         setTrace(propsTrace);
       } else {
         const response = await fetch(`/api/projects/${projectId}/traces/${traceId}`);
+
         if (!response.ok) {
-          toast({
-            variant: "destructive",
-            title: "Error",
-            description: "Failed to load trace. Please try again.",
-          });
+          const errorData = await response.json().catch(() => ({ error: "Unknown error" }));
+          const errorMessage = errorData.error || "Failed to load trace";
+
+          setTraceError(errorMessage);
           return;
         }
+
         const traceData = (await response.json()) as TraceViewTrace;
         setTrace(traceData);
       }
     } catch (e) {
-      toast({
-        variant: "destructive",
-        title: "Error",
-        description: "Failed to load trace. Please try again.",
-      });
+      const errorMessage = e instanceof Error ? e.message : "Failed to load trace. Please try again.";
+      setTraceError(errorMessage);
     } finally {
       setIsTraceLoading(false);
     }
-  }, [projectId, propsTrace, setBrowserSession, setIsTraceLoading, setTrace, toast, traceId]);
+  }, [projectId, propsTrace, setIsTraceLoading, setTrace, setTraceError, traceId]);
 
   const handleSpanSelect = useCallback(
     (span?: TraceViewSpan) => {
@@ -186,6 +192,7 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
     async (search: string, searchIn: string[], filters: DatatableFilter[]) => {
       try {
         setIsSpansLoading(true);
+        setSpansError(undefined);
 
         const params = new URLSearchParams();
         if (search) {
@@ -201,8 +208,16 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
 
         const url = `/api/projects/${projectId}/traces/${traceId}/spans?${params.toString()}`;
         const response = await fetch(url);
-        const results = (await response.json()) as TraceViewSpan[];
 
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({ error: "Unknown error" }));
+          const errorMessage = errorData.error || "Failed to load spans";
+
+          setSpansError(errorMessage);
+          return;
+        }
+
+        const results = (await response.json()) as TraceViewSpan[];
         const spans = search || filters?.length > 0 ? results : enrichSpansWithPending(results);
 
         setSpans(spans);
@@ -219,19 +234,25 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
           setSelectedSpan(undefined);
         }
       } catch (e) {
+        const errorMessage = e instanceof Error ? e.message : "Failed to load spans";
+        setSpansError(errorMessage);
+
         console.error(e);
       } finally {
         setIsSpansLoading(false);
       }
     },
     [
-      trace,
       setIsSpansLoading,
-      search,
+      setSpansError,
+      setSearch,
+      setSearchEnabled,
       projectId,
       traceId,
       setSpans,
-      setSearch,
+      hasBrowserSession,
+      setHasBrowserSession,
+      setBrowserSession,
       spanId,
       searchParams,
       spanPath,
@@ -278,7 +299,7 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
     setSearchEnabled(!searchEnabled);
   }, [fetchSpans, searchEnabled, setSearch, setSearchEnabled, search]);
 
-  const isLoading = !trace || (isSpansLoading && isTraceLoading);
+  const isLoading = isTraceLoading || (isSpansLoading && !traceError && !spansError);
 
   useEffect(() => {
     if (!isSpansLoading) {
@@ -304,8 +325,20 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
       setBrowserSession(false);
       setSearch("");
       setSearchEnabled(false);
+      setTraceError(undefined);
+      setSpansError(undefined);
     };
-  }, [traceId, projectId, filters, setSpans, setBrowserSession, setSearch, setSearchEnabled]);
+  }, [
+    traceId,
+    projectId,
+    filters,
+    setSpans,
+    setBrowserSession,
+    setSearch,
+    setSearchEnabled,
+    setTraceError,
+    setSpansError,
+  ]);
 
   useEffect(() => {
     if (!traceId || !projectId) {
@@ -353,6 +386,21 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
     );
   }
 
+  if (traceError) {
+    return (
+      <div className="flex flex-col h-full w-full overflow-hidden">
+        <Header handleClose={handleClose} />
+        <div className="flex flex-col items-center justify-center flex-1 p-8 text-center">
+          <div className="max-w-md mx-auto">
+            <AlertTriangle className="w-12 h-12 text-destructive mx-auto mb-4" />
+            <h3 className="text-lg font-semibold text-destructive mb-4">Error Loading Trace</h3>
+            <p className="text-sm text-muted-foreground">{traceError}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <ScrollContextProvider>
       <div className="flex flex-col h-full w-full overflow-hidden">
@@ -430,35 +478,43 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
                   className="rounded-none w-full border-0 border-b ring-0 bg-background"
                 />
               )}
-              <>
-                {tab === "chat" && (
-                  <Chat
-                    trace={trace}
-                    onSetSpanId={(spanId) => {
-                      const span = spans.find((span) => span.spanId === spanId);
-                      if (span) {
-                        handleSpanSelect(span);
-                      }
-                    }}
-                  />
-                )}
+              {spansError ? (
+                <div className="flex flex-col items-center justify-center flex-1 p-4 text-center">
+                  <AlertTriangle className="w-8 h-8 text-destructive mb-3" />
+                  <h4 className="text-sm font-semibold text-destructive mb-2">Error Loading Spans</h4>
+                  <p className="text-xs text-muted-foreground">{spansError}</p>
+                </div>
+              ) : (
                 <>
-                  {tab === "timeline" && <Timeline />}
-                  {tab === "tree" &&
-                    (isSpansLoading ? (
-                      <div className="flex flex-col gap-2 p-2 pb-4 w-full min-w-full">
-                        <Skeleton className="h-8 w-full" />
-                        <Skeleton className="h-8 w-full" />
-                        <Skeleton className="h-8 w-full" />
-                      </div>
-                    ) : (
-                      <div className="flex flex-1 overflow-hidden relative">
-                        <Tree onSpanSelect={handleSpanSelect} />
-                        <Minimap onSpanSelect={handleSpanSelect} />
-                      </div>
-                    ))}
+                  {tab === "chat" && trace && (
+                    <Chat
+                      trace={trace}
+                      onSetSpanId={(spanId) => {
+                        const span = spans.find((span) => span.spanId === spanId);
+                        if (span) {
+                          handleSpanSelect(span);
+                        }
+                      }}
+                    />
+                  )}
+                  <>
+                    {tab === "timeline" && <Timeline />}
+                    {tab === "tree" &&
+                      (isSpansLoading ? (
+                        <div className="flex flex-col gap-2 p-2 pb-4 w-full min-w-full">
+                          <Skeleton className="h-8 w-full" />
+                          <Skeleton className="h-8 w-full" />
+                          <Skeleton className="h-8 w-full" />
+                        </div>
+                      ) : (
+                        <div className="flex flex-1 overflow-hidden relative">
+                          <Tree onSpanSelect={handleSpanSelect} />
+                          <Minimap onSpanSelect={handleSpanSelect} />
+                        </div>
+                      ))}
+                  </>
                 </>
-              </>
+              )}
               <div
                 className="absolute top-0 right-0 h-full cursor-col-resize z-50 group w-2"
                 onMouseDown={handleResizeTreeView}

frontend/components/traces/trace-view/trace-view-store.tsx

@@ -56,9 +56,11 @@ export type TraceViewTrace = {
 interface TraceViewStoreState {
   trace?: TraceViewTrace;
   isTraceLoading: boolean;
+  traceError?: string;
   spans: TraceViewSpan[];
   spanPath: string[] | null;
   isSpansLoading: boolean;
+  spansError?: string;
   searchEnabled: boolean;
   selectedSpan?: TraceViewSpan;
   browserSession: boolean;
@@ -73,7 +75,9 @@ interface TraceViewStoreState {
 
 interface TraceViewStoreActions {
   setTrace: (trace?: TraceViewTrace | ((prevTrace?: TraceViewTrace) => TraceViewTrace | undefined)) => void;
+  setTraceError: (error?: string) => void;
   setSpans: (spans: TraceViewSpan[] | ((prevSpans: TraceViewSpan[]) => TraceViewSpan[])) => void;
+  setSpansError: (error?: string) => void;
   setIsTraceLoading: (isTraceLoading: boolean) => void;
   setIsSpansLoading: (isSpansLoading: boolean) => void;
   setSelectedSpan: (span?: TraceViewSpan) => void;
@@ -106,8 +110,10 @@ const createTraceViewStore = () =>
       (set, get) => ({
         trace: undefined,
         isTraceLoading: false,
+        traceError: undefined,
         spans: [],
         isSpansLoading: false,
+        spansError: undefined,
         selectedSpan: undefined,
         browserSession: false,
         sessionTime: undefined,
@@ -130,6 +136,8 @@ const createTraceViewStore = () =>
             set({ trace });
           }
         },
+        setTraceError: (traceError) => set({ traceError }),
+        setSpansError: (spansError) => set({ spansError }),
         updateTraceVisibility: (visibility) => {
           get().setTrace((trace) => {
             if (trace) {

frontend/lib/actions/trace/index.ts

@@ -165,7 +165,7 @@ export async function updateTraceVisibility(params: z.infer<typeof UpdateTraceVi
   });
 }
 
-export async function getTrace(input: z.infer<typeof GetTraceSchema>): Promise<TraceViewTrace> {
+export async function getTrace(input: z.infer<typeof GetTraceSchema>): Promise<TraceViewTrace | undefined> {
   const { traceId, projectId } = GetTraceSchema.parse(input);
 
   const sharedTrace = await db.query.sharedTraces.findFirst({
@@ -198,7 +198,7 @@ export async function getTrace(input: z.infer<typeof GetTraceSchema>): Promise<T
   });
 
   if (!trace) {
-    throw new Error("Trace not found.");
+    return undefined;
   }
 
   return {