test(nextjs): Add tests for low-cardinality span names for cache spans

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/tests/useCacheSpans.spec.ts

@@ -0,0 +1,33 @@
+import { expect, test } from '@playwright/test';
+import { collectStreamedSpans, getSpanOp } from '@sentry-internal/test-utils';
+import { findCacheSpan } from './cacheOriginLinks-utils';
+
+test('uses low-cardinality names for `use cache` spans', async ({ request }) => {
+  // A fresh id makes the request a guaranteed cache miss (the id is part of the cache key), so the
+  // trace contains both a `cache.get` and a `cache.put` span.
+  const id = crypto.randomUUID();
+
+  const spansPromise = collectStreamedSpans('nextjs-16-streaming-cacheComponents', spansOfTrace => {
+    return (
+      spansOfTrace.some(span => span.name === 'GET /api/use-cache' && span.is_segment) &&
+      spansOfTrace.some(span => getSpanOp(span) === 'cache.get') &&
+      spansOfTrace.some(span => getSpanOp(span) === 'cache.put')
+    );
+  });
+
+  await request.get(`/api/use-cache?id=${id}`);
+  const spans = await spansPromise;
+
+  // With span streaming the span name is the low-cardinality op; the key digest stays on
+  // `cache.key`, where Relay reads the span description from.
+  const getSpan = findCacheSpan(spans, 'cache.get');
+  expect(getSpan).toBeDefined();
+  expect(getSpan!.name).toBe('cache.get');
+  const cacheKeyDigest = getSpan!.attributes['cache.key']?.value;
+  expect(cacheKeyDigest).toEqual([expect.stringMatching(/^[0-9a-f]{12}$/)]);
+
+  const putSpan = findCacheSpan(spans, 'cache.put');
+  expect(putSpan).toBeDefined();
+  expect(putSpan!.name).toBe('cache.put');
+  expect(putSpan!.attributes['cache.key']?.value).toEqual(cacheKeyDigest);
+});

packages/nextjs/test/server/useCacheInstrumentation.test.ts

@@ -8,12 +8,13 @@ const mocks = vi.hoisted(() => {
     startSpan: vi.fn((_options: unknown, callback: (span: unknown) => unknown) => callback({ setAttribute })),
     activeSpan: undefined as object | undefined,
     sampled: true,
+    client: undefined as { getOptions: () => { traceLifecycle?: 'static' | 'stream' } } | undefined,
   };
 });
 
 vi.mock('@sentry/core', async importOriginal => ({
   ...(await importOriginal<typeof SentryCore>()),
-  getClient: () => undefined,
+  getClient: () => mocks.client,
   getActiveSpan: () => mocks.activeSpan,
   spanIsSampled: () => mocks.sampled,
   startSpan: mocks.startSpan,
@@ -53,6 +54,7 @@ describe('instrumentUseCacheHandlers', () => {
   beforeEach(() => {
     mocks.activeSpan = {};
     mocks.sampled = true;
+    mocks.client = undefined;
   });
 
   afterEach(() => {
@@ -280,6 +282,40 @@ describe('instrumentUseCacheHandlers', () => {
     });
   });
 
+  it('names spans with the low-cardinality op when span streaming is enabled', async () => {
+    mocks.client = { getOptions: () => ({ traceLifecycle: 'stream' }) };
+    const handler = installWithDefaultHandler();
+
+    await handler.get('cache-key');
+    await handler.set('cache-key', Promise.resolve({}));
+
+    // The key digest stays on `cache.key`, where Relay reads the span description from.
+    expect(mocks.startSpan).toHaveBeenCalledWith(
+      {
+        op: 'cache.get',
+        name: 'cache.get',
+        attributes: {
+          'sentry.origin': 'auto.cache.nextjs',
+          'cache.key': [expect.stringMatching(/^[0-9a-f]{12}$/)],
+          'cache.operation': 'get',
+        },
+      },
+      expect.any(Function),
+    );
+    expect(mocks.startSpan).toHaveBeenCalledWith(
+      {
+        op: 'cache.put',
+        name: 'cache.put',
+        attributes: {
+          'sentry.origin': 'auto.cache.nextjs',
+          'cache.key': [expect.stringMatching(/^[0-9a-f]{12}$/)],
+          'cache.operation': 'put',
+        },
+      },
+      expect.any(Function),
+    );
+  });
+
   it('creates a `cache.put` span around handler writes', async () => {
     const handler = installWithDefaultHandler();