Add a custom httpIntegration for Remix.

dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/tests/behaviour-server.test.ts

@@ -10,7 +10,7 @@ test('Sends two linked transactions (server & client) to Sentry', async ({ page
  const httpServerTransactionPromise = waitForTransaction('create-remix-app-express-vite-dev', transactionEvent => {
  return (
  transactionEvent.type === 'transaction' &&
- transactionEvent.contexts?.trace?.op === 'http' &&
+ transactionEvent.contexts?.trace?.op === 'http.server' &&
  transactionEvent.tags?.['sentry_test'] === testTag
  );
  });

dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/behaviour-server.test.ts

@@ -35,7 +35,7 @@ test('Sends form data with action error to Sentry', async ({ page }) => {
  );
 
  expect(actionSpan).toBeDefined();
- expect(actionSpan.op).toBe('http');
+ expect(actionSpan.op).toBe('action.remix');
  expect(actionSpan.data).toMatchObject({
  'formData.text': 'test',
  'formData.file': 'file.txt',
@@ -54,17 +54,17 @@ test('Sends a loader span to Sentry', async ({ page }) => {
  );
 
  expect(loaderSpan).toBeDefined();
- expect(loaderSpan.op).toBe('http');
+ expect(loaderSpan.op).toBe('loader.remix');
 });
 
-test('Sends two linked transactions (server & client) to Sentry', async ({ page }) => {
+test('Propagates trace when ErrorBoundary is triggered', async ({ page }) => {
  // We use this to identify the transactions
  const testTag = uuid4();
 
  const httpServerTransactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
  return (
  transactionEvent.type === 'transaction' &&
- transactionEvent.contexts?.trace?.op === 'http' &&
+ transactionEvent.contexts?.trace?.op === 'http.server' &&
  transactionEvent.tags?.['sentry_test'] === testTag
  );
  });
@@ -77,7 +77,7 @@ test('Sends two linked transactions (server & client) to Sentry', async ({ page
  );
  });
 
- page.goto(`/?tag=${testTag}`);
+ page.goto(`/client-error?tag=${testTag}`);
 
  const pageloadTransaction = await pageLoadTransactionPromise;
  const httpServerTransaction = await httpServerTransactionPromise;
@@ -95,8 +95,8 @@ test('Sends two linked transactions (server & client) to Sentry', async ({ page
  const pageLoadSpanId = pageloadTransaction.contexts?.trace?.span_id;
  const pageLoadParentSpanId = pageloadTransaction.contexts?.trace?.parent_span_id;
 
- expect(httpServerTransaction.transaction).toBe('GET http://localhost:3030/');
- expect(pageloadTransaction.transaction).toBe('routes/_index');
+ expect(httpServerTransaction.transaction).toBe('GET client-error');
+ expect(pageloadTransaction.transaction).toBe('routes/client-error');
 
  expect(httpServerTraceId).toBeDefined();
  expect(httpServerSpanId).toBeDefined();
@@ -106,14 +106,14 @@ test('Sends two linked transactions (server & client) to Sentry', async ({ page
  expect(pageLoadSpanId).not.toEqual(httpServerSpanId);
 });
 
-test('Propagates trace when ErrorBoundary is triggered', async ({ page }) => {
+test('Sends two linked transactions (server & client) to Sentry', async ({ page }) => {
  // We use this to identify the transactions
  const testTag = uuid4();
 
  const httpServerTransactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
  return (
  transactionEvent.type === 'transaction' &&
- transactionEvent.contexts?.trace?.op === 'http' &&
+ transactionEvent.contexts?.trace?.op === 'http.server' &&
  transactionEvent.tags?.['sentry_test'] === testTag
  );
  });
@@ -126,7 +126,7 @@ test('Propagates trace when ErrorBoundary is triggered', async ({ page }) => {
  );
  });
 
- page.goto(`/client-error?tag=${testTag}`);
+ page.goto(`/?tag=${testTag}`);
 
  const pageloadTransaction = await pageLoadTransactionPromise;
  const httpServerTransaction = await httpServerTransactionPromise;
@@ -144,8 +144,8 @@ test('Propagates trace when ErrorBoundary is triggered', async ({ page }) => {
  const pageLoadSpanId = pageloadTransaction.contexts?.trace?.span_id;
  const pageLoadParentSpanId = pageloadTransaction.contexts?.trace?.parent_span_id;
 
- expect(httpServerTransaction.transaction).toBe('GET client-error');
- expect(pageloadTransaction.transaction).toBe('routes/client-error');
+ expect(httpServerTransaction.transaction).toBe('GET http://localhost:3030/');
+ expect(pageloadTransaction.transaction).toBe('routes/_index');
 
  expect(httpServerTraceId).toBeDefined();
  expect(httpServerSpanId).toBeDefined();

dev-packages/e2e-tests/test-applications/create-remix-app-v2/tests/behaviour-server.test.ts

@@ -10,7 +10,7 @@ test('Sends two linked transactions (server & client) to Sentry', async ({ page
  const httpServerTransactionPromise = waitForTransaction('create-remix-app-v2', transactionEvent => {
  return (
  transactionEvent.type === 'transaction' &&
- transactionEvent.contexts?.trace?.op === 'http' &&
+ transactionEvent.contexts?.trace?.op === 'http.server' &&
  transactionEvent.tags?.['sentry_test'] === testTag
  );
  });

dev-packages/e2e-tests/test-applications/create-remix-app/tests/behaviour-server.test.ts

@@ -10,7 +10,7 @@ test('Sends two linked transactions (server & client) to Sentry', async ({ page
  const httpServerTransactionPromise = waitForTransaction('create-remix-app', transactionEvent => {
  return (
  transactionEvent.type === 'transaction' &&
- transactionEvent.contexts?.trace?.op === 'http' &&
+ transactionEvent.contexts?.trace?.op === 'http.server' &&
  transactionEvent.tags?.['sentry_test'] === testTag
  );
  });

packages/remix/package.json

@@ -57,6 +57,7 @@
  "access": "public"
  },
  "dependencies": {
+ "@opentelemetry/instrumentation-http": "0.51.1",
  "@remix-run/router": "1.x",
  "@sentry/cli": "^2.31.0",
  "@sentry/core": "8.4.0",

packages/remix/src/index.server.ts

@@ -11,6 +11,7 @@ import { logger } from '@sentry/utils';
 
 import { DEBUG_BUILD } from './utils/debug-build';
 import { instrumentServer } from './utils/instrumentServer';
+import { httpIntegration } from './utils/integrations/http';
 import { remixIntegration } from './utils/integrations/opentelemetry';
 import type { RemixOptions } from './utils/remixOptions';
 
@@ -135,6 +136,7 @@ export type { SentryMetaArgs } from './utils/types';
 export function getDefaultIntegrations(options: RemixOptions): Integration[] {
  return [
  ...getDefaultNodeIntegrations(options).filter(integration => integration.name !== 'Http'),
+ httpIntegration(),
  remixIntegration(options),
  ];
 }

packages/remix/src/utils/integrations/http.ts

@@ -0,0 +1,42 @@
+// This integration is ported from the Next.JS SDK.
+import { HttpInstrumentation } from '@opentelemetry/instrumentation-http';
+import { httpIntegration as originalHttpIntegration } from '@sentry/node';
+import type { IntegrationFn } from '@sentry/types';
+
+class RemixHttpIntegration extends HttpInstrumentation {
+ // Instead of the default behavior, we just don't do any wrapping for incoming requests
+ protected _getPatchIncomingRequestFunction(_component: 'http' | 'https') {
+ return (
+ original: (event: string, ...args: unknown[]) => boolean,
+ ): ((this: unknown, event: string, ...args: unknown[]) => boolean) => {
+ return function incomingRequest(this: unknown, event: string, ...args: unknown[]): boolean {
+ return original.apply(this, [event, ...args]);
+ };
+ };
+ }
+}
+
+interface HttpOptions {
+ /**
+ * Whether breadcrumbs should be recorded for requests.
+ * Defaults to true
+ */
+ breadcrumbs?: boolean;
+
+ /**
+ * Do not capture spans or breadcrumbs for outgoing HTTP requests to URLs where the given callback returns `true`.
+ * This controls both span & breadcrumb creation - spans will be non recording if tracing is disabled.
+ */
+ ignoreOutgoingRequests?: (url: string) => boolean;
+}
+
+/**
+ * The http integration instruments Node's internal http and https modules.
+ * It creates breadcrumbs and spans for outgoing HTTP requests which will be attached to the currently active span.
+ */
+export const httpIntegration = ((options: HttpOptions = {}) => {
+ return originalHttpIntegration({
+ ...options,
+ _instrumentation: RemixHttpIntegration,
+ });
+}) satisfies IntegrationFn;

packages/remix/src/utils/integrations/opentelemetry.ts

@@ -2,7 +2,8 @@ import { RemixInstrumentation } from 'opentelemetry-instrumentation-remix';
 
 import { defineIntegration } from '@sentry/core';
 import { addOpenTelemetryInstrumentation } from '@sentry/node';
-import type { IntegrationFn } from '@sentry/types';
+import type { Client, IntegrationFn, Span } from '@sentry/types';
+import { SEMANTIC_ATTRIBUTE_SENTRY_OP, spanToJSON } from '../../index.server';
 import type { RemixOptions } from '../remixOptions';
 
 const _remixIntegration = ((options?: RemixOptions) => {
@@ -15,9 +16,38 @@ const _remixIntegration = ((options?: RemixOptions) => {
  }),
  );
  },
+
+ setup(client: Client) {
+ client.on('spanStart', span => {
+ addRemixSpanAttributes(span);
+ });
+ },
  };
 }) satisfies IntegrationFn;
 
+const addRemixSpanAttributes = (span: Span): void => {
+ const attributes = spanToJSON(span).data || {};
+
+ // this is one of: loader, action, requestHandler
+ const type = attributes['code.function'];
+
+ // If this is already set, or we have no remix span, no need to process again...
+ if (attributes[SEMANTIC_ATTRIBUTE_SENTRY_OP] || !type) {
+ return;
+ }
+
+ // `requestHandler` span from `opentelemetry-instrumentation-remix` is the main server span.
+ // It should be marked as the `http.server` operation.
+ // The incoming requests are skipped by the custom `RemixHttpIntegration` package.
+ if (type === 'requestHandler') {
+ span.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_OP, 'http.server');
+ return;
+ }
+
+ // All other spans are marked as `remix` operations with their specific type [loader, action]
+ span.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_OP, `${type}.remix`);
+};
+
 /**
  * Instrumentation for aws-sdk package
  */

packages/remix/test/integration/test/server/action.test.ts

@@ -21,7 +21,7 @@ describe('Remix API Actions', () => {
  {
  data: {
  'code.function': 'action',
- 'sentry.op': 'http',
+ 'sentry.op': 'action.remix',
  'otel.kind': 'INTERNAL',
  'match.route.id': `routes/action-json-response${useV2 ? '.' : '/'}$id`,
  'match.params.id': '123123',
@@ -30,7 +30,7 @@ describe('Remix API Actions', () => {
  {
  data: {
  'code.function': 'loader',
- 'sentry.op': 'http',
+ 'sentry.op': 'loader.remix',
  'otel.kind': 'INTERNAL',
  'match.route.id': `routes/action-json-response${useV2 ? '.' : '/'}$id`,
  'match.params.id': '123123',
@@ -39,7 +39,7 @@ describe('Remix API Actions', () => {
  {
  data: {
  'code.function': 'loader',
- 'sentry.op': 'http',
+ 'sentry.op': 'loader.remix',
  'otel.kind': 'INTERNAL',
  'match.route.id': 'root',
  'match.params.id': '123123',
@@ -168,7 +168,7 @@ describe('Remix API Actions', () => {
  assertSentryTransaction(transaction_1[2], {
  contexts: {
  trace: {
- op: 'http',
+ op: 'http.server',
  status: 'ok',
  data: {
  'http.response.status_code': 302,
@@ -181,7 +181,7 @@ describe('Remix API Actions', () => {
  assertSentryTransaction(transaction_2[2], {
  contexts: {
  trace: {
- op: 'http',
+ op: 'http.server',
  status: 'internal_error',
  data: {
  'http.response.status_code': 500,
@@ -228,7 +228,7 @@ describe('Remix API Actions', () => {
  assertSentryTransaction(transaction[2], {
  contexts: {
  trace: {
- op: 'http',
+ op: 'http.server',
  status: 'internal_error',
  data: {
  'http.response.status_code': 500,
@@ -275,7 +275,7 @@ describe('Remix API Actions', () => {
  assertSentryTransaction(transaction[2], {
  contexts: {
  trace: {
- op: 'http',
+ op: 'http.server',
  status: 'internal_error',
  data: {
  'http.response.status_code': 500,
@@ -322,7 +322,7 @@ describe('Remix API Actions', () => {
  assertSentryTransaction(transaction[2], {
  contexts: {
  trace: {
- op: 'http',
+ op: 'http.server',
  status: 'internal_error',
  data: {
  'http.response.status_code': 500,
@@ -369,7 +369,7 @@ describe('Remix API Actions', () => {
  assertSentryTransaction(transaction[2], {
  contexts: {
  trace: {
- op: 'http',
+ op: 'http.server',
  status: 'internal_error',
  data: {
  'http.response.status_code': 500,
@@ -416,7 +416,7 @@ describe('Remix API Actions', () => {
  assertSentryTransaction(transaction[2], {
  contexts: {
  trace: {
- op: 'http',
+ op: 'http.server',
  status: 'internal_error',
  data: {
  'http.response.status_code': 500,
@@ -463,7 +463,7 @@ describe('Remix API Actions', () => {
  assertSentryTransaction(transaction[2], {
  contexts: {
  trace: {
- op: 'http',
+ op: 'http.server',
  status: 'internal_error',
  data: {
  'http.response.status_code': 500,

packages/remix/test/integration/test/server/loader.test.ts

@@ -103,15 +103,15 @@ describe('Remix API Loaders', () => {
  data: {
  'code.function': 'loader',
  'otel.kind': 'INTERNAL',
- 'sentry.op': 'http',
+ 'sentry.op': 'loader.remix',
  },
  origin: 'manual',
  },
  {
  data: {
  'code.function': 'loader',
  'otel.kind': 'INTERNAL',
- 'sentry.op': 'http',
+ 'sentry.op': 'loader.remix',
  },
  origin: 'manual',
  },
@@ -135,7 +135,7 @@ describe('Remix API Loaders', () => {
  assertSentryTransaction(transaction_1[2], {
  contexts: {
  trace: {
- op: 'http',
+ op: 'http.server',
  status: 'ok',
  data: {
  'http.response.status_code': 302,
@@ -148,7 +148,7 @@ describe('Remix API Loaders', () => {
  assertSentryTransaction(transaction_2[2], {
  contexts: {
  trace: {
- op: 'http',
+ op: 'http.server',
  status: 'internal_error',
  data: {
  'http.response.status_code': 500,
@@ -243,15 +243,15 @@ describe('Remix API Loaders', () => {
  {
  data: {
  'code.function': 'loader',
- 'sentry.op': 'http',
+ 'sentry.op': 'loader.remix',
  'otel.kind': 'INTERNAL',
  'match.route.id': `routes/loader-defer-response${useV2 ? '.' : '/'}$id`,
  },
  },
  {
  data: {
  'code.function': 'loader',
- 'sentry.op': 'http',
+ 'sentry.op': 'loader.remix',
  'otel.kind': 'INTERNAL',
  'match.route.id': 'root',
  },