fix: Update span op for outgoing HTTP requests (#3821)

We've established that incoming requests have op=http.server and
outgoing requests have op=http.client.

Specification available at: https://develop.sentry.dev/sdk/features/#http-client-integrations
Last update: getsentry/develop#341

packages/nextjs/test/integration/test/client/tracingFetch.js

@@ -17,7 +17,7 @@ module.exports = async ({ page, url, requests }) => {
       {
         data: { method: 'GET', url: 'http://example.com', type: 'fetch' },
         description: 'GET http://example.com',
-        op: 'http',
+        op: 'http.client',
       },
     ],
   });

packages/tracing/src/browser/request.ts

@@ -174,7 +174,7 @@ export function fetchCallback(
         type: 'fetch',
       },
       description: `${handlerData.fetchData.method} ${handlerData.fetchData.url}`,
-      op: 'http',
+      op: 'http.client',
     });
 
     handlerData.fetchData.__span = span.spanId;
@@ -246,7 +246,7 @@ export function xhrCallback(
         url: xhr.url,
       },
       description: `${xhr.method} ${xhr.url}`,
-      op: 'http',
+      op: 'http.client',
     });
 
     handlerData.xhr.__sentry_xhr_span_id__ = span.spanId;

packages/tracing/test/browser/request.test.ts

@@ -143,7 +143,7 @@ describe('callbacks', () => {
         url: 'http://dogs.are.great/',
       });
       expect(newSpan!.description).toBe('GET http://dogs.are.great/');
-      expect(newSpan!.op).toBe('http');
+      expect(newSpan!.op).toBe('http.client');
       expect(fetchHandlerData.fetchData?.__span).toBeDefined();
 
       const postRequestFetchHandlerData = {
@@ -233,7 +233,7 @@ describe('callbacks', () => {
         url: 'http://dogs.are.great/',
       });
       expect(newSpan!.description).toBe('GET http://dogs.are.great/');
-      expect(newSpan!.op).toBe('http');
+      expect(newSpan!.op).toBe('http.client');
       expect(xhrHandlerData.xhr!.__sentry_xhr_span_id__).toBeDefined();
       expect(xhrHandlerData.xhr!.__sentry_xhr_span_id__).toEqual(newSpan?.spanId);