Merge pull request #17848 from getsentry/rolaabuhasna/js-945-expose-ai-integrations-in-browser-sdk

feat(browser): Expose AI instrumentation methods

Author: RulaKhaled

dev-packages/browser-integration-tests/suites/tracing/ai-providers/anthropic/init.js

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  tracesSampleRate: 1,
+  debug: true,
+});

dev-packages/browser-integration-tests/suites/tracing/ai-providers/anthropic/mocks.js

@@ -0,0 +1,55 @@
+// Mock Anthropic client for browser testing
+export class MockAnthropic {
+  constructor(config) {
+    this.apiKey = config.apiKey;
+
+    // Main focus: messages.create functionality
+    this.messages = {
+      create: async (...args) => {
+        const params = args[0];
+        // Simulate processing time
+        await new Promise(resolve => setTimeout(resolve, 10));
+
+        if (params.model === 'error-model') {
+          const error = new Error('Model not found');
+          error.status = 404;
+          error.headers = { 'x-request-id': 'mock-request-123' };
+          throw error;
+        }
+
+        const response = {
+          id: 'msg_mock123',
+          type: 'message',
+          role: 'assistant',
+          model: params.model,
+          content: [
+            {
+              type: 'text',
+              text: 'Hello from Anthropic mock!',
+            },
+          ],
+          stop_reason: 'end_turn',
+          stop_sequence: null,
+          usage: {
+            input_tokens: 10,
+            output_tokens: 15,
+            cache_creation_input_tokens: 0,
+            cache_read_input_tokens: 0,
+          },
+        };
+        return response;
+      },
+      countTokens: async (..._args) => ({ id: 'mock', type: 'model', model: 'mock', input_tokens: 0 }),
+    };
+
+    // Minimal implementations for required interface compliance
+    this.models = {
+      list: async (..._args) => ({ id: 'mock', type: 'model', model: 'mock' }),
+      get: async (..._args) => ({ id: 'mock', type: 'model', model: 'mock' }),
+    };
+
+    this.completions = {
+      create: async (..._args) => ({ id: 'mock', type: 'completion', model: 'mock' }),
+    };
+  }
+}

dev-packages/browser-integration-tests/suites/tracing/ai-providers/anthropic/subject.js

@@ -0,0 +1,19 @@
+import { instrumentAnthropicAiClient } from '@sentry/browser';
+import { MockAnthropic } from './mocks.js';
+
+const mockClient = new MockAnthropic({
+  apiKey: 'mock-api-key',
+});
+
+const client = instrumentAnthropicAiClient(mockClient);
+
+// Test that manual instrumentation doesn't crash the browser
+// The instrumentation automatically creates spans
+const response = await client.messages.create({
+  model: 'claude-3-haiku-20240307',
+  messages: [{ role: 'user', content: 'What is the capital of France?' }],
+  temperature: 0.7,
+  max_tokens: 100,
+});
+
+console.log('Received response', response);

dev-packages/browser-integration-tests/suites/tracing/ai-providers/anthropic/test.ts

@@ -0,0 +1,36 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, waitForTransactionRequest } from '../../../../utils/helpers';
+
+// These tests are not exhaustive because the instrumentation is
+// already tested in the node integration tests and we merely
+// want to test that the instrumentation does not crash in the browser
+// and that gen_ai transactions are sent.
+
+sentryTest('manual Anthropic instrumentation sends gen_ai transactions', async ({ getLocalTestUrl, page }) => {
+  const transactionPromise = waitForTransactionRequest(page, event => {
+    return !!event.transaction?.includes('claude-3-haiku-20240307');
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  await page.goto(url);
+
+  const req = await transactionPromise;
+
+  const eventData = envelopeRequestParser(req);
+
+  // Verify it's a gen_ai transaction
+  expect(eventData.transaction).toBe('messages claude-3-haiku-20240307');
+  expect(eventData.contexts?.trace?.op).toBe('gen_ai.messages');
+  expect(eventData.contexts?.trace?.origin).toBe('auto.ai.anthropic');
+  expect(eventData.contexts?.trace?.data).toMatchObject({
+    'gen_ai.operation.name': 'messages',
+    'gen_ai.system': 'anthropic',
+    'gen_ai.request.model': 'claude-3-haiku-20240307',
+    'gen_ai.request.temperature': 0.7,
+    'gen_ai.response.model': 'claude-3-haiku-20240307',
+    'gen_ai.response.id': 'msg_mock123',
+    'gen_ai.usage.input_tokens': 10,
+    'gen_ai.usage.output_tokens': 15,
+  });
+});

dev-packages/browser-integration-tests/suites/tracing/ai-providers/google-genai/init.js

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  tracesSampleRate: 1,
+  debug: true,
+});

dev-packages/browser-integration-tests/suites/tracing/ai-providers/google-genai/mocks.js

@@ -0,0 +1,118 @@
+// Mock Google GenAI client for browser testing
+export class MockGoogleGenAI {
+  constructor(config) {
+    this.apiKey = config.apiKey;
+
+    // models.generateContent functionality
+    this.models = {
+      generateContent: async (...args) => {
+        const params = args[0];
+        // Simulate processing time
+        await new Promise(resolve => setTimeout(resolve, 10));
+
+        if (params.model === 'error-model') {
+          const error = new Error('Model not found');
+          error.status = 404;
+          error.headers = { 'x-request-id': 'mock-request-123' };
+          throw error;
+        }
+
+        return {
+          candidates: [
+            {
+              content: {
+                parts: [
+                  {
+                    text: 'Hello from Google GenAI mock!',
+                  },
+                ],
+                role: 'model',
+              },
+              finishReason: 'stop',
+              index: 0,
+            },
+          ],
+          usageMetadata: {
+            promptTokenCount: 8,
+            candidatesTokenCount: 12,
+            totalTokenCount: 20,
+          },
+        };
+      },
+      generateContentStream: async () => {
+        // Return a promise that resolves to an async generator
+        return (async function* () {
+          yield {
+            candidates: [
+              {
+                content: {
+                  parts: [{ text: 'Streaming response' }],
+                  role: 'model',
+                },
+                finishReason: 'stop',
+                index: 0,
+              },
+            ],
+          };
+        })();
+      },
+    };
+
+    // chats.create implementation
+    this.chats = {
+      create: (...args) => {
+        const params = args[0];
+        const model = params.model;
+
+        return {
+          modelVersion: model,
+          sendMessage: async (..._messageArgs) => {
+            // Simulate processing time
+            await new Promise(resolve => setTimeout(resolve, 10));
+
+            const response = {
+              candidates: [
+                {
+                  content: {
+                    parts: [
+                      {
+                        text: 'This is a joke from the chat!',
+                      },
+                    ],
+                    role: 'model',
+                  },
+                  finishReason: 'stop',
+                  index: 0,
+                },
+              ],
+              usageMetadata: {
+                promptTokenCount: 8,
+                candidatesTokenCount: 12,
+                totalTokenCount: 20,
+              },
+              modelVersion: model, // Include model version in response
+            };
+            return response;
+          },
+          sendMessageStream: async () => {
+            // Return a promise that resolves to an async generator
+            return (async function* () {
+              yield {
+                candidates: [
+                  {
+                    content: {
+                      parts: [{ text: 'Streaming chat response' }],
+                      role: 'model',
+                    },
+                    finishReason: 'stop',
+                    index: 0,
+                  },
+                ],
+              };
+            })();
+          },
+        };
+      },
+    };
+  }
+}

dev-packages/browser-integration-tests/suites/tracing/ai-providers/google-genai/subject.js

@@ -0,0 +1,32 @@
+import { instrumentGoogleGenAIClient } from '@sentry/browser';
+import { MockGoogleGenAI } from './mocks.js';
+
+const mockClient = new MockGoogleGenAI({
+  apiKey: 'mock-api-key',
+});
+
+const client = instrumentGoogleGenAIClient(mockClient);
+
+// Test that manual instrumentation doesn't crash the browser
+// The instrumentation automatically creates spans
+// Test both chats and models APIs
+const chat = client.chats.create({
+  model: 'gemini-1.5-pro',
+  config: {
+    temperature: 0.8,
+    topP: 0.9,
+    maxOutputTokens: 150,
+  },
+  history: [
+    {
+      role: 'user',
+      parts: [{ text: 'Hello, how are you?' }],
+    },
+  ],
+});
+
+const response = await chat.sendMessage({
+  message: 'Tell me a joke',
+});
+
+console.log('Received response', response);

dev-packages/browser-integration-tests/suites/tracing/ai-providers/google-genai/test.ts

@@ -0,0 +1,31 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, waitForTransactionRequest } from '../../../../utils/helpers';
+
+// These tests are not exhaustive because the instrumentation is
+// already tested in the node integration tests and we merely
+// want to test that the instrumentation does not crash in the browser
+// and that gen_ai transactions are sent.
+
+sentryTest('manual Google GenAI instrumentation sends gen_ai transactions', async ({ getLocalTestUrl, page }) => {
+  const transactionPromise = waitForTransactionRequest(page, event => {
+    return !!event.transaction?.includes('gemini-1.5-pro');
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  await page.goto(url);
+
+  const req = await transactionPromise;
+
+  const eventData = envelopeRequestParser(req);
+
+  // Verify it's a gen_ai transaction
+  expect(eventData.transaction).toBe('chat gemini-1.5-pro create');
+  expect(eventData.contexts?.trace?.op).toBe('gen_ai.chat');
+  expect(eventData.contexts?.trace?.origin).toBe('auto.ai.google_genai');
+  expect(eventData.contexts?.trace?.data).toMatchObject({
+    'gen_ai.operation.name': 'chat',
+    'gen_ai.system': 'google_genai',
+    'gen_ai.request.model': 'gemini-1.5-pro',
+  });
+});

dev-packages/browser-integration-tests/suites/tracing/ai-providers/openai/init.js

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  tracesSampleRate: 1,
+  debug: true,
+});

dev-packages/browser-integration-tests/suites/tracing/ai-providers/openai/mocks.js

@@ -0,0 +1,47 @@
+// Mock OpenAI client for browser testing
+export class MockOpenAi {
+  constructor(config) {
+    this.apiKey = config.apiKey;
+
+    this.chat = {
+      completions: {
+        create: async (...args) => {
+          const params = args[0];
+          // Simulate processing time
+          await new Promise(resolve => setTimeout(resolve, 10));
+
+          if (params.model === 'error-model') {
+            const error = new Error('Model not found');
+            error.status = 404;
+            error.headers = { 'x-request-id': 'mock-request-123' };
+            throw error;
+          }
+
+          const response = {
+            id: 'chatcmpl-mock123',
+            object: 'chat.completion',
+            created: 1677652288,
+            model: params.model,
+            system_fingerprint: 'fp_44709d6fcb',
+            choices: [
+              {
+                index: 0,
+                message: {
+                  role: 'assistant',
+                  content: 'Hello from OpenAI mock!',
+                },
+                finish_reason: 'stop',
+              },
+            ],
+            usage: {
+              prompt_tokens: 10,
+              completion_tokens: 15,
+              total_tokens: 25,
+            },
+          };
+          return response;
+        },
+      },
+    };
+  }
+}