feat: add optional start end time to span query (#900)

* feat: add optional start end time to span query

* feat: add util, comment

Author: olzhik11

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

@@ -1,17 +1,24 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import { prettifyError, ZodError } from "zod/v4";
 
 import { getSpan, updateSpanOutput } from "@/lib/actions/span";
 
 export async function GET(
-  _req: Request,
+  req: NextRequest,
   props: { params: Promise<{ projectId: string; traceId: string; spanId: string }> }
 ): Promise<Response> {
   const params = await props.params;
   const { projectId, traceId, spanId } = params;
+  const urlSearchParams = req.nextUrl.searchParams;
 
   try {
-    const span = await getSpan({ spanId, traceId, projectId });
+    const span = await getSpan({
+      spanId,
+      traceId,
+      projectId,
+      startTime: urlSearchParams.get("startTime") || undefined,
+      endTime: urlSearchParams.get("endTime") || undefined,
+    });
 
     return NextResponse.json(span);
   } catch (e) {

frontend/app/api/shared/traces/[traceId]/spans/[spanId]/route.ts

@@ -4,15 +4,21 @@ import { prettifyError, ZodError } from "zod/v4";
 import { getSharedSpan } from "@/lib/actions/shared/span";
 
 export async function GET(
-  _req: NextRequest,
+  req: NextRequest,
   props: { params: Promise<{ traceId: string; spanId: string }> }
 ): Promise<Response> {
   const params = await props.params;
+  const urlSearchParams = req.nextUrl.searchParams;
   const traceId = params.traceId;
   const spanId = params.spanId;
 
   try {
-    const span = await getSharedSpan({ traceId, spanId });
+    const span = await getSharedSpan({
+      traceId,
+      spanId,
+      startTime: urlSearchParams.get("startTime") || undefined,
+      endTime: urlSearchParams.get("endTime") || undefined,
+    });
     return NextResponse.json(span);
   } catch (e) {
     if (e instanceof ZodError) {

frontend/components/shared/traces/span-view.tsx

@@ -7,6 +7,7 @@ import SpanTypeIcon from "@/components/traces/span-type-icon";
 import SpanMessages from "@/components/traces/span-view/span-content";
 import { SpanViewStateProvider } from "@/components/traces/span-view/span-view-store";
 import SpanStatsShields from "@/components/traces/stats-shields";
+import { TraceViewTrace } from "@/components/traces/trace-view/trace-view-store.tsx";
 import Formatter from "@/components/ui/formatter";
 import MonoWithCopy from "@/components/ui/mono-with-copy";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -18,12 +19,12 @@ import { swrFetcher } from "@/lib/utils";
 
 interface SpanViewProps {
   spanId: string;
-  traceId: string;
+  trace: TraceViewTrace;
 }
 
-export function SpanView({ spanId, traceId }: SpanViewProps) {
-  const { data: span, isLoading } = useSWR<Span>(`/api/shared/traces/${traceId}/spans/${spanId}`, swrFetcher);
-  const { data: events = [] } = useSWR<Event[]>(`/api/shared/traces/${traceId}/spans/${spanId}/events`, swrFetcher);
+export function SpanView({ spanId, trace }: SpanViewProps) {
+  const { data: span, isLoading } = useSWR<Span>(`/api/shared/traces/${trace.id}/spans/${spanId}`, swrFetcher);
+  const { data: events = [] } = useSWR<Event[]>(`/api/shared/traces/${trace.id}/spans/${spanId}/events`, swrFetcher);
 
   const cleanedEvents = useMemo(
     () =>

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

@@ -234,7 +234,7 @@ const PureTraceView = ({ trace, spans }: TraceViewProps) => {
               </div>
               {selectedSpan && (
                 <div className="flex-grow overflow-hidden flex-wrap">
-                  <SpanView key={selectedSpan.spanId} spanId={selectedSpan.spanId} traceId={trace.id} />
+                  <SpanView key={selectedSpan.spanId} spanId={selectedSpan.spanId} trace={trace} />
                 </div>
               )}
             </ResizablePanel>

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

@@ -7,6 +7,7 @@ import useSWR from "swr";
 import { SpanControls } from "@/components/traces/span-controls";
 import SpanContent from "@/components/traces/span-view/span-content";
 import { SpanViewStateProvider } from "@/components/traces/span-view/span-view-store";
+import { TraceViewTrace } from "@/components/traces/trace-view/trace-view-store.tsx";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
 import CodeHighlighter from "@/components/ui/code-highlighter/index";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -17,7 +18,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
 
 interface SpanViewProps {
   spanId: string;
-  traceId: string;
+  trace: TraceViewTrace;
 }
 
 const swrFetcher = async (url: string) => {
@@ -32,15 +33,19 @@ const swrFetcher = async (url: string) => {
   return res.json();
 };
 
-export function SpanView({ spanId, traceId }: SpanViewProps) {
+export function SpanView({ spanId, trace }: SpanViewProps) {
   const { projectId } = useParams();
+  const params = new URLSearchParams([
+    ["startTime", trace.startTime],
+    ["endTime", trace.endTime],
+  ]);
   const {
     data: span,
     isLoading,
     error,
-  } = useSWR<Span>(`/api/projects/${projectId}/traces/${traceId}/spans/${spanId}`, swrFetcher);
+  } = useSWR<Span>(`/api/projects/${projectId}/traces/${trace.id}/spans/${spanId}?${params}`, swrFetcher);
   const { data: events } = useSWR<Event[]>(
-    `/api/projects/${projectId}/traces/${traceId}/spans/${spanId}/events`,
+    `/api/projects/${projectId}/traces/${trace.id}/spans/${spanId}/events`,
     swrFetcher
   );
 

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

@@ -488,7 +488,7 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
                     key={selectedSpan.spanId}
                   />
                 ) : (
-                  <SpanView key={selectedSpan.spanId} spanId={selectedSpan.spanId} traceId={traceId} />
+                  <SpanView key={selectedSpan.spanId} spanId={selectedSpan.spanId} trace={trace} />
                 )
               ) : (
                 <div className="flex flex-col items-center justify-center size-full text-muted-foreground">

frontend/lib/actions/shared/span/index.ts

@@ -6,14 +6,30 @@ import { executeQuery } from "@/lib/actions/sql";
 import { db } from "@/lib/db/drizzle.ts";
 import { sharedTraces } from "@/lib/db/migrations/schema.ts";
 import { Span } from "@/lib/traces/types.ts";
+import { formatEndTimeForQuery } from "@/lib/utils.ts";
 
 export const GetSharedSpanSchema = z.object({
   spanId: z.string(),
   traceId: z.string(),
+  startTime: z.string().optional(),
+  endTime: z.string().optional(),
 });
 
 export const getSharedSpan = async (input: z.infer<typeof GetSharedSpanSchema>) => {
-  const { spanId, traceId } = GetSharedSpanSchema.parse(input);
+  const { spanId, traceId, startTime, endTime } = GetSharedSpanSchema.parse(input);
+
+  const whereConditions = [`span_id = {spanId: UUID}`, `trace_id = {traceId: UUID}`];
+  const parameters: Record<string, any> = { spanId, traceId };
+
+  if (startTime) {
+    whereConditions.push(`start_time >= {startTime: String}`);
+    parameters.startTime = startTime.replace("Z", "");
+  }
+
+  if (endTime) {
+    whereConditions.push(`start_time <= {endTime: String}`);
+    parameters.endTime = formatEndTimeForQuery(endTime);
+  }
 
   const sharedTrace = await db.query.sharedTraces.findFirst({
     where: eq(sharedTraces.id, traceId),
@@ -45,13 +61,10 @@ export const getSharedSpan = async (input: z.infer<typeof GetSharedSpanSchema>)
         path,
         attributes
       FROM spans
-      WHERE span_id = {spanId: UUID} AND trace_id = {traceId: UUID}
+      WHERE ${whereConditions.join(" AND ")}
       LIMIT 1
     `,
-    parameters: {
-      spanId,
-      traceId,
-    },
+    parameters,
     projectId: sharedTrace.projectId,
   });
 

frontend/lib/actions/span/index.ts

@@ -7,11 +7,14 @@ import { executeQuery } from "@/lib/actions/sql";
 import { clickhouseClient } from "@/lib/clickhouse/client";
 import { downloadSpanImages } from "@/lib/spans/utils";
 import { Span } from "@/lib/traces/types.ts";
+import { formatEndTimeForQuery } from "@/lib/utils.ts";
 
 export const GetSpanSchema = z.object({
   spanId: z.string(),
   projectId: z.string(),
   traceId: z.string().optional(),
+  startTime: z.string().optional(),
+  endTime: z.string().optional(),
 });
 
 export const UpdateSpanOutputSchema = z.object({
@@ -41,7 +44,7 @@ export const PushSpanSchema = z.object({
 });
 
 export async function getSpan(input: z.infer<typeof GetSpanSchema>) {
-  const { spanId, traceId, projectId } = GetSpanSchema.parse(input);
+  const { spanId, traceId, projectId, startTime, endTime } = GetSpanSchema.parse(input);
 
   const whereConditions = [`span_id = {spanId: UUID}`];
   const parameters: Record<string, any> = { spanId };
@@ -51,6 +54,16 @@ export async function getSpan(input: z.infer<typeof GetSpanSchema>) {
     parameters.traceId = traceId;
   }
 
+  if (startTime) {
+    whereConditions.push(`start_time >= {startTime: String}`);
+    parameters.startTime = startTime.replace("Z", "");
+  }
+
+  if (endTime) {
+    whereConditions.push(`start_time <= {endTime: String}`);
+    parameters.endTime = formatEndTimeForQuery(endTime);
+  }
+
   const mainQuery = `
     SELECT 
       span_id as spanId,

frontend/lib/utils.ts

@@ -338,3 +338,9 @@ export const tryParseJson = (value: string) => {
     return null;
   }
 };
+
+// Add 1 second to end time to cover case with rounding of end time, because of conversion clickhouse and js date time formats.
+export const formatEndTimeForQuery = (endTime: string): string => {
+  const endTimeWithBuffer = new Date(new Date(endTime).getTime() + 1000).toISOString();
+  return endTimeWithBuffer.replace("Z", "");
+};