Instrumenting a Remix V2 application to have automatic incoming/outgoing tracing

[ademartini-czi]

trafficstars

What happened?

Steps to Reproduce

Is it possible to automatically instrument HTTP incoming and outgoing spans when using Remix 2? I'm trying to do this with a regular auto-generated Remix 2 app (npx create-remix@latest). I'm running the latest (2.12.0) with both "@opentelemetry/instrumentation-http": "^0.53.0" and "opentelemetry-instrumentation-remix": "^0.7.1" and it doesn't seem to create any spans. It only works if I start manually making spans in my routes.

I know the remix instrumentation library isn't working because it keeps saying: RemixInstrumentation Module @remix-run/server-runtime has been loaded before RemixInstrumentation so it might not work, please initialize it before requiring @remix-run/server-runtime. And @opentelemetry/instrumentation-http doesn't seem to produce anything on its own either. Maybe Remix isn't using node HTTP?

Expected Result

It should be possible to automatically create trace spans for incoming/outgoing HTTP without pain using Remix V2.

Actual Result

No spans unless I manually create them.

Additional Details

OpenTelemetry Setup Code

This is what I'm doing at the start of my `entry.server.ts`:


diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.WARN);

const resource = new Resource({
  [SemanticResourceAttributes.SERVICE_NAME]: "service1",
});
const provider = new NodeTracerProvider({
  resource,
  idGenerator: new AWSXRayIdGenerator(),
  sampler: new AlwaysOnSampler(),
});

provider.addSpanProcessor(
  new SimpleSpanProcessor(
    new OTLPTraceExporter({
      url: "http://localhost:4318/v1/traces",
    })
  )
);

provider.register({
  propagator: new AWSXRayPropagator(),
});

const httpConfig = {};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const instrumentations: InstrumentationBase<any>[] = [
  new HttpInstrumentation(httpConfig),
  new AwsInstrumentation(),
  new RemixInstrumentation(),
];

registerInstrumentations({
  instrumentations,
});

### package.json

```JSON
{
  "name": "tracing-test-1",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@opentelemetry/api": "^1.9.0",
    "@opentelemetry/auto-instrumentations-node": "^0.50.0",
    "@opentelemetry/id-generator-aws-xray": "^1.2.2",
    "@opentelemetry/instrumentation-http": "^0.53.0",
    "@opentelemetry/propagator-aws-xray": "^1.26.0",
    "@opentelemetry/sdk-metrics": "^1.26.0",
    "@opentelemetry/sdk-node": "^0.53.0",
    "@opentelemetry/sdk-trace-node": "^1.26.0",
    "@remix-run/node": "^2.12.0",
    "@remix-run/react": "^2.12.0",
    "@remix-run/serve": "^2.12.0",
    "isbot": "^4.1.0",
    "opentelemetry-instrumentation-remix": "^0.7.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.12.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.4",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=20.0.0"
  }
}

Relevant log output

No response