Add tracing plugin for undici/fetch

[hansott]

Hi Sentry team! 👋

nodejs/node#41749 has just been merged (adds fetch to Node.js).

The default tracing plugin that ships with the SDK adds a span for each HTTP request of the http/https modules from node.

This is great but we've been using undici for a while now and added manual instrumentation for it.

The newly merged fetch builds on top of undici.

Would be great if there was tracing support built-in for undici/fetch.

Thanks!

Edit from maintainers:

Released with 7.46.0 of @sentry/node: https://docs.sentry.io/platforms/node/configuration/integrations/pluggable-integrations/#undici

Sentry.init({
  integrations: [new Sentry.Integrations.Undici()],
})

Supports Undici 4.7.0 or higher and requires Node 16.7.0 or higher

[AbhiPrasad]

Awesome to see fetch finally land :)

We'll add this to the backlog to work on, but PRs are welcome for anyone who wants to help out!

[hansott]

Here's an example how we instrumented manually:

export class HttpClientTracing implements HttpClient {
  constructor(private readonly client: HttpClient) {}

  async send(request: HttpRequest): Promise<HttpResponse> {
    const transaction = Sentry.getCurrentHub().getScope()?.getTransaction();

    let span;
    if (transaction) {
      const copyURL = new URL(request.getURL());
      copyURL.search = "";
      span = transaction.startChild({
        op: "http.client",
        description: `${request.getMethod()} ${copyURL.toString()}`,
      });
    }

    const response = await this.client.send(request);

    if (span) {
      span.setHttpStatus(response.getStatusCode());
      span.finish();
    }

    return response;
  }
}

[JCMais]

I am using the diagnostics channel events to do that. Here is the code:

// https://github.com/nodejs/undici/pull/1000/files
// https://github.com/nodejs/undici/blob/7276126945c52cf7ec61460b36d19f882e1bab82/docs/api/DiagnosticsChannel.md?plain=1#L5
import diagnosticsChannel from 'node:diagnostics_channel'

import * as Sentry from '@sentry/node'
import { type DiagnosticsChannel } from 'undici'

// Another approach is to just  use a WeakMap
const SentrySpanSymbol = Symbol('kSentryUndiciRequestSpan')

type RequestTypedWithSymbol = DiagnosticsChannel.RequestCreateMessage['request'] & {
    [SentrySpanSymbol]?: Sentry.Span
}

// we have to create the channel and keep it around, as diagnosticsChannel is using a WeakReference internally
// if we did not capture the value, it would be garbage collected and the channel subscription would be removed
// see: https://github.com/nodejs/node/pull/42714
// Fixed with v19, for now, we gotta keep those exports around

export const undiciCreateChannel = diagnosticsChannel.channel('undici:request:create')
undiciCreateChannel.subscribe((msg) => {
    const { request } = msg as DiagnosticsChannel.RequestCreateMessage

    const currentSpan = Sentry.getCurrentHub().getScope()?.getSpan()

    if (currentSpan) {
        const copyURL = new URL(request.path, request.origin)
        copyURL.search = ''
        const span = currentSpan.startChild({
            op: 'http.client',
            description: `${request.method ?? 'NONE'} ${copyURL.toString()}`,
        })

        const requestTyped = request as RequestTypedWithSymbol
        requestTyped[SentrySpanSymbol] = span
    }
})

export const undiciHeadersChannel = diagnosticsChannel.channel('undici:request:headers')
undiciHeadersChannel.subscribe((msg) => {
    const { request, response } = msg as DiagnosticsChannel.RequestHeadersMessage

    const requestTyped = request as RequestTypedWithSymbol

    if (requestTyped[SentrySpanSymbol]) {
        const span = requestTyped[SentrySpanSymbol]
        span.setHttpStatus(response.statusCode)
        span.finish()
    }
})

export const undiciErrorChannel = diagnosticsChannel.channel('undici:request:error')
undiciErrorChannel.subscribe((msg) => {
    const { request } = msg as DiagnosticsChannel.RequestErrorMessage

    const requestTyped = request as RequestTypedWithSymbol

    if (requestTyped[SentrySpanSymbol]) {
        const span = requestTyped[SentrySpanSymbol]
        span.setStatus('unknown_error')
        span.finish()
    }
})

Just import that file before making the request and it is set up.

[AbhiPrasad]

Hey! I started to take a look at this here: #7582

[AbhiPrasad]

Released with 7.46.0 of @sentry/node: https://docs.sentry.io/platforms/node/configuration/integrations/pluggable-integrations/#undici

Sentry.init({
  integrations: [new Sentry.Integrations.Undici()],
})

Supports Undici 4.7.0 or higher and requires Node 16.7.0 or higher :)

We're using it internally in our SvelteKit and NextJS SDK's and seems all good - but please let us know if something seems off. Thanks!

[wirtsi]

So would this work without undici? So using Node 19, which has fetch build in already?

[AbhiPrasad]

The fetch built-in uses undici under the hood, so the SDK instruments built-in fetch as well if you use this integration! (needs Node 16.7 and higher!)

For Node 19+ the undici version should be all good :)

[wirtsi]

Mhh then I am still doing something wrong. I am using two integrations:

    integrations: [
      // enable HTTP calls tracing
      new Sentry.Integrations.Http({ tracing: true }),
      new Sentry.Integrations.Undici(),
    ],

but it appears I can only see the ones originating from calls done via node's http module. Will dig around a bit more

[AbhiPrasad]

Maybe it's something on our side - please feel free to open an issue and add some more details, we can help investigate! https://github.com/getsentry/sentry-javascript/issues