feat: Start using profile information in span tree (#692)

First phase of #565.

Author: BYK

.changeset/few-points-rush.md

@@ -0,0 +1,17 @@
+---
+'@spotlightjs/tsconfig': major
+'@spotlightjs/spotlight': minor
+'@spotlightjs/electron': minor
+'@spotlightjs/overlay': minor
+'@spotlightjs/astro': minor
+---
+
+# Add profile grafting into traces
+
+With this change, Spotlight can now ingest v1 profiles and graft profiling
+data into the trace view to fill in the gaps where span/trace instrumentation
+falls short.
+
+This feature is experimental.
+
+Breaking change for `tsconfig`: It now targets ES2023 as we needed `Array.findLastIndex()`

.github/workflows/build.yml

@@ -169,6 +169,13 @@ jobs:
 
       - name: Run tests
         run: pnpm test:e2e
+
+      - name: Test results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-results
+          path: e2e-tests/**/test-results/**
   docker:
     name: Docker Image
     needs: build

.gitignore

@@ -14,6 +14,7 @@ dist-bin
 node
 dist-ssr
 *.local
+test-results
 
 .eslintcache
 

.vscode/settings.json

@@ -6,6 +6,7 @@
     "Astro",
     "Astro's",
     "astrojs",
+    "backto",
     "buildx",
     "codesign",
     "contextlines",

demos/astro-playground/astro.config.mjs

@@ -19,6 +19,11 @@ export default defineConfig({
   adapter: node({
     mode: 'standalone',
   }),
+  server: {
+    headers: {
+      'Document-Policy': 'js-profiling',
+    },
+  },
   integrations: [
     svelte({ include: ['**/svelte/*'] }),
     react({ include: ['**/react/*'] }),

demos/astro-playground/sentry.client.config.ts

@@ -2,4 +2,6 @@ import * as Sentry from '@sentry/astro';
 
 Sentry.init({
   debug: true,
+  integrations: [Sentry.browserProfilingIntegration()],
+  profilesSampleRate: 1.0,
 });

packages/overlay/src/integrations/sentry/components/events/EventList.tsx

@@ -16,7 +16,7 @@ export default function EventList({ traceId }: { traceId?: string }) {
   const helpers = useSentryHelpers();
   const context = useSpotlightContext();
 
-  const matchingEvents = events.filter(e => e.type !== 'transaction');
+  const matchingEvents = events.filter(e => e.type !== 'transaction' && e.type !== 'profile');
 
   const [showAll, setShowAll] = useState(!context.experiments['sentry:focus-local-events']);
   const filteredEvents = showAll

packages/overlay/src/integrations/sentry/components/explore/traces/TraceDetails/components/TraceTreeview.tsx

@@ -15,7 +15,7 @@ export default function TraceTreeview({ traceId }: TraceTreeViewProps) {
 
   const [spanNodeWidth, setSpanNodeWidth] = useState<number>(DEFAULT_SPAN_NODE_WIDTH);
 
-  const trace = sentryDataCache.getTraceById(traceId);
+  const trace = sentryDataCache.getTraceById(traceId)!;
   const span = spanId ? sentryDataCache.getSpanById(traceId, spanId) : undefined;
   const startTimestamp = trace.start_timestamp;
   const totalDuration = trace.timestamp - startTimestamp;

packages/overlay/src/integrations/sentry/components/explore/traces/TraceDetails/index.tsx

@@ -35,6 +35,7 @@ export default function TraceDetails() {
   const errorCount = events.filter(
     e =>
       e.type !== 'transaction' &&
+      e.type !== 'profile' &&
       (e.contexts?.trace?.trace_id ? helpers.isLocalToSession(e.contexts?.trace?.trace_id) : null) !== false,
   ).length;
 

packages/overlay/src/integrations/sentry/components/explore/traces/TraceList.tsx

@@ -6,25 +6,25 @@ import TimeSince from '../../../../../components/TimeSince';
 import classNames from '../../../../../lib/classNames';
 import { useSpotlightContext } from '../../../../../lib/useSpotlightContext';
 import { useSentryHelpers } from '../../../data/useSentryHelpers';
-import { useSentryTraces } from '../../../data/useSentryTraces';
+import { useSentryTraces } from '../../../data/useSentrySpans';
 import { getFormattedSpanDuration } from '../../../utils/duration';
 import { truncateId } from '../../../utils/text';
 import HiddenItemsButton from '../../HiddenItemsButton';
 import { TraceRootTxnName } from './TraceDetails/components/TraceRootTxnName';
 import TraceIcon from './TraceIcon';
 
 export default function TraceList() {
-  const traceList = useSentryTraces();
+  const { allTraces, localTraces } = useSentryTraces();
   const helpers = useSentryHelpers();
   const context = useSpotlightContext();
 
   const [showAll, setShowAll] = useState(!context.experiments['sentry:focus-local-events']);
-  const filteredTraces = showAll ? traceList : traceList.filter(t => helpers.isLocalToSession(t.trace_id) !== false);
-  const hiddenItemCount = traceList.length - filteredTraces.length;
+  const filteredTraces = showAll ? allTraces : localTraces;
+  const hiddenItemCount = allTraces.length - filteredTraces.length;
 
   return (
     <>
-      {traceList.length !== 0 ? (
+      {allTraces.length !== 0 ? (
         <CardList>
           {hiddenItemCount > 0 && (
             <HiddenItemsButton