= {
if (a.description > b.description) return 1;
return 0;
},
- [QUERIES_SORT_KEYS.avgDuration]: (a, b) => a.avgDuration - b.avgDuration,
- [QUERIES_SORT_KEYS.totalTime]: (a, b) => a.totalTime - b.totalTime,
-};
-
-const calculateQueryInfo = ({ query, spanData }: { query: string; spanData: Span[] }): QueryInfo => {
- const queryTypeData = spanData.filter((span: Span) => span.description === query);
- const times = queryTypeData.map((span: Span) => span.timestamp - span.start_timestamp);
- const totalTimeInMs = times.reduce((acc: number, time: number) => acc + time, 0);
- const avgDuration = totalTimeInMs / times.length;
-
- return {
- avgDuration,
- totalTime: totalTimeInMs,
- description: query,
- };
+ [QUERIES_SORT_KEYS.avgDuration]: (a, b) => a.averageDurationMs - b.averageDurationMs,
+ [QUERIES_SORT_KEYS.totalTime]: (a, b) => a.totalDurationMs - b.totalDurationMs,
};
const Queries = () => {
@@ -50,17 +33,12 @@ const Queries = () => {
const queriesData: QueryInfo[] = useMemo(() => {
const compareQueryInfo = COMPARATORS[sort.active] || COMPARATORS[QUERIES_SORT_KEYS.totalTime];
- const spans = allSpans;
- const onlyDBSpans = spans.filter((span: Span) => DB_SPAN_REGEX.test(span.op || ""));
- const uniqueSpansSet = new Set(onlyDBSpans.map(span => (span.description ?? "").trim()));
- // Clear out empty ones (they collapse as a single empty string since this is a set)
- uniqueSpansSet.delete("");
- return [...uniqueSpansSet]
- .map(query => calculateQueryInfo({ query, spanData: onlyDBSpans }))
- .sort((a, b) => (sort.asc ? compareQueryInfo(a, b) : compareQueryInfo(b, a)));
+ return getDatabaseQuerySummaries(allSpans).sort((a, b) =>
+ sort.asc ? compareQueryInfo(a, b) : compareQueryInfo(b, a),
+ );
}, [allSpans, sort]);
- const maxTime = Math.max(...queriesData.map(query => query.totalTime));
+ const maxTime = Math.max(...queriesData.map(query => query.totalDurationMs));
const handleRowClick = (query: QueryInfo) => {
navigate(`/telemetry/insights/queries/${btoa(query.description)}`);
@@ -128,16 +106,23 @@ const Queries = () => {
className="hover:bg-primary-900 cursor-pointer"
>
|
-
+
{query.description}
|
- {getFormattedDuration(query.totalTime)}
+
+ {getFormattedDuration(query.totalDurationMs)}
+
|
-
- {getFormattedDuration(query.avgDuration)}
+
+ {getFormattedDuration(query.averageDurationMs)}
|
diff --git a/packages/spotlight/src/ui/telemetry/components/insights/QuerySummary.tsx b/packages/spotlight/src/ui/telemetry/components/insights/QuerySummary.tsx
index b36667795..9a4134146 100644
--- a/packages/spotlight/src/ui/telemetry/components/insights/QuerySummary.tsx
+++ b/packages/spotlight/src/ui/telemetry/components/insights/QuerySummary.tsx
@@ -6,6 +6,7 @@ import Breadcrumbs from "@spotlight/ui/ui/breadcrumbs";
import Table from "@spotlight/ui/ui/table";
import { useMemo } from "react";
import { Link, useParams } from "react-router-dom";
+import { getDatabaseQuerySummaries } from "../../../../telemetry/selectors/database.ts";
import { QUERY_SUMMARY_HEADERS, QUERY_SUMMARY_SORT_KEYS } from "../../constants";
import { useSentrySpans } from "../../data/useSentrySpans";
import useSort from "../../hooks/useSort";
@@ -48,9 +49,9 @@ const QuerySummary = () => {
const spans = allSpans;
const compareSpanInfo = COMPARATORS[sort.active] || COMPARATORS[QUERY_SUMMARY_SORT_KEYS.totalTime];
- return spans
- .filter(span => span.description === decodedType)
- .sort((a, b) => (sort.asc ? compareSpanInfo(a, b) : compareSpanInfo(b, a)));
+ return (getDatabaseQuerySummaries(spans, { description: decodedType })[0]?.spans ?? []).sort((a, b) =>
+ sort.asc ? compareSpanInfo(a, b) : compareSpanInfo(b, a),
+ );
}, [allSpans, sort, decodedType]);
if (!filteredDBSpans || !filteredDBSpans.length) {
diff --git a/packages/spotlight/src/ui/telemetry/components/insights/Resources.tsx b/packages/spotlight/src/ui/telemetry/components/insights/Resources.tsx
index c1fbe8e7c..5800b462c 100644
--- a/packages/spotlight/src/ui/telemetry/components/insights/Resources.tsx
+++ b/packages/spotlight/src/ui/telemetry/components/insights/Resources.tsx
@@ -3,57 +3,15 @@ import { ReactComponent as SortDown } from "@spotlight/ui/assets/sortDown.svg";
import { cn } from "@spotlight/ui/lib/cn";
import Table from "@spotlight/ui/ui/table";
import { useMemo } from "react";
+import { type ResourceSummary, getResourceSummaries } from "../../../../telemetry/selectors/resources.ts";
import { RESOURCES_SORT_KEYS, RESOURCE_HEADERS } from "../../constants";
import { useSentrySpans } from "../../data/useSentrySpans";
import useSort from "../../hooks/useSort";
-import type { Span } from "../../types";
import { formatBytes } from "../../utils/bytes";
import { getFormattedDuration, getSpanDurationClassName } from "../../utils/duration";
import EmptyState from "../shared/EmptyState";
-type ResourceInfo = {
- avgDuration: number;
- totalTime: number;
- description: string;
- avgEncodedSize: number;
- similarResources: Span[];
-};
-
-const calculateResourceInfo = ({ resource, spanData }: { resource: string; spanData: Span[] }): ResourceInfo => {
- const specificResources = spanData.filter((span: Span) => span.description === resource);
- const totalTimeInMs = specificResources.reduce(
- (acc: number, span: Span) => acc + (span.timestamp - span.start_timestamp),
- 0,
- );
- const avgDuration = totalTimeInMs / specificResources.length;
- const avgEncodedSize =
- specificResources.reduce((acc: number, span: Span) => {
- const contentLength = span.data?.["http.response_content_length"];
- if (typeof contentLength === "number") {
- return acc + contentLength;
- }
- return acc;
- }, 0) / specificResources.length;
-
- return {
- avgDuration,
- totalTime: totalTimeInMs,
- description: resource,
- avgEncodedSize,
- similarResources: specificResources,
- };
-};
-
-const getResourceSpans = (spans: Span[], options: { type?: string; regex?: RegExp }) => {
- if (options.type) {
- return spans.filter((span: Span) => span.description === options.type);
- }
- if (options.regex) {
- const regex = new RegExp(options.regex);
- return spans.filter((span: Span) => regex.test(span.op || ""));
- }
- return [];
-};
+type ResourceInfo = ResourceSummary;
type ResourceInfoComparator = (a: ResourceInfo, b: ResourceInfo) => number;
type ResourceSortTypes = (typeof RESOURCES_SORT_KEYS)[keyof typeof RESOURCES_SORT_KEYS];
@@ -63,9 +21,9 @@ const COMPARATORS: Record = {
if (a.description > b.description) return 1;
return 0;
},
- [RESOURCES_SORT_KEYS.avgEncodedSize]: (a, b) => a.avgEncodedSize - b.avgEncodedSize,
- [RESOURCES_SORT_KEYS.avgDuration]: (a, b) => a.avgDuration - b.avgDuration,
- [RESOURCES_SORT_KEYS.totalTime]: (a, b) => a.totalTime - b.totalTime,
+ [RESOURCES_SORT_KEYS.avgEncodedSize]: (a, b) => a.averageEncodedSizeBytes - b.averageEncodedSizeBytes,
+ [RESOURCES_SORT_KEYS.avgDuration]: (a, b) => a.averageDurationMs - b.averageDurationMs,
+ [RESOURCES_SORT_KEYS.totalTime]: (a, b) => a.totalDurationMs - b.totalDurationMs,
};
const Resources = () => {
@@ -73,18 +31,10 @@ const Resources = () => {
const { sort, toggleSortOrder } = useSort({ defaultSortType: RESOURCES_SORT_KEYS.totalTime });
const resources = useMemo(() => {
- const filteredResourceSpans = getResourceSpans(allSpans, { regex: /resource\.[A-Za-z]+/ });
- const uniqueResourceDescriptionsSet = new Set(filteredResourceSpans.map(span => (span.description ?? "").trim()));
- // Clear out empty ones (they collapse as a single empty string since this is a set)
- uniqueResourceDescriptionsSet.delete("");
- const uniqueResourceDescriptions: string[] = [...uniqueResourceDescriptionsSet];
const compareResourceInfo = COMPARATORS[sort.active] || COMPARATORS[RESOURCES_SORT_KEYS.totalTime];
-
- return uniqueResourceDescriptions
- .map(resource => calculateResourceInfo({ resource, spanData: filteredResourceSpans }))
- .sort((a, b) => {
- return sort.asc ? compareResourceInfo(a, b) : compareResourceInfo(b, a);
- });
+ return getResourceSummaries(allSpans).sort((a, b) =>
+ sort.asc ? compareResourceInfo(a, b) : compareResourceInfo(b, a),
+ );
}, [sort, allSpans]);
if (!resources?.length) {
@@ -143,17 +93,17 @@ const Resources = () => {
{resource.description}
-
- {getFormattedDuration(resource.avgDuration)}
+
+ {getFormattedDuration(resource.averageDurationMs)}
|
-
- {getFormattedDuration(resource.totalTime)}
+
+ {getFormattedDuration(resource.totalDurationMs)}
|
- {formatBytes(resource.avgEncodedSize)}
+ {formatBytes(resource.averageEncodedSizeBytes)}
|
))}
diff --git a/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/aiLibraries.ts b/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/aiLibraries.ts
index 3591894ae..4da3f6826 100644
--- a/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/aiLibraries.ts
+++ b/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/aiLibraries.ts
@@ -1,60 +1 @@
-import type { AILibraryHandler, Span, SpotlightAITrace, Trace } from "@spotlight/ui/telemetry/types";
-import { genAIHandler } from "./genAI";
-import { vercelAISDKHandler } from "./vercelAISDK";
-
-// Registry of AI span handlers. The generic gen_ai handler runs first because
-// it only claims standard `gen_ai.*` spans that lack `vercel.ai.*` fields, so
-// the Vercel handler still picks up its own proprietary spans.
-const aiLibraries: AILibraryHandler[] = [genAIHandler, vercelAISDKHandler];
-
-export { aiLibraries };
-
-export function detectAILibraryHandler(span: Span): AILibraryHandler | null {
- for (const handler of aiLibraries) {
- // careful if we support multiple libraries, we should improve this method so it doesn't return the first one
- if (handler.canHandleSpan(span)) {
- return handler;
- }
- }
- return null;
-}
-
-export function extractAllAIRootSpans(spans: Span[]): { span: Span; handler: AILibraryHandler }[] {
- const results: { span: Span; handler: AILibraryHandler }[] = [];
- // Handlers can match overlapping span shapes (both AI handlers key off the
- // `gen_ai.` op prefix). Attribute each root span to the first handler that
- // claims it so a span is never surfaced twice.
- const claimed = new Set();
-
- for (const handler of aiLibraries) {
- const rootSpans = handler.extractRootSpans(spans);
- for (const rootSpan of rootSpans) {
- if (claimed.has(rootSpan.span_id)) {
- continue;
- }
- claimed.add(rootSpan.span_id);
- results.push({ span: rootSpan, handler });
- }
- }
-
- return results;
-}
-
-export function createAITraceFromSpan(span: Span): SpotlightAITrace | null {
- const handler = detectAILibraryHandler(span);
- if (!handler) {
- return null;
- }
-
- return handler.processTrace(span);
-}
-
-export function hasAISpans(trace: Trace): boolean {
- if (!trace.spanTree) {
- return false;
- }
-
- // TODO: We may want to cache/optimize this `extractAllAIRootSpans` helper
- const aiRootSpans = extractAllAIRootSpans(trace.spanTree);
- return aiRootSpans.length > 0;
-}
+export * from "../../../../../../telemetry/ai/aiLibraries.ts";
diff --git a/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/genAI.ts b/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/genAI.ts
index 4b0f8565b..3fd67b5d7 100644
--- a/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/genAI.ts
+++ b/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/genAI.ts
@@ -1,357 +1 @@
-import { getAllSpansInTree } from "@spotlight/ui/telemetry/store/helpers";
-import type { AILibraryHandler, AIToolCall, Span, SpotlightAITrace } from "@spotlight/ui/telemetry/types";
-
-// Generic handler for the standardized `gen_ai.*` span conventions. Any SDK
-// that follows sentry-conventions (sentry-python's PydanticAI/OpenAI/Anthropic
-// integrations, the OTel GenAI conventions, ...) maps through here regardless
-// of provider — the provider is just the `gen_ai.system` attribute, not a
-// reason to fork the handler. The Vercel AI SDK keeps its own handler only
-// because it emits proprietary `vercel.ai.*` fields on top of `gen_ai.*`.
-// https://github.com/getsentry/sentry-conventions/tree/main/model/attributes/gen_ai
-const GEN_AI_OP_PREFIX = "gen_ai.";
-const VERCEL_FIELD_PREFIX = "vercel.ai.";
-
-// Span ops
-const GEN_AI_CHAT_OP = "gen_ai.chat";
-const GEN_AI_INVOKE_AGENT_OP = "gen_ai.invoke_agent";
-const GEN_AI_EXECUTE_TOOL_OP = "gen_ai.execute_tool";
-
-// Span data fields (sentry-conventions gen_ai.*)
-const GEN_AI_OPERATION_NAME_FIELD = "gen_ai.operation.name";
-const GEN_AI_AGENT_NAME_FIELD = "gen_ai.agent.name";
-const GEN_AI_SYSTEM_FIELD = "gen_ai.system";
-const GEN_AI_REQUEST_MODEL_FIELD = "gen_ai.request.model";
-const GEN_AI_RESPONSE_MODEL_FIELD = "gen_ai.response.model";
-const GEN_AI_USAGE_INPUT_TOKENS_FIELD = "gen_ai.usage.input_tokens";
-const GEN_AI_USAGE_OUTPUT_TOKENS_FIELD = "gen_ai.usage.output_tokens";
-const GEN_AI_REQUEST_MESSAGES_FIELD = "gen_ai.request.messages";
-const GEN_AI_SYSTEM_INSTRUCTIONS_FIELD = "gen_ai.system_instructions";
-const GEN_AI_RESPONSE_TEXT_FIELD = "gen_ai.response.text";
-const GEN_AI_RESPONSE_TOOL_CALLS_FIELD = "gen_ai.response.tool_calls";
-const GEN_AI_RESPONSE_FINISH_REASONS_FIELD = "gen_ai.response.finish_reasons";
-const GEN_AI_TOOL_NAME_FIELD = "gen_ai.tool.name";
-const GEN_AI_TOOL_CALL_ID_FIELD = "gen_ai.tool.call.id";
-const GEN_AI_TOOL_INPUT_FIELD = "gen_ai.tool.input";
-const GEN_AI_TOOL_OUTPUT_FIELD = "gen_ai.tool.output";
-
-const DEFAULT_TRACE_NAME = "AI Interaction";
-const UNKNOWN_OPERATION = "N/A";
-
-const OPERATION_BADGE_MAP = new Map([
- ["chat", "Chat"],
- ["invoke_agent", "Invoke Agent"],
- ["execute_tool", "Execute Tool"],
- [GEN_AI_CHAT_OP, "Chat"],
- [GEN_AI_INVOKE_AGENT_OP, "Invoke Agent"],
- [GEN_AI_EXECUTE_TOOL_OP, "Execute Tool"],
-]);
-
-function isGenAISpan(span: Span): boolean {
- return !!span.op?.toLowerCase().startsWith(GEN_AI_OP_PREFIX);
-}
-
-/**
- * Claims any standard `gen_ai.*` span that isn't a Vercel AI SDK span. Both
- * carry the `gen_ai.` op prefix, but only the Vercel SDK sets `vercel.ai.*`
- * data fields, so we defer those to the Vercel handler. A generic gen_ai span
- * has at least one `gen_ai.*` data key and no `vercel.ai.*` key.
- */
-function isGenAIConventionSpan(span: Span): boolean {
- if (!isGenAISpan(span) || !span.data) {
- return false;
- }
-
- let hasGenAIField = false;
- for (const key of Object.keys(span.data)) {
- if (key.startsWith(VERCEL_FIELD_PREFIX)) {
- return false;
- }
- if (key.startsWith(GEN_AI_OP_PREFIX)) {
- hasGenAIField = true;
- }
- }
-
- return hasGenAIField;
-}
-
-export const genAIHandler: AILibraryHandler = {
- id: "gen-ai",
- name: "Gen AI",
-
- canHandleSpan: isGenAIConventionSpan,
-
- extractRootSpans: (spans: Span[]): Span[] => {
- const resultRoots: Span[] = [];
-
- const findAndCollectAIRoots = (spansToSearch: Span[]) => {
- for (const currentSpan of spansToSearch) {
- if (isGenAIConventionSpan(currentSpan)) {
- resultRoots.push(currentSpan);
- } else if (!isGenAISpan(currentSpan) && currentSpan.children?.length) {
- // Stop at any gen_ai.* span: it's the shallowest AI root for its
- // tree (claimed by this handler or the Vercel one), so its nested
- // gen_ai.* children must not be surfaced as separate roots.
- findAndCollectAIRoots(currentSpan.children);
- }
- }
- };
-
- findAndCollectAIRoots(spans);
- return resultRoots;
- },
-
- processTrace: (rootSpan: Span): SpotlightAITrace => {
- const allSpans = getAllSpansInTree(rootSpan);
- const tokenUsage = extractTokenUsage(allSpans);
- const operation = determineOperation(rootSpan);
- const hasToolCall = allSpans.some(
- span => span.op === GEN_AI_EXECUTE_TOOL_OP || !!span.data?.[GEN_AI_TOOL_NAME_FIELD],
- );
-
- const durationMs = rootSpan.timestamp - rootSpan.start_timestamp;
-
- const trace: SpotlightAITrace = {
- id: rootSpan.span_id,
- name: determineTraceName(rootSpan),
- operation,
- timestamp: rootSpan.start_timestamp,
- durationMs,
- tokensDisplay: formatTokensDisplay(tokenUsage.promptTokens, tokenUsage.completionTokens),
- promptTokens: tokenUsage.promptTokens,
- completionTokens: tokenUsage.completionTokens,
- hasToolCall,
- rawSpan: rootSpan,
- metadata: {
- metadata: {},
- promptTokens: tokenUsage.promptTokens,
- completionTokens: tokenUsage.completionTokens,
- },
- toolCalls: [],
- };
-
- const responseState = { finishReasonFromText: false };
- for (const span of allSpans) {
- if (!span.data) continue;
- extractMetadata(span, trace);
- extractPromptData(span, trace);
- extractResponseData(span, trace, responseState);
- extractToolCallData(span, trace);
- }
-
- return trace;
- },
-
- getDisplayTitle: (trace: SpotlightAITrace): string => {
- return trace.name || trace.operation || `AI Trace ${trace.id.substring(0, 8)}`;
- },
-
- getTypeBadge: (trace: SpotlightAITrace): string => {
- if (trace.hasToolCall) {
- return "Tool-Call";
- }
-
- return OPERATION_BADGE_MAP.get(trace.operation) ?? trace.operation.replace(/^gen_ai\./, "");
- },
-
- getTokensDisplay: (trace: SpotlightAITrace): string => {
- return trace.tokensDisplay;
- },
-};
-
-function determineOperation(rootSpan: Span): string {
- const operationName = rootSpan.data?.[GEN_AI_OPERATION_NAME_FIELD];
- if (operationName) {
- return String(operationName);
- }
- if (rootSpan.op) {
- return rootSpan.op;
- }
- return UNKNOWN_OPERATION;
-}
-
-function determineTraceName(rootSpan: Span): string {
- const agentName = rootSpan.data?.[GEN_AI_AGENT_NAME_FIELD];
- if (agentName) {
- return String(agentName);
- }
- return rootSpan.description || rootSpan.op || DEFAULT_TRACE_NAME;
-}
-
-/**
- * Sums token usage across every span in the tree so an agent root with multiple
- * chat turns reports the total, not just the first turn's usage.
- */
-function extractTokenUsage(spans: Span[]): { promptTokens?: number; completionTokens?: number } {
- let promptTokens: number | undefined;
- let completionTokens: number | undefined;
-
- for (const span of spans) {
- if (!span.data) continue;
-
- if (span.data[GEN_AI_USAGE_INPUT_TOKENS_FIELD] !== undefined) {
- promptTokens = (promptTokens ?? 0) + Number(span.data[GEN_AI_USAGE_INPUT_TOKENS_FIELD]);
- }
-
- if (span.data[GEN_AI_USAGE_OUTPUT_TOKENS_FIELD] !== undefined) {
- completionTokens = (completionTokens ?? 0) + Number(span.data[GEN_AI_USAGE_OUTPUT_TOKENS_FIELD]);
- }
- }
-
- return { promptTokens, completionTokens };
-}
-
-function formatTokensDisplay(promptTokens?: number, completionTokens?: number): string {
- if (promptTokens !== undefined && completionTokens !== undefined) {
- return `${promptTokens} / ${completionTokens}`;
- }
- if (promptTokens !== undefined) {
- return `${promptTokens} / ?`;
- }
- if (completionTokens !== undefined) {
- return `? / ${completionTokens}`;
- }
- return UNKNOWN_OPERATION;
-}
-
-/**
- * Normalizes message content from a string or an array of content blocks to a
- * plain string. Only text blocks are surfaced; images/files would need UI work.
- */
-function normalizeMessageContent(content: unknown): string {
- if (typeof content === "string") return content;
- if (Array.isArray(content)) {
- return content
- .filter(
- (block): block is { type: string; text: string } => block?.type === "text" && typeof block.text === "string",
- )
- .map(block => block.text)
- .join("");
- }
- return "";
-}
-
-function extractMetadata(span: Span, trace: SpotlightAITrace) {
- if (!span.data) return;
-
- if (trace.metadata.modelId === undefined) {
- const modelId = span.data[GEN_AI_REQUEST_MODEL_FIELD] ?? span.data[GEN_AI_RESPONSE_MODEL_FIELD];
- if (modelId !== undefined) {
- trace.metadata.modelId = String(modelId);
- }
- }
-
- if (trace.metadata.modelProvider === undefined && span.data[GEN_AI_SYSTEM_FIELD] !== undefined) {
- trace.metadata.modelProvider = String(span.data[GEN_AI_SYSTEM_FIELD]);
- }
-}
-
-function extractPromptData(span: Span, trace: SpotlightAITrace) {
- if (!span.data || trace.prompt) return;
-
- const promptMessages = span.data[GEN_AI_REQUEST_MESSAGES_FIELD];
- if (promptMessages === undefined) return;
-
- const system = span.data[GEN_AI_SYSTEM_INSTRUCTIONS_FIELD];
- const systemText = system !== undefined ? String(system) : undefined;
-
- try {
- const messages = typeof promptMessages === "string" ? JSON.parse(promptMessages) : promptMessages;
- if (Array.isArray(messages)) {
- const normalizedMessages = messages.map((msg: { role: string; content: unknown }) => ({
- ...msg,
- content: normalizeMessageContent(msg.content),
- }));
- trace.prompt = { messages: normalizedMessages, system: systemText };
- return;
- }
- } catch {
- // fall through to the raw representation below
- }
-
- trace.prompt = { messages: [{ role: "unknown", content: String(promptMessages) }], system: systemText };
-}
-
-function extractFinishReason(finishReasons: unknown): string | undefined {
- if (Array.isArray(finishReasons) && finishReasons.length > 0) {
- return String(finishReasons[0]);
- }
- if (typeof finishReasons === "string" && finishReasons) {
- return finishReasons;
- }
- return undefined;
-}
-
-function extractResponseData(span: Span, trace: SpotlightAITrace, state: { finishReasonFromText: boolean }) {
- if (!span.data) return;
-
- trace.response = trace.response || {};
-
- // Spans arrive in tree pre-order, so for an agent root with several chat
- // children the last span carrying a response wins — surfacing the latest
- // model turn rather than the first.
- const responseText = span.data[GEN_AI_RESPONSE_TEXT_FIELD];
- const text = Array.isArray(responseText)
- ? responseText.map(String).join("")
- : responseText
- ? String(responseText)
- : "";
-
- const finishReason = extractFinishReason(span.data[GEN_AI_RESPONSE_FINISH_REASONS_FIELD]);
-
- if (text) {
- trace.response.text = text;
- // Re-pair the finish reason with the turn that produced the surfaced text,
- // even overwriting one an earlier text-less turn contributed, so the text
- // and its reason always come from the same turn.
- trace.response.finishReason = finishReason;
- state.finishReasonFromText = true;
- } else if (finishReason !== undefined && !state.finishReasonFromText) {
- // SDKs omit gen_ai.response.text when PII recording is off, and tool-call
- // turns carry a reason with no text — still surface the reason, but never
- // let it override one already paired with a text turn.
- trace.response.finishReason = finishReason;
- }
-
- const toolCalls = span.data[GEN_AI_RESPONSE_TOOL_CALLS_FIELD];
- if (toolCalls) {
- try {
- trace.response.toolCalls = typeof toolCalls === "string" ? JSON.parse(toolCalls) : (toolCalls as AIToolCall[]);
- } catch {
- // ignore unparseable tool call payloads
- }
- }
-}
-
-function extractToolCallData(span: Span, trace: SpotlightAITrace) {
- if (!span.data) return;
-
- const toolName = span.data[GEN_AI_TOOL_NAME_FIELD];
- if (!toolName) return;
-
- const toolCallId = span.data[GEN_AI_TOOL_CALL_ID_FIELD];
- const toolCall: Partial = {
- toolCallId: toolCallId ? String(toolCallId) : span.span_id,
- toolName: String(toolName),
- args: {} as Record,
- };
-
- const toolInput = span.data[GEN_AI_TOOL_INPUT_FIELD];
- if (toolInput) {
- try {
- toolCall.args = typeof toolInput === "string" ? JSON.parse(toolInput) : (toolInput as Record);
- } catch {
- toolCall.args = { input: toolInput };
- }
- }
-
- const toolOutput = span.data[GEN_AI_TOOL_OUTPUT_FIELD];
- if (toolOutput) {
- try {
- toolCall.result = typeof toolOutput === "string" ? JSON.parse(toolOutput) : toolOutput;
- } catch {
- toolCall.result = String(toolOutput);
- }
- }
-
- trace.toolCalls.push(toolCall as AIToolCall);
-}
+export * from "../../../../../../telemetry/ai/genAI.ts";
diff --git a/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/vercelAISDK.ts b/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/vercelAISDK.ts
index d74543750..b79e1d349 100644
--- a/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/vercelAISDK.ts
+++ b/packages/spotlight/src/ui/telemetry/components/insights/aiTraces/sdks/vercelAISDK.ts
@@ -1,467 +1 @@
-import { getAllSpansInTree } from "@spotlight/ui/telemetry/store/helpers";
-import type { AILibraryHandler, AIToolCall, Span, SpotlightAITrace } from "@spotlight/ui/telemetry/types";
-
-// https://ai-sdk.dev/docs/ai-sdk-core/telemetry
-const AI_SPAN_OP_PREFIX = "gen_ai.";
-const AI_OPERATION_ID_FIELD = "vercel.ai.operationId";
-const AI_OPERATION_NAME_FIELD = "operation.name";
-
-// Tool call related constants (OpenTelemetry semantic conventions)
-const AI_TOOL_CALL_OPERATION = "ai.toolCall";
-const AI_EXECUTE_TOOL_OPERATION = "gen_ai.execute_tool";
-const GEN_AI_TOOL_NAME_FIELD = "gen_ai.tool.name";
-const GEN_AI_TOOL_CALL_ID_FIELD = "gen_ai.tool.call.id";
-const GEN_AI_TOOL_INPUT_FIELD = "gen_ai.tool.input";
-const GEN_AI_TOOL_OUTPUT_FIELD = "gen_ai.tool.output";
-
-const AI_MODEL_ID_FIELD = "vercel.ai.model.id";
-const AI_MODEL_PROVIDER_FIELD = "vercel.ai.model.provider";
-const AI_SETTINGS_MAX_RETRIES_FIELD = "vercel.ai.settings.maxRetries";
-const AI_SETTINGS_MAX_STEPS_FIELD = "vercel.ai.settings.maxSteps";
-const AI_TELEMETRY_FUNCTION_ID_FIELD = "vercel.ai.telemetry.functionId";
-const AI_TELEMETRY_METADATA_PREFIX = "vercel.ai.telemetry.metadata.";
-const AI_PROMPT_FIELD = "vercel.ai.prompt";
-const AI_PROMPT_MESSAGES_FIELD = "gen_ai.request.messages";
-const AI_RESPONSE_FINISH_REASON_FIELD = "vercel.ai.response.finishReason";
-const GEN_AI_RESPONSE_FINISH_REASONS_FIELD = "gen_ai.response.finish_reasons";
-const AI_RESPONSE_TEXT_FIELD = "gen_ai.response.text";
-const AI_RESPONSE_TOOL_CALLS_FIELD = "vercel.ai.response.toolCalls";
-
-// v1 operation names
-const AI_STREAM_TEXT_OPERATION = "ai.streamText";
-const AI_GENERATE_TEXT_OPERATION = "ai.generateText";
-
-// v2 operation names (OpenTelemetry semantic conventions)
-const AI_INVOKE_AGENT_OPERATION = "gen_ai.invoke_agent";
-const AI_STREAM_TEXT_V2_OPERATION = "gen_ai.stream_text";
-
-// v2 field names
-const GEN_AI_PROMPT_FIELD = "gen_ai.prompt";
-const GEN_AI_FUNCTION_ID_FIELD = "gen_ai.function_id";
-const GEN_AI_REQUEST_MODEL_FIELD = "gen_ai.request.model";
-const GEN_AI_RESPONSE_MODEL_FIELD = "gen_ai.response.model";
-const GEN_AI_SYSTEM_FIELD = "gen_ai.system";
-const GEN_AI_OPERATION_NAME_FIELD = "gen_ai.operation.name";
-
-const AI_USAGE_PROMPT_TOKENS_FIELD = "vercel.ai.usage.promptTokens";
-const AI_USAGE_COMPLETION_TOKENS_FIELD = "vercel.ai.usage.completionTokens";
-const GEN_AI_USAGE_INPUT_TOKENS_FIELD = "gen_ai.usage.input_tokens";
-const GEN_AI_USAGE_OUTPUT_TOKENS_FIELD = "gen_ai.usage.output_tokens";
-
-const TOKEN_FIELDS = {
- PROMPT: [AI_USAGE_PROMPT_TOKENS_FIELD, GEN_AI_USAGE_INPUT_TOKENS_FIELD],
- COMPLETION: [AI_USAGE_COMPLETION_TOKENS_FIELD, GEN_AI_USAGE_OUTPUT_TOKENS_FIELD],
-} as const;
-
-// Other constants
-const DEFAULT_TRACE_NAME = "AI Interaction";
-const UNKNOWN_OPERATION = "N/A";
-
-// Operation to badge mapping
-const OPERATION_BADGE_MAP = new Map([
- [AI_STREAM_TEXT_OPERATION, "Stream Text"],
- [AI_GENERATE_TEXT_OPERATION, "Generate Text"],
- [AI_INVOKE_AGENT_OPERATION, "Invoke Agent"],
- [AI_STREAM_TEXT_V2_OPERATION, "Stream Text"],
-]);
-
-// Field mappings: first element is v2, subsequent are v1 alternatives
-const AI_FIELD_MAPPINGS = {
- MODEL_ID: [AI_MODEL_ID_FIELD, GEN_AI_REQUEST_MODEL_FIELD, GEN_AI_RESPONSE_MODEL_FIELD],
- MODEL_PROVIDER: [AI_MODEL_PROVIDER_FIELD, GEN_AI_SYSTEM_FIELD],
- FUNCTION_ID: [AI_TELEMETRY_FUNCTION_ID_FIELD, GEN_AI_FUNCTION_ID_FIELD],
- PROMPT_TOKENS: [AI_USAGE_PROMPT_TOKENS_FIELD, GEN_AI_USAGE_INPUT_TOKENS_FIELD],
- COMPLETION_TOKENS: [AI_USAGE_COMPLETION_TOKENS_FIELD, GEN_AI_USAGE_OUTPUT_TOKENS_FIELD],
- PROMPT: [GEN_AI_PROMPT_FIELD, AI_PROMPT_FIELD],
- OPERATION_ID: [AI_OPERATION_ID_FIELD, AI_OPERATION_NAME_FIELD, GEN_AI_OPERATION_NAME_FIELD],
-} as const;
-
-/**
- * Extracts a field value from span data, checking v1 fields first then v2 alternatives.
- */
-function extractFieldFromSpan(
- data: Record,
- fieldKey: keyof typeof AI_FIELD_MAPPINGS,
-): unknown | undefined {
- const fields = AI_FIELD_MAPPINGS[fieldKey];
- for (const field of fields) {
- if (data[field] !== undefined) {
- return data[field];
- }
- }
- return undefined;
-}
-
-export const vercelAISDKHandler: AILibraryHandler = {
- id: "vercel-ai-sdk",
- name: "Vercel AI SDK",
-
- canHandleSpan: (span: Span): boolean => {
- return !!span.op?.toLowerCase().startsWith(AI_SPAN_OP_PREFIX);
- },
-
- extractRootSpans: (spans: Span[]): Span[] => {
- const resultRoots: Span[] = [];
-
- const findAndCollectAIRoots = (spansToSearch: Span[]) => {
- for (const currentSpan of spansToSearch) {
- if (currentSpan.op?.toLowerCase().startsWith(AI_SPAN_OP_PREFIX)) {
- resultRoots.push(currentSpan);
- } else if (currentSpan.children?.length) {
- findAndCollectAIRoots(currentSpan.children);
- }
- }
- };
-
- findAndCollectAIRoots(spans);
- return resultRoots;
- },
-
- processTrace: (rootSpan: Span): SpotlightAITrace => {
- const allSpans = getAllSpansInTree(rootSpan);
- const tokenUsage = extractTokenUsage(allSpans);
- const operationInfo = determineOperation(allSpans, rootSpan);
- const traceName = determineTraceName(rootSpan, operationInfo);
-
- const durationMs = rootSpan.timestamp - rootSpan.start_timestamp;
-
- // Initialize the trace with basic properties
- const trace: SpotlightAITrace = {
- id: rootSpan.span_id,
- name: traceName,
- operation: operationInfo.operation,
- timestamp: rootSpan.start_timestamp,
- durationMs,
- tokensDisplay: formatTokensDisplay(tokenUsage.promptTokens, tokenUsage.completionTokens),
- promptTokens: tokenUsage.promptTokens,
- completionTokens: tokenUsage.completionTokens,
- hasToolCall: operationInfo.hasToolCall,
- rawSpan: rootSpan,
- metadata: {
- metadata: {},
- },
- toolCalls: [],
- };
-
- // Parse detailed span data
- parseSpanData(allSpans, trace);
-
- return trace;
- },
-
- getDisplayTitle: (trace: SpotlightAITrace): string => {
- return trace.name || trace.operation || `AI Trace ${trace.id.substring(0, 8)}`;
- },
-
- getTypeBadge: (trace: SpotlightAITrace): string => {
- if (trace.hasToolCall) {
- return "Tool-Call";
- }
-
- return OPERATION_BADGE_MAP.get(trace.operation) ?? trace.operation.replace(/^(ai\.|gen_ai\.)/, "");
- },
-
- getTokensDisplay: (trace: SpotlightAITrace): string => {
- return trace.tokensDisplay;
- },
-};
-
-function extractTokenUsage(spans: Span[]): { promptTokens?: number; completionTokens?: number } {
- let promptTokens: number | undefined;
- let completionTokens: number | undefined;
-
- for (const span of spans) {
- if (!span.data) continue;
-
- if (promptTokens === undefined) {
- for (const field of TOKEN_FIELDS.PROMPT) {
- const value = span.data[field];
- if (value !== undefined) {
- promptTokens = Number(value);
- break;
- }
- }
- }
-
- if (completionTokens === undefined) {
- for (const field of TOKEN_FIELDS.COMPLETION) {
- const value = span.data[field];
- if (value !== undefined) {
- completionTokens = Number(value);
- break;
- }
- }
- }
-
- if (promptTokens !== undefined && completionTokens !== undefined) {
- break;
- }
- }
-
- return { promptTokens, completionTokens };
-}
-
-function determineOperation(
- spans: Span[],
- rootSpan: Span,
-): { operation: string; hasToolCall: boolean; toolCallName?: string } {
- let operation = UNKNOWN_OPERATION;
- let hasToolCall = false;
- let toolCallName: string | undefined;
- let foundToolCallAsOperationId = false;
-
- for (const span of spans) {
- if (span.op === AI_TOOL_CALL_OPERATION || span.op === AI_EXECUTE_TOOL_OPERATION) {
- hasToolCall = true;
- }
-
- if (!span.data) continue;
-
- const operationId = extractFieldFromSpan(span.data, "OPERATION_ID") as string | undefined;
-
- // Handle tool call operation
- if (operationId === AI_TOOL_CALL_OPERATION) {
- operation = AI_TOOL_CALL_OPERATION;
- foundToolCallAsOperationId = true;
- hasToolCall = true;
-
- if (span.data[GEN_AI_TOOL_NAME_FIELD]) {
- toolCallName = String(span.data[GEN_AI_TOOL_NAME_FIELD]);
- }
- }
-
- // Handle other operations (prioritize root and direct children)
- if (!foundToolCallAsOperationId && operationId && operation === UNKNOWN_OPERATION) {
- const isHighPriority =
- span.span_id === rootSpan.span_id || rootSpan.children?.some(child => child.span_id === span.span_id);
-
- if (isHighPriority) {
- operation = operationId;
- }
- }
- }
-
- // Fallback logic
- if (operation === UNKNOWN_OPERATION) {
- if (rootSpan.op) {
- operation = rootSpan.op;
- } else if (rootSpan.description) {
- operation = rootSpan.description;
- }
- }
-
- return { operation, hasToolCall, toolCallName };
-}
-
-function determineTraceName(rootSpan: Span, operationInfo: { toolCallName?: string }): string {
- if (operationInfo.toolCallName) {
- return operationInfo.toolCallName;
- }
-
- return rootSpan.description || rootSpan.op || DEFAULT_TRACE_NAME;
-}
-
-function formatTokensDisplay(promptTokens?: number, completionTokens?: number): string {
- if (promptTokens !== undefined && completionTokens !== undefined) {
- return `${promptTokens} / ${completionTokens}`;
- }
- if (promptTokens !== undefined) {
- return `${promptTokens} / ?`;
- }
- if (completionTokens !== undefined) {
- return `? / ${completionTokens}`;
- }
- return UNKNOWN_OPERATION;
-}
-
-/**
- * Normalizes message content from v1 (string) or v2 (array of content blocks) format to a string.
- * v1: content = "text string"
- * v2: content = [{ type: "text", text: "text string" }]
- *
- * Only extracts text content blocks. Other block types (image, file, tool-call)
- * would require UI changes to display properly and are filtered out for now.
- */
-function normalizeMessageContent(content: unknown): string {
- if (typeof content === "string") return content;
- if (Array.isArray(content)) {
- // Only extract text content - images/files would need UI changes to display
- return content
- .filter(
- (block): block is { type: string; text: string } => block.type === "text" && typeof block.text === "string",
- )
- .map(block => block.text)
- .join("");
- }
- return "";
-}
-
-function parseSpanData(spans: Span[], trace: SpotlightAITrace) {
- for (const span of spans) {
- if (!span.data) continue;
-
- extractAIMetadata(span, trace);
- extractTelemetryMetadata(span, trace);
- extractPromptData(span, trace);
- extractResponseData(span, trace);
- extractToolCallData(span, trace);
- }
-}
-
-function extractAIMetadata(span: Span, trace: SpotlightAITrace) {
- if (!span.data) return;
-
- // Model ID
- if (trace.metadata.modelId === undefined) {
- const modelId = extractFieldFromSpan(span.data, "MODEL_ID");
- if (modelId !== undefined) {
- trace.metadata.modelId = String(modelId);
- }
- }
-
- // Model Provider
- if (trace.metadata.modelProvider === undefined) {
- const provider = extractFieldFromSpan(span.data, "MODEL_PROVIDER");
- if (provider !== undefined) {
- trace.metadata.modelProvider = String(provider);
- }
- }
-
- // Function ID
- if (trace.metadata.functionId === undefined) {
- const functionId = extractFieldFromSpan(span.data, "FUNCTION_ID");
- if (functionId !== undefined) {
- trace.metadata.functionId = String(functionId);
- }
- }
-
- if (span.data[AI_SETTINGS_MAX_RETRIES_FIELD]) {
- trace.metadata.maxRetries = Number(span.data[AI_SETTINGS_MAX_RETRIES_FIELD]);
- }
-
- if (span.data[AI_SETTINGS_MAX_STEPS_FIELD]) {
- trace.metadata.maxSteps = Number(span.data[AI_SETTINGS_MAX_STEPS_FIELD]);
- }
-
- // Token usage - use === undefined to allow 0 values
- if (trace.metadata.promptTokens === undefined) {
- const promptTokens = extractFieldFromSpan(span.data, "PROMPT_TOKENS");
- if (promptTokens !== undefined) {
- trace.metadata.promptTokens = Number(promptTokens);
- }
- }
-
- if (trace.metadata.completionTokens === undefined) {
- const completionTokens = extractFieldFromSpan(span.data, "COMPLETION_TOKENS");
- if (completionTokens !== undefined) {
- trace.metadata.completionTokens = Number(completionTokens);
- }
- }
-}
-
-function extractTelemetryMetadata(span: Span, trace: SpotlightAITrace) {
- if (!span.data) return;
-
- for (const [key, value] of Object.entries(span.data)) {
- if (key.startsWith(AI_TELEMETRY_METADATA_PREFIX)) {
- const metadataKey = key.replace(AI_TELEMETRY_METADATA_PREFIX, "");
- trace.metadata.metadata[metadataKey] = value;
- }
- }
-}
-
-function extractPromptData(span: Span, trace: SpotlightAITrace) {
- if (!span.data) return;
-
- const promptField = extractFieldFromSpan(span.data, "PROMPT");
- if (promptField && !trace.prompt) {
- try {
- const parsed = JSON.parse(String(promptField));
- // Normalize message content from v2 array format to string
- if (parsed.messages && Array.isArray(parsed.messages)) {
- parsed.messages = parsed.messages.map((msg: { role: string; content: unknown }) => ({
- ...msg,
- content: normalizeMessageContent(msg.content),
- }));
- }
- trace.prompt = parsed;
- } catch {
- trace.prompt = { messages: [{ role: "unknown", content: String(promptField) }] };
- }
- }
-
- const promptMessages = span.data[AI_PROMPT_MESSAGES_FIELD];
- if (promptMessages && !trace.prompt) {
- try {
- const messages = JSON.parse(String(promptMessages));
- // Normalize message content from v2 array format to string
- const normalizedMessages = messages.map((msg: { role: string; content: unknown }) => ({
- ...msg,
- content: normalizeMessageContent(msg.content),
- }));
- trace.prompt = { messages: normalizedMessages };
- } catch {
- trace.prompt = { messages: [{ role: "unknown", content: String(promptMessages) }] };
- }
- }
-}
-
-function extractResponseData(span: Span, trace: SpotlightAITrace) {
- if (!span.data) return;
-
- trace.response = trace.response || {};
-
- const finishReason = span.data[AI_RESPONSE_FINISH_REASON_FIELD];
- if (finishReason) {
- trace.response.finishReason = String(finishReason);
- }
-
- const finishReasons = span.data[GEN_AI_RESPONSE_FINISH_REASONS_FIELD];
- if (!trace.response.finishReason && Array.isArray(finishReasons) && finishReasons.length > 0) {
- trace.response.finishReason = String(finishReasons[0]);
- }
-
- const responseText = span.data[AI_RESPONSE_TEXT_FIELD];
- if (responseText) {
- trace.response.text = String(responseText);
- }
-
- const toolCalls = span.data[AI_RESPONSE_TOOL_CALLS_FIELD];
- if (toolCalls) {
- trace.response.toolCalls = JSON.parse(String(toolCalls));
- }
-}
-
-function extractToolCallData(span: Span, trace: SpotlightAITrace) {
- if (!span.data) return;
-
- const toolName = span.data[GEN_AI_TOOL_NAME_FIELD];
- if (!toolName) return;
-
- const toolCallId = span.data[GEN_AI_TOOL_CALL_ID_FIELD];
- const toolCall: Partial = {
- toolCallId: toolCallId ? String(toolCallId) : span.span_id,
- toolName: String(toolName),
- args: {} as Record,
- };
-
- const toolInput = span.data[GEN_AI_TOOL_INPUT_FIELD];
- if (toolInput) {
- try {
- toolCall.args = typeof toolInput === "string" ? JSON.parse(toolInput) : (toolInput as Record);
- } catch {
- toolCall.args = { input: toolInput };
- }
- }
-
- const toolOutput = span.data[GEN_AI_TOOL_OUTPUT_FIELD];
- if (toolOutput) {
- try {
- toolCall.result = typeof toolOutput === "string" ? JSON.parse(toolOutput) : toolOutput;
- } catch {
- toolCall.result = String(toolOutput);
- }
- }
-
- trace.toolCalls.push(toolCall as AIToolCall);
-}
+export * from "../../../../../../telemetry/ai/vercelAISDK.ts";
diff --git a/packages/spotlight/src/ui/telemetry/components/insights/webVitals/WebVitalsDetail.tsx b/packages/spotlight/src/ui/telemetry/components/insights/webVitals/WebVitalsDetail.tsx
index 759c2ca63..1a6e5abc5 100644
--- a/packages/spotlight/src/ui/telemetry/components/insights/webVitals/WebVitalsDetail.tsx
+++ b/packages/spotlight/src/ui/telemetry/components/insights/webVitals/WebVitalsDetail.tsx
@@ -1,14 +1,9 @@
-import { PERFORMANCE_SCORE_PROFILES } from "@spotlight/ui/telemetry/constants";
import { useSentryEvents } from "@spotlight/ui/telemetry/data/useSentryEvents";
-import type {
- MetricScoreProps,
- MetricWeightsProps,
- SentryEventWithPerformanceData,
-} from "@spotlight/ui/telemetry/types";
+import type { MetricScoreProps, MetricWeightsProps } from "@spotlight/ui/telemetry/types";
import { getFormattedDuration } from "@spotlight/ui/telemetry/utils/duration";
import Breadcrumbs from "@spotlight/ui/ui/breadcrumbs";
import { useParams } from "react-router-dom";
-import { normalizePerformanceScore } from "../../../utils/webVitals";
+import { getWebVitals } from "../../../../../telemetry/selectors/webVitals.ts";
import EmptyState from "../../shared/EmptyState";
import PerformanceChart from "./PerformanceChart";
@@ -16,17 +11,7 @@ const WebVitalsDetail = () => {
const events = useSentryEvents();
const { page } = useParams();
- let measurementEvent: SentryEventWithPerformanceData | undefined;
- for (const event of events) {
- if (event.event_id === page && event.measurements && event?.contexts?.trace?.op === "pageload") {
- const updatedEvent = { ...event };
- normalizePerformanceScore(updatedEvent, PERFORMANCE_SCORE_PROFILES);
- if (updatedEvent.measurements["score.total"] != null) {
- measurementEvent = updatedEvent as unknown as SentryEventWithPerformanceData;
- break;
- }
- }
- }
+ const measurementEvent = getWebVitals(events).find(event => event.event_id === page);
if (page && measurementEvent) {
const metricScore: MetricScoreProps = {
diff --git a/packages/spotlight/src/ui/telemetry/components/insights/webVitals/index.tsx b/packages/spotlight/src/ui/telemetry/components/insights/webVitals/index.tsx
index 0f7a9ae1d..84c6a6d98 100644
--- a/packages/spotlight/src/ui/telemetry/components/insights/webVitals/index.tsx
+++ b/packages/spotlight/src/ui/telemetry/components/insights/webVitals/index.tsx
@@ -1,11 +1,7 @@
import { ReactComponent as Sort } from "@spotlight/ui/assets/sort.svg";
import { ReactComponent as SortDown } from "@spotlight/ui/assets/sortDown.svg";
import { cn } from "@spotlight/ui/lib/cn";
-import {
- PERFORMANCE_SCORE_PROFILES,
- WEB_VITALS_HEADERS,
- WEB_VITALS_SORT_KEYS,
-} from "@spotlight/ui/telemetry/constants";
+import { WEB_VITALS_HEADERS, WEB_VITALS_SORT_KEYS } from "@spotlight/ui/telemetry/constants";
import { useSentryEvents } from "@spotlight/ui/telemetry/data/useSentryEvents";
import useSort from "@spotlight/ui/telemetry/hooks/useSort";
import type { SentryEventWithPerformanceData } from "@spotlight/ui/telemetry/types";
@@ -13,7 +9,7 @@ import { getFormattedDuration } from "@spotlight/ui/telemetry/utils/duration";
import Table from "@spotlight/ui/ui/table";
import { type KeyboardEvent, useMemo } from "react";
import { useNavigate } from "react-router-dom";
-import { normalizePerformanceScore } from "../../../utils/webVitals";
+import { getWebVitals } from "../../../../../telemetry/selectors/webVitals.ts";
import EmptyState from "../../shared/EmptyState";
type SentryEventComparator = (a: SentryEventWithPerformanceData, b: SentryEventWithPerformanceData) => number;
@@ -40,25 +36,7 @@ const WebVitals = () => {
const measurementEvents: SentryEventWithPerformanceData[] = useMemo(() => {
const compareEvents = COMPARATORS[sort.active] || COMPARATORS[WEB_VITALS_SORT_KEYS.score];
- return (
- events
- // TODO: Skipping this check because of not getting all required metrics
- // && !PERFORMANCE_SCORE_PROFILES.profiles[0].scoreComponents.some(c => {
- // return (
- // !Object.prototype.hasOwnProperty.call(event.measurements, c.measurement) &&
- // Math.abs(c.weight) >= Number.EPSILON &&
- // !c.optional
- // );
- // })
- .filter(event => event.measurements && event?.contexts?.trace?.op === "pageload")
- .map(event => {
- const updatedEvent = { ...event };
- normalizePerformanceScore(updatedEvent, PERFORMANCE_SCORE_PROFILES);
- return updatedEvent as unknown as SentryEventWithPerformanceData;
- })
- .filter(event => event.measurements["score.total"] != null)
- .sort((a, b) => (sort.asc ? compareEvents(a, b) : compareEvents(b, a)))
- );
+ return getWebVitals(events).sort((a, b) => (sort.asc ? compareEvents(a, b) : compareEvents(b, a)));
}, [events, sort]);
const handleRowClick = (measurementEvent: SentryEventWithPerformanceData) => {
diff --git a/packages/spotlight/src/ui/telemetry/constants.ts b/packages/spotlight/src/ui/telemetry/constants.ts
index cc91afb08..0113ba8e1 100644
--- a/packages/spotlight/src/ui/telemetry/constants.ts
+++ b/packages/spotlight/src/ui/telemetry/constants.ts
@@ -3,7 +3,7 @@ import type { NanovisTreeNode } from "./types";
/** Base path the telemetry UI is mounted under (see `App.tsx` `/telemetry/*`). */
export const TELEMETRY_BASE_URL = "/telemetry";
-export const DB_SPAN_REGEX = /^db(?:\.[A-Za-z]+)*$/;
+export { DB_SPAN_REGEX } from "../../telemetry/selectors/database.ts";
export const AGGREGATE_CALL_PROFILES_SORT_KEYS = {
functionName: "FUNCTION_NAME",
@@ -260,66 +260,7 @@ export const WEB_VITALS_HEADERS = [
export type WebVitals = "lcp" | "fcp" | "cls" | "ttfb" | "fid";
-export const PERFORMANCE_SCORE_PROFILES = {
- profiles: [
- {
- name: "Chrome",
- scoreComponents: [
- { measurement: "fcp", weight: 0.15, p10: 900.0, p50: 1600.0, optional: false },
- { measurement: "lcp", weight: 0.3, p10: 1200.0, p50: 2400.0, optional: false },
- { measurement: "fid", weight: 0.3, p10: 100.0, p50: 300.0, optional: true },
- { measurement: "cls", weight: 0.15, p10: 0.1, p50: 0.25, optional: false },
- { measurement: "ttfb", weight: 0.1, p10: 200.0, p50: 400.0, optional: false },
- ],
- condition: { op: "eq", name: "event.contexts.browser.name", value: "Chrome" },
- },
- // TODO: Currently not getting browser data in events, so made these comments and sticked to chrome always.
- // {
- // "name": "Firefox",
- // "scoreComponents": [
- // {"measurement": "fcp", "weight": 0.15, "p10": 900.0, "p50": 1600.0, "optional": false},
- // {"measurement": "lcp", "weight": 0.0, "p10": 1200.0, "p50": 2400.0, "optional": false},
- // {"measurement": "fid", "weight": 0.30, "p10": 100.0, "p50": 300.0, "optional": true},
- // {"measurement": "cls", "weight": 0.0, "p10": 0.1, "p50": 0.25, "optional": false},
- // {"measurement": "ttfb", "weight": 0.10, "p10": 200.0, "p50": 400.0, "optional": false}
- // ],
- // "condition": {"op": "eq", "name": "event.contexts.browser.name", "value": "Firefox"}
- // },
- // {
- // "name": "Safari",
- // "scoreComponents": [
- // {"measurement": "fcp", "weight": 0.15, "p10": 900.0, "p50": 1600.0, "optional": false},
- // {"measurement": "lcp", "weight": 0.0, "p10": 1200.0, "p50": 2400.0, "optional": false},
- // {"measurement": "fid", "weight": 0.0, "p10": 100.0, "p50": 300.0, "optional": true},
- // {"measurement": "cls", "weight": 0.0, "p10": 0.1, "p50": 0.25, "optional": false},
- // {"measurement": "ttfb", "weight": 0.10, "p10": 200.0, "p50": 400.0, "optional": false}
- // ],
- // "condition": {"op": "eq", "name": "event.contexts.browser.name", "value": "Safari"}
- // },
- // {
- // "name": "Edge",
- // "scoreComponents": [
- // {"measurement": "fcp", "weight": 0.15, "p10": 900.0, "p50": 1600.0, "optional": false},
- // {"measurement": "lcp", "weight": 0.30, "p10": 1200.0, "p50": 2400.0, "optional": false},
- // {"measurement": "fid", "weight": 0.30, "p10": 100.0, "p50": 300.0, "optional": true},
- // {"measurement": "cls", "weight": 0.15, "p10": 0.1, "p50": 0.25, "optional": false},
- // {"measurement": "ttfb", "weight": 0.10, "p10": 200.0, "p50": 400.0, "optional": false}
- // ],
- // "condition": {"op": "eq", "name": "event.contexts.browser.name", "value": "Edge"}
- // },
- // {
- // "name": "Opera",
- // "scoreComponents": [
- // {"measurement": "fcp", "weight": 0.15, "p10": 900.0, "p50": 1600.0, "optional": false},
- // {"measurement": "lcp", "weight": 0.30, "p10": 1200.0, "p50": 2400.0, "optional": false},
- // {"measurement": "fid", "weight": 0.30, "p10": 100.0, "p50": 300.0, "optional": true},
- // {"measurement": "cls", "weight": 0.15, "p10": 0.1, "p50": 0.25, "optional": false},
- // {"measurement": "ttfb", "weight": 0.10, "p10": 200.0, "p50": 400.0, "optional": false}
- // ],
- // "condition": {"op": "eq", "name": "event.contexts.browser.name", "value": "Opera"}
- // }
- ],
-};
+export { PERFORMANCE_SCORE_PROFILES } from "../../telemetry/constants/performance.ts";
export const LOG_LEVEL_COLORS: Record = {
trace: "text-gray-500",
diff --git a/packages/spotlight/src/ui/telemetry/constants/sentry.ts b/packages/spotlight/src/ui/telemetry/constants/sentry.ts
index c7ee6224c..0c9b14b56 100644
--- a/packages/spotlight/src/ui/telemetry/constants/sentry.ts
+++ b/packages/spotlight/src/ui/telemetry/constants/sentry.ts
@@ -1,13 +1 @@
-export const ERROR_EVENT_TYPES = new Set(["event", "error"]);
-export const TRACE_EVENT_TYPES = new Set(["transaction"]);
-export const PROFILE_EVENT_TYPES = new Set(["profile", "profile_chunk"]);
-export const LOG_EVENT_TYPES = new Set(["log"]);
-export const FEEDBACK_EVENT_TYPES = new Set(["feedback"]);
-export const ATTACHMENT_EVENT_TYPES = new Set(["attachment"]);
-export const SUPPORTED_EVENT_TYPES = new Set([
- ...ERROR_EVENT_TYPES,
- ...TRACE_EVENT_TYPES,
- ...PROFILE_EVENT_TYPES,
- ...LOG_EVENT_TYPES,
- ...FEEDBACK_EVENT_TYPES,
-]);
+export * from "../../../telemetry/constants/sentry.ts";
diff --git a/packages/spotlight/src/ui/telemetry/data/profiles.ts b/packages/spotlight/src/ui/telemetry/data/profiles.ts
index acab376e4..8475b23a5 100644
--- a/packages/spotlight/src/ui/telemetry/data/profiles.ts
+++ b/packages/spotlight/src/ui/telemetry/data/profiles.ts
@@ -1,206 +1 @@
-import { log } from "@spotlight/ui/lib/logger";
-import { generateUuidv4 } from "@spotlight/ui/lib/uuid";
-import type { SentryProfileWithTraceMeta } from "../store/types";
-import type { Span, Trace } from "../types";
-import { getFunctionNameFromFrame } from "../utils/profileUtils";
-import { compareSpans } from "../utils/traces";
-
-/**
- * Groups consequent spans with the same description and op into a single span per each level.
- * Essentially a BFS traversal of the spans tree.
- * @param spans Span[] A list of spans to consolidate, sorted by their start_timestamp
- * @returns Span[] A list of spans with the same description and op consolidated into a single span
- */
-function consolidateSpans(trace: Trace, spans: Span[]): Span[] {
- const consolidatedSpans: Span[] = [];
- let lastSpan = spans[0];
- let spanIdx = 1;
- while (spanIdx < spans.length + 1) {
- const span = spans[spanIdx];
- spanIdx += 1;
- if (span && span.description === lastSpan.description && span.op === lastSpan.op) {
- // Require the spans are sorted by start_timestamp
- lastSpan.timestamp = span.timestamp;
- if (span.children) {
- if (lastSpan.children) {
- for (const child of span.children) {
- lastSpan.children.push(child);
- }
- lastSpan.children.sort(compareSpans);
- } else {
- lastSpan.children = span.children;
- }
- }
- } else {
- // Discard very short spans
- if (lastSpan.timestamp - lastSpan.start_timestamp > 0) {
- if (lastSpan.children) {
- lastSpan.children = consolidateSpans(trace, lastSpan.children);
- }
- consolidatedSpans.push(lastSpan);
- trace.spans.set(lastSpan.span_id, lastSpan);
- }
- lastSpan = span;
- }
- }
-
- return consolidatedSpans;
-}
-
-// This is done per platform right now but we may want to make it use
-// SDK or something more specific, especially for JS as `javascript` may
-// mean browser, node, etc.
-const SENTRY_FRAME_FILTER_PER_PLATFORM: Record<
- string,
- (this: SentryProfileWithTraceMeta["frames"], frameIdx: number) => boolean | undefined
-> = {
- python: function (frameIdx) {
- return this[frameIdx].module?.startsWith("sentry_sdk.");
- },
- javascript: function (frameIdx) {
- const frame = this[frameIdx];
- const module = frame.module;
- if (module) {
- return module.startsWith("@sentry") || module.startsWith("@opentelemetry.instrumentation");
- }
- // This one below is to match things like `http://localhost:3000/node_modules/.vite/deps/@sentry_react.js?v=6942e78f` etc.
- return frame.abs_path ? /\/node_modules\/.*\/@(sentry|opentelemetry)[^a-z0-9]/.test(frame.abs_path) : false;
- },
-};
-
-export function getSpansFromProfile(
- trace: Trace,
- profile: SentryProfileWithTraceMeta,
- parent_span_id: string | undefined,
- startTs: number,
- endTs: number,
- threadIds: Set,
-): Span[] {
- threadIds.add(profile.active_thread_id);
-
- const sentryFrameFilter = profile.platform && SENTRY_FRAME_FILTER_PER_PLATFORM[profile.platform];
- // Try to fill in the gaps from profile data
- const fillerSpans: Span[] = [];
- for (let sampleIdx = 0; sampleIdx < profile.samples.length; sampleIdx++) {
- const sample = profile.samples[sampleIdx];
- if (sample.thread_id && !threadIds.has(sample.thread_id)) {
- continue;
- }
- const sampleTs = sample.start_timestamp;
- if (sampleTs < startTs || sampleTs > endTs) {
- continue;
- }
- const nextSample = profile.samples[sampleIdx + 1];
- const timestamp = nextSample ? nextSample.start_timestamp : endTs;
-
- if (timestamp > endTs) {
- continue;
- }
- const commonAttributes = {
- start_timestamp: sampleTs,
- timestamp,
- trace_id: trace.trace_id,
- status: "ok",
- tags: { source: "profile" },
- data: {
- "thread.id": sample.thread_id,
- "thread.name": profile.thread_metadata?.[sample.thread_id as keyof typeof profile.thread_metadata]?.name,
- },
- };
- const sampleSpan: Span = {
- span_id: generateUuidv4(),
- parent_span_id,
- ...commonAttributes,
- op: "Thread",
- description:
- profile.thread_metadata?.[sample.thread_id as keyof typeof profile.thread_metadata]?.name ||
- `Thread ${sample.thread_id}`,
- data: {
- thread_id: sample.thread_id,
- },
- };
- let currentSpan = sampleSpan;
- const currentStack = profile.stacks[sample.stack_id];
- const lastSentryFrameIdx = sentryFrameFilter ? currentStack.findLastIndex(sentryFrameFilter, profile.frames) : 0;
- for (let frameIdxIdx = lastSentryFrameIdx + 1; frameIdxIdx < currentStack.length; frameIdxIdx++) {
- const frame = profile.frames[currentStack[frameIdxIdx]];
- // XXX: We may wanna skip frames that doesn't have `in_app` set to true
- // that said it's better to have this as a dynamic filter
- const [description, op] = getFunctionNameFromFrame(frame).split("@");
- const spanFromFrame: Span = {
- span_id: generateUuidv4(),
- parent_span_id: currentSpan.span_id,
- ...commonAttributes,
- op,
- description,
- data: {
- ...frame,
- },
- };
- currentSpan.children = [spanFromFrame];
- currentSpan = spanFromFrame;
- }
- fillerSpans.push(sampleSpan);
- }
-
- if (!fillerSpans.length) {
- return [];
- }
- const consolidated = consolidateSpans(trace, fillerSpans);
- // Remove the extra layer of nesting if there is only one span which should be the "Thread" span
- return (consolidated.length === 1 ? consolidated[0].children || [] : consolidated).filter(
- span => span.timestamp - span.start_timestamp > 0 && span.timestamp <= endTs,
- );
-}
-
-/**
- * Modifies the spanTree in place recursively by adding spans from the
- * profile data where there are gaps in the trace data.
- * @param spanTree Span[] The tree of spans to graft profile spans into
- */
-export function graftProfileSpans(
- trace: Trace,
- profile: SentryProfileWithTraceMeta,
- spanTree: Span[] = trace.spanTree,
- parent: Span | Trace = trace,
-) {
- log(`Grafting profile spans into trace ${trace.trace_id}`);
- if (trace.profileGrafted) {
- log(`Trace already has profile grafted ${trace.trace_id}`);
- return;
- }
-
- let idx = -1;
- while (idx < spanTree.length) {
- const span = spanTree[idx] as Span | undefined;
- if (span?.tags?.source === "profile") {
- idx += 1;
- continue;
- }
- const nextSpan = spanTree[idx + 1];
- if (nextSpan?.tags?.source === "profile") {
- idx += 1;
- continue;
- }
-
- const startTs = span ? span.timestamp : parent.start_timestamp;
- const endTs = nextSpan ? nextSpan.start_timestamp : parent.timestamp;
- const threadIds = new Set([span?.data?.threadId, nextSpan?.data?.threadId, parent?.data?.threadId]);
- threadIds.delete(undefined);
- if (endTs - startTs > 0) {
- const fillers = getSpansFromProfile(trace, profile, parent.span_id, startTs, endTs, threadIds as Set);
- if (fillers.length) {
- spanTree.splice(idx + 1, 0, ...fillers);
- idx += fillers.length;
- }
- }
- if (span) {
- span.children ??= [];
- graftProfileSpans(trace, profile, span.children, span);
- }
- idx += 1;
- }
- // Only mark as grafted at the top level to avoid early quitting during
- // recursive calls above for child spans
- trace.profileGrafted = trace.spanTree === spanTree;
-}
+export * from "../../../telemetry/data/profiles.ts";
diff --git a/packages/spotlight/src/ui/telemetry/data/sentryEventsContext.test.tsx b/packages/spotlight/src/ui/telemetry/data/sentryEventsContext.test.tsx
new file mode 100644
index 000000000..5fa56be55
--- /dev/null
+++ b/packages/spotlight/src/ui/telemetry/data/sentryEventsContext.test.tsx
@@ -0,0 +1,53 @@
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { useContext } from "react";
+import { afterEach, expect, test } from "vitest";
+import useSentryStore from "../store";
+import { SentryEventsContext, SentryEventsContextProvider } from "./sentryEventsContext";
+
+function Probe() {
+ const { events } = useContext(SentryEventsContext);
+ return ;
+}
+afterEach(() => {
+ cleanup();
+ useSentryStore.getState().resetData();
+});
+
+test("reset removes captured events from the React context", async () => {
+ useSentryStore.getState().resetData();
+ render(
+
+
+ ,
+ );
+ await act(async () => {
+ await useSentryStore.getState().ingestEnvelope([{}, [[{ type: "event" }, { event_id: "captured", timestamp: 1 }]]]);
+ });
+ expect(screen.getByTestId("event-count").textContent).toBe("1");
+ act(() => useSentryStore.getState().resetData());
+ expect(screen.getByTestId("event-count").textContent).toBe("0");
+});
+
+test("raw-only envelope eviction releases old events held by the React context", async () => {
+ useSentryStore.getState().resetData();
+ await useSentryStore
+ .getState()
+ .ingestEnvelope([
+ { __spotlight_envelope_id: "old" },
+ [[{ type: "event" }, { event_id: "captured", timestamp: 1 }]],
+ ]);
+ render(
+
+
+ ,
+ );
+ expect(screen.getByTestId("event-count").textContent).toBe("1");
+ await act(async () => {
+ for (let index = 0; index < 500; index++)
+ await useSentryStore
+ .getState()
+ .ingestEnvelope([{ __spotlight_envelope_id: `raw-${index}` }, [[{ type: "unknown" }, {}]]]);
+ });
+ expect(useSentryStore.getState().getEvents()).toEqual([]);
+ expect(screen.getByTestId("event-count").textContent).toBe("0");
+});
diff --git a/packages/spotlight/src/ui/telemetry/data/sentryEventsContext.tsx b/packages/spotlight/src/ui/telemetry/data/sentryEventsContext.tsx
index 0a0bbe9ae..7a4109520 100644
--- a/packages/spotlight/src/ui/telemetry/data/sentryEventsContext.tsx
+++ b/packages/spotlight/src/ui/telemetry/data/sentryEventsContext.tsx
@@ -1,56 +1,12 @@
-import type { ReactNode } from "react";
-import React, { useEffect, useReducer } from "react";
+import { type ReactNode, createContext, useMemo } from "react";
import useSentryStore from "../store";
import type { SentryEvent } from "../types";
-interface SetEventsAction {
- e: SentryEvent | SentryEvent[];
- action: string;
-}
-
-interface SentryEventsContextProps {
- events: SentryEvent[];
- setEvents: React.Dispatch;
-}
-
-export const SentryEventsContext = React.createContext({
- events: [],
- setEvents: () => {},
-});
-
-function eventReducer(state: SentryEvent[], message: SetEventsAction): SentryEvent[] {
- if (Array.isArray(message.e)) {
- if (message.action === "RESET") {
- return message.e;
- }
- } else {
- if (message.action === "APPEND") {
- return [message.e, ...state];
- }
- }
+export const SentryEventsContext = createContext<{ events: SentryEvent[] }>({ events: [] });
- return state;
+/** Context mirrors committed SDK state so reset/retention release old event references. */
+export function SentryEventsContextProvider({ children }: { children: ReactNode }) {
+ const state = useSentryStore();
+ const value = useMemo(() => ({ events: Array.from(state.eventsById.values()) }), [state]);
+ return {children};
}
-
-export const SentryEventsContextProvider: React.FC<{
- children: ReactNode;
-}> = ({ children }) => {
- const getEvents = useSentryStore(state => state.getEvents);
- const subscribe = useSentryStore(state => state.subscribe);
- const [events, setEvents] = useReducer(eventReducer, getEvents());
-
- useEffect(
- () =>
- subscribe("event", (e: SentryEvent) => {
- setEvents({ action: "APPEND", e });
- }) as () => undefined,
- [subscribe],
- );
-
- const contextValue: SentryEventsContextProps = {
- events,
- setEvents,
- };
-
- return {children};
-};
diff --git a/packages/spotlight/src/ui/telemetry/data/useSentrySpans.ts b/packages/spotlight/src/ui/telemetry/data/useSentrySpans.ts
index cb22e11fb..b5a82de02 100644
--- a/packages/spotlight/src/ui/telemetry/data/useSentrySpans.ts
+++ b/packages/spotlight/src/ui/telemetry/data/useSentrySpans.ts
@@ -1,6 +1,6 @@
import { useContext } from "react";
+import { getSpans } from "../../../telemetry/selectors/spans.ts";
import useSentryStore from "../store";
-import type { Span, Trace } from "../types";
import { SentryEventsContext } from "./sentryEventsContext";
export function useSentryTraces() {
@@ -9,27 +9,15 @@ export function useSentryTraces() {
return getTraces().sort((a, b) => b.start_timestamp - a.start_timestamp);
}
-function spanReducer(acc: Span[], trace: Trace) {
- for (const span of trace.spans.values()) {
- acc.push(span);
- }
- return acc;
-}
-
-function spanCountReducer(sum: number, trace: Trace) {
- return sum + trace.spans.size;
-}
-
export const useSentrySpans = () => {
const allTraces = useSentryTraces();
- const allSpans: Span[] = allTraces.reduce(spanReducer, []);
- return allSpans;
+ return getSpans(allTraces);
};
export const useSentrySpanCounts = () => {
- const allTraces = useSentryTraces();
+ const spans = useSentrySpans();
return {
- allSpans: allTraces.reduce(spanCountReducer, 0),
+ allSpans: spans.length,
};
};
diff --git a/packages/spotlight/src/ui/telemetry/data/useSpotlightAITraces.ts b/packages/spotlight/src/ui/telemetry/data/useSpotlightAITraces.ts
index 5436cb301..76dc5c236 100644
--- a/packages/spotlight/src/ui/telemetry/data/useSpotlightAITraces.ts
+++ b/packages/spotlight/src/ui/telemetry/data/useSpotlightAITraces.ts
@@ -1,70 +1,13 @@
import { useMemo } from "react";
-import { aiLibraries, extractAllAIRootSpans } from "../components/insights/aiTraces/sdks/aiLibraries";
+import { getAIRootSpans, getAITraces } from "../../../telemetry/selectors/ai.ts";
import type { Span, SpotlightAITrace } from "../types";
import { useSentryTraces } from "./useSentrySpans";
export function useAITraces(): Span[] {
- const allTraces = useSentryTraces();
-
- return useMemo(() => {
- const rootSpans: Span[] = [];
-
- for (const trace of allTraces) {
- if (!trace.spanTree) continue;
-
- for (const { span } of extractAllAIRootSpans(trace.spanTree)) {
- rootSpans.push(span);
- }
- }
-
- return rootSpans;
- }, [allTraces]);
-}
-
-function processSpanAsTrace(span: Span): SpotlightAITrace {
- if (!span?.span_id) {
- return {
- id: "error-invalid-span",
- name: "Invalid Span",
- operation: "error",
- timestamp: 0,
- durationMs: 0,
- tokensDisplay: "N/A",
- hasToolCall: false,
- rawSpan: {} as Span,
- metadata: {
- metadata: {},
- },
- toolCalls: [],
- };
- }
-
- for (const framework of aiLibraries) {
- if (framework.canHandleSpan(span)) {
- return framework.processTrace(span);
- }
- }
-
- return {
- id: span.span_id,
- name: span.description || span.op || "Unknown AI Interaction",
- operation: "unknown",
- timestamp: span.start_timestamp || 0,
- durationMs: (span.timestamp || 0) - (span.start_timestamp || 0),
- tokensDisplay: "N/A",
- hasToolCall: false,
- rawSpan: span,
- metadata: {
- metadata: {},
- },
- toolCalls: [],
- };
+ const traces = useSentryTraces();
+ return useMemo(() => getAIRootSpans(traces), [traces]);
}
-
export function useSpotlightAITraces(): SpotlightAITrace[] {
- const aiRootSpans = useAITraces();
-
- return useMemo(() => {
- return aiRootSpans.map(processSpanAsTrace);
- }, [aiRootSpans]);
+ const traces = useSentryTraces();
+ return useMemo(() => getAITraces(traces), [traces]);
}
diff --git a/packages/spotlight/src/ui/telemetry/hooks/useErrorFiltering.test.tsx b/packages/spotlight/src/ui/telemetry/hooks/useErrorFiltering.test.tsx
index 4fb0a6d5d..3b2c8c26c 100644
--- a/packages/spotlight/src/ui/telemetry/hooks/useErrorFiltering.test.tsx
+++ b/packages/spotlight/src/ui/telemetry/hooks/useErrorFiltering.test.tsx
@@ -3,7 +3,9 @@ import { describe, expect, it } from "vitest";
import type { SentryErrorEvent } from "../types";
import useErrorFiltering from "./useErrorFiltering";
-function makeError(overrides: Partial & { type: string; value: string }): SentryErrorEvent {
+function makeError(
+ overrides: Partial> & { type: string; value: string },
+): SentryErrorEvent {
const { type, value, ...rest } = overrides;
return {
event_id: `${type}-${value}`,
diff --git a/packages/spotlight/src/ui/telemetry/index.tsx b/packages/spotlight/src/ui/telemetry/index.tsx
index 3f65e9b9d..23117b223 100644
--- a/packages/spotlight/src/ui/telemetry/index.tsx
+++ b/packages/spotlight/src/ui/telemetry/index.tsx
@@ -18,7 +18,7 @@ export function Telemetry({ sidecarUrl }: TelemetryRouteProps) {
const listener = useCallback((event: string): void => {
log(`Received new ${SENTRY_CONTENT_TYPE} event`);
const envelope = typeof event === "string" ? JSON.parse(event) : event;
- useSentryStore.getState().pushEnvelope(envelope);
+ void useSentryStore.getState().ingestEnvelope(envelope);
}, []);
const contentTypeListeners = useMemo(() => {
diff --git a/packages/spotlight/src/ui/telemetry/store/contextLines.test.ts b/packages/spotlight/src/ui/telemetry/store/contextLines.test.ts
new file mode 100644
index 000000000..627ed5d4e
--- /dev/null
+++ b/packages/spotlight/src/ui/telemetry/store/contextLines.test.ts
@@ -0,0 +1,103 @@
+import { afterEach, expect, test, vi } from "vitest";
+
+const { fetchContext } = vi.hoisted(() => ({ fetchContext: vi.fn() }));
+vi.mock("../utils/fetch", () => ({ getNativeFetchImplementation: () => fetchContext }));
+
+import useSentryStore from "./store";
+
+let releaseRequest: (() => void) | undefined;
+afterEach(() => {
+ releaseRequest?.();
+ releaseRequest = undefined;
+ useSentryStore.getState().resetData();
+ fetchContext.mockReset();
+ vi.useRealTimers();
+});
+
+test("a stalled context-lines request times out and releases later telemetry", async () => {
+ vi.useFakeTimers();
+ useSentryStore.getState().resetData();
+ let requestSignal: AbortSignal | undefined;
+ fetchContext.mockImplementation((_url: string, options: RequestInit) => {
+ requestSignal = options.signal ?? undefined;
+ return new Promise((_resolve, reject) => {
+ releaseRequest = () => reject(new Error("request released"));
+ requestSignal?.addEventListener("abort", () => reject(requestSignal?.reason), { once: true });
+ });
+ });
+ const captured = useSentryStore.getState().ingestEnvelope([
+ {},
+ [
+ [
+ { type: "event" },
+ {
+ event_id: "stalled-error",
+ timestamp: 1,
+ exception: { values: [{ type: "Error", value: "oops", stacktrace: { frames: [{ filename: "app.ts" }] } }] },
+ },
+ ],
+ ],
+ ]);
+ const later = useSentryStore
+ .getState()
+ .ingestEnvelope([
+ {},
+ [[{ type: "log" }, { items: [{ id: "later-log", body: "next", timestamp: 2, attributes: {} }] }]],
+ ]);
+ await vi.advanceTimersByTimeAsync(0);
+ expect(fetchContext).toHaveBeenCalledTimes(1);
+ expect(useSentryStore.getState().getLogs()).toEqual([]);
+ await vi.advanceTimersByTimeAsync(5000);
+ expect(requestSignal?.aborted).toBe(true);
+ await expect(captured).resolves.toMatchObject({ status: "processed" });
+ await expect(later).resolves.toMatchObject({ status: "processed" });
+ expect(useSentryStore.getState().getEventById("stalled-error")).toBeDefined();
+ expect(
+ useSentryStore
+ .getState()
+ .getLogs()
+ .map(log => log.body),
+ ).toEqual(["next"]);
+});
+
+test("a failed exception context request still waits for successful sibling context", async () => {
+ useSentryStore.getState().resetData();
+ let finishContext!: (response: unknown) => void;
+ fetchContext.mockRejectedValueOnce(new Error("context unavailable")).mockImplementationOnce(
+ () =>
+ new Promise(resolve => {
+ finishContext = resolve;
+ releaseRequest = () => resolve({ status: 503 });
+ }),
+ );
+ const captured = useSentryStore.getState().ingestEnvelope([
+ {},
+ [
+ [
+ { type: "event" },
+ {
+ event_id: "multiple-errors",
+ timestamp: 1,
+ exception: {
+ values: [
+ { type: "Error", value: "first", stacktrace: { frames: [{ filename: "first.ts" }] } },
+ { type: "Error", value: "second", stacktrace: { frames: [{ filename: "second.ts" }] } },
+ ],
+ },
+ },
+ ],
+ ],
+ ]);
+ await vi.waitFor(() => expect(fetchContext).toHaveBeenCalledTimes(2));
+ // The optional failure must not make the sibling's successful enrichment arrive after commit.
+ await new Promise(resolve => setTimeout(resolve, 0));
+ expect(useSentryStore.getState().getEventById("multiple-errors")).toBeUndefined();
+ finishContext({
+ status: 200,
+ json: async () => ({ frames: [{ filename: "second.ts", context_line: "throw error;" }] }),
+ });
+ await expect(captured).resolves.toMatchObject({ status: "processed" });
+ expect(useSentryStore.getState().getEventById("multiple-errors")).toMatchObject({
+ exception: { values: [{ value: "first" }, { stacktrace: { frames: [{ context_line: "throw error;" }] } }] },
+ });
+});
diff --git a/packages/spotlight/src/ui/telemetry/store/helpers.ts b/packages/spotlight/src/ui/telemetry/store/helpers.ts
index 3abd5c9ce..00ffd8f7d 100644
--- a/packages/spotlight/src/ui/telemetry/store/helpers.ts
+++ b/packages/spotlight/src/ui/telemetry/store/helpers.ts
@@ -1,6 +1 @@
-import type { Span } from "../types";
-
-export function getAllSpansInTree(root: Span): Span[] {
- const spans = [root];
- return root.children ? spans.concat(root.children.flatMap(getAllSpansInTree)) : spans;
-}
+export * from "../../../telemetry/store/helpers.ts";
diff --git a/packages/spotlight/src/ui/telemetry/store/slices/envelopesSlice.ts b/packages/spotlight/src/ui/telemetry/store/slices/envelopesSlice.ts
index a1773cdb9..0fbf11b15 100644
--- a/packages/spotlight/src/ui/telemetry/store/slices/envelopesSlice.ts
+++ b/packages/spotlight/src/ui/telemetry/store/slices/envelopesSlice.ts
@@ -1,131 +1 @@
-import type { Envelope } from "@sentry/core";
-import { RAW_TYPES } from "@spotlight/shared/constants.ts";
-import type { StateCreator } from "zustand";
-import { ATTACHMENT_EVENT_TYPES, SUPPORTED_EVENT_TYPES } from "../../constants/sentry";
-import type { EventAttachment, Sdk, SentryEvent } from "../../types";
-import { sdkToPlatform } from "../../utils/sdkToPlatform";
-import type { EnvelopesSliceActions, EnvelopesSliceState, SentryStore } from "../types";
-import { normalizeSpanItem } from "../utils/spanProcessor";
-
-const initialEnvelopesState: EnvelopesSliceState = {
- envelopes: new Map(),
-};
-
-export const createEnvelopesSlice: StateCreator