Connect OTEL network request spans to the backend

[ccschmitz]

No description provided.

[linear]

HIG-4732 Connect OTEL network request spans to the backend

[greptile-apps]

To connect OTEL network request spans to the backend, follow these steps:

1. Frontend Configuration:

   • Ensure tracingOrigins and networkRecording are enabled in your frontend initialization:

     H.init('<YOUR_PROJECT_ID>', {
       tracingOrigins: ['localhost', 'example.myapp.com/backend'],
       networkRecording: {
         enabled: true,
         recordHeadersAndBody: true,
       },
     });

2. Backend Middleware:

   • Add middleware to capture the x-highlight-request header and pass it along with your backend requests. For example, in a Node.js backend:

     app.use((req, res, next) => {
       const highlightHeader = req.headers['x-highlight-request'];
       if (highlightHeader) {
         // Attach the header to outgoing requests
         req.highlightContext = H.parseHeaders(req.headers);
       }
       next();
     });

3. Backend Error Handling:

   • Use the parsed headers to log errors and metrics in your backend. For example, in sdk/highlight-node/src/sdk.ts:

     H.consumeError(error, req.highlightContext.secureSessionId, req.highlightContext.requestId);

4. Distributed Tracing:

   • Forward the x-highlight-request header in inter-service communication. For example:

     await fetch('my-fastapi-backend:8000/api', { headers: {'x-highlight-request': req.headers['x-highlight-request']} });

5. Testing:

   • Refer to test cases in sdk/highlight-apollo/src/apollo.test.ts and sdk/highlight-next/src/server.test.ts for examples on how to validate the integration.

6. Mock OTEL Server:

   • Use the mock OTEL server in packages/mock-otel-server/src to simulate and verify the spans.

Ensure CORS is configured to allow the x-highlight-request header and enable verbose logging for debugging.

References

/backend/otel/samples/nextjs.json
/backend/public-graph/graph/resolver.go
/sdk/highlight-node/src/sdk.ts
/sdk/highlight-node/src/types.ts
/sdk/highlight-apollo/src/apollo.test.ts
/sdk/highlight-apollo/src/apolloV3.test.ts
/sdk/highlight-next/src/server.test.ts
/packages/mock-otel-server/src
/docs-content/getting-started/2_frontend-backend-mapping.md

Ask Greptile