|
2 | 2 | * @vitest-environment jsdom |
3 | 3 | */ |
4 | 4 |
|
| 5 | +import type { Client } from '@sentry/core'; |
| 6 | +import { SentrySpan, spanToJSON } from '@sentry/core'; |
5 | 7 | import type { FetchHint, XhrHint } from '@sentry-internal/browser-utils'; |
6 | 8 | import { SENTRY_XHR_DATA_KEY } from '@sentry-internal/browser-utils'; |
7 | 9 | import { describe, expect, test } from 'vitest'; |
8 | 10 | import { |
9 | 11 | _getGraphQLOperation, |
10 | 12 | getGraphQLRequestPayload, |
11 | 13 | getRequestPayloadXhrOrFetch, |
| 14 | + graphqlClientIntegration, |
12 | 15 | parseGraphQLQuery, |
13 | 16 | } from '../../src/integrations/graphqlClient'; |
14 | 17 |
|
@@ -308,4 +311,114 @@ describe('GraphqlClient', () => { |
308 | 311 | expect(_getGraphQLOperation(requestBody as any)).toBe('unknown'); |
309 | 312 | }); |
310 | 313 | }); |
| 314 | + |
| 315 | + describe('beforeOutgoingRequestSpan handler', () => { |
| 316 | + function setupHandler(endpoints: Array<string | RegExp>): (span: SentrySpan, hint: FetchHint | XhrHint) => void { |
| 317 | + let capturedListener: ((span: SentrySpan, hint: FetchHint | XhrHint) => void) | undefined; |
| 318 | + const mockClient = { |
| 319 | + on: (eventName: string, cb: (span: SentrySpan, hint: FetchHint | XhrHint) => void) => { |
| 320 | + if (eventName === 'beforeOutgoingRequestSpan') { |
| 321 | + capturedListener = cb; |
| 322 | + } |
| 323 | + }, |
| 324 | + } as unknown as Client; |
| 325 | + |
| 326 | + const integration = graphqlClientIntegration({ endpoints }); |
| 327 | + integration.setup?.(mockClient); |
| 328 | + |
| 329 | + if (!capturedListener) { |
| 330 | + throw new Error('beforeOutgoingRequestSpan listener was not registered'); |
| 331 | + } |
| 332 | + return capturedListener; |
| 333 | + } |
| 334 | + |
| 335 | + function makeFetchHint(url: string, body: unknown): FetchHint { |
| 336 | + return { |
| 337 | + input: [url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }], |
| 338 | + response: new Response(null, { status: 200 }), |
| 339 | + startTimestamp: Date.now(), |
| 340 | + endTimestamp: Date.now() + 1, |
| 341 | + }; |
| 342 | + } |
| 343 | + |
| 344 | + const requestBody = { |
| 345 | + query: 'query GetHello { hello }', |
| 346 | + operationName: 'GetHello', |
| 347 | + variables: {}, |
| 348 | + extensions: {}, |
| 349 | + }; |
| 350 | + |
| 351 | + test('enriches http.client span for absolute URLs (http.url attribute)', () => { |
| 352 | + const handler = setupHandler([/\/graphql$/]); |
| 353 | + const span = new SentrySpan({ |
| 354 | + name: 'POST http://localhost:4000/graphql', |
| 355 | + op: 'http.client', |
| 356 | + attributes: { |
| 357 | + 'http.method': 'POST', |
| 358 | + 'http.url': 'http://localhost:4000/graphql', |
| 359 | + url: 'http://localhost:4000/graphql', |
| 360 | + }, |
| 361 | + }); |
| 362 | + |
| 363 | + handler(span, makeFetchHint('http://localhost:4000/graphql', requestBody)); |
| 364 | + |
| 365 | + const json = spanToJSON(span); |
| 366 | + expect(json.description).toBe('POST http://localhost:4000/graphql (query GetHello)'); |
| 367 | + expect(json.data['graphql.document']).toBe(requestBody.query); |
| 368 | + }); |
| 369 | + |
| 370 | + test('enriches http.client span for relative URLs (only url attribute)', () => { |
| 371 | + const handler = setupHandler([/\/graphql$/]); |
| 372 | + // Fetch instrumentation does NOT set http.url for relative URLs — only `url`. |
| 373 | + const span = new SentrySpan({ |
| 374 | + name: 'POST /graphql', |
| 375 | + op: 'http.client', |
| 376 | + attributes: { |
| 377 | + 'http.method': 'POST', |
| 378 | + url: '/graphql', |
| 379 | + }, |
| 380 | + }); |
| 381 | + |
| 382 | + handler(span, makeFetchHint('/graphql', requestBody)); |
| 383 | + |
| 384 | + const json = spanToJSON(span); |
| 385 | + expect(json.description).toBe('POST /graphql (query GetHello)'); |
| 386 | + expect(json.data['graphql.document']).toBe(requestBody.query); |
| 387 | + }); |
| 388 | + |
| 389 | + test('does nothing when no URL attribute is present', () => { |
| 390 | + const handler = setupHandler([/\/graphql$/]); |
| 391 | + const span = new SentrySpan({ |
| 392 | + name: 'POST', |
| 393 | + op: 'http.client', |
| 394 | + attributes: { |
| 395 | + 'http.method': 'POST', |
| 396 | + }, |
| 397 | + }); |
| 398 | + |
| 399 | + handler(span, makeFetchHint('/graphql', requestBody)); |
| 400 | + |
| 401 | + const json = spanToJSON(span); |
| 402 | + expect(json.description).toBe('POST'); |
| 403 | + expect(json.data['graphql.document']).toBeUndefined(); |
| 404 | + }); |
| 405 | + |
| 406 | + test('does nothing when span op is not http.client', () => { |
| 407 | + const handler = setupHandler([/\/graphql$/]); |
| 408 | + const span = new SentrySpan({ |
| 409 | + name: 'custom span', |
| 410 | + op: 'custom', |
| 411 | + attributes: { |
| 412 | + 'http.method': 'POST', |
| 413 | + url: '/graphql', |
| 414 | + }, |
| 415 | + }); |
| 416 | + |
| 417 | + handler(span, makeFetchHint('/graphql', requestBody)); |
| 418 | + |
| 419 | + const json = spanToJSON(span); |
| 420 | + expect(json.description).toBe('custom span'); |
| 421 | + expect(json.data['graphql.document']).toBeUndefined(); |
| 422 | + }); |
| 423 | + }); |
311 | 424 | }); |
0 commit comments