Exceptions are not recorded when using auto instrumentation with fetch instrumentation

[jc-akkodis]

trafficstars

I have a reactjs application where I use @opentelemetry/auto-instrumentations-web + @opentelemetry/instrumentation-fetch with the latest version. When I do an fetch and I get e.g. 400 back and I catch the exception, then I would assue to see the exception event in the span of the fetch request, but it is not recorded.

This is my current implementation:

import * as React from 'react';

const { WebTracerProvider } = require('@opentelemetry/sdk-trace-web');
const { getWebAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-web');
const { CollectorTraceExporter } = require('@opentelemetry/exporter-collector');
const { SimpleSpanProcessor } = require('@opentelemetry/sdk-trace-base');
const { registerInstrumentations } = require('@opentelemetry/instrumentation');
const { ZoneContextManager } = require('@opentelemetry/context-zone');
import { Resource } from '@opentelemetry/resources';

import { SEMRESATTRS_SERVICE_NAME } from '@opentelemetry/semantic-conventions';

import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';

const exporter = new OTLPTraceExporter({
  url: 'http://localhost:8080/v1/traces',
});

const provider = new WebTracerProvider({
  resource: new Resource({
    [SEMRESATTRS_SERVICE_NAME]: 'one one go',
  }),
});
provider.addSpanProcessor(new SimpleSpanProcessor(exporter));
provider.register({
  contextManager: new ZoneContextManager(),
});

const fetchInstrumentation = new FetchInstrumentation({});

fetchInstrumentation.setTracerProvider(provider);

registerInstrumentations({
  instrumentations: [
    getWebAutoInstrumentations({
      // load custom configuration for xml-http-request instrumentation
      '@opentelemetry/instrumentation-xml-http-request': {
        clearTimingResources: true,
      },
    }),
    fetchInstrumentation,
  ],
});

export default function TraceProvider({ children }) {
  return <>{children}</>;
}

Call:

public async getEmail(email: string): Promise<IAccountModel> {
    const { data } = await axios.get<IAccountModel>(this.backEndUrl + '/api/GetUserEmail?email=' + email, {
      withCredentials: true,
    });
    return data;
  }

...

getEmail("email")
.then((data) => {
  if (data) {
    setShowSpinner(false);

    toast.info(`todo: Text einfügen`);
  }
})
.catch((x) => {
  tryParseMessageAndInformUser(x.message);
  setShowSpinner(false);
});

I tried to force the record of the exception in the catch section but it does not work since the span which I get is enden (https://github.com/open-telemetry/opentelemetry-js/blob/5c1ae0aa5b686aae3e7511f1eb9cfcc4d7ab2326/packages/opentelemetry-sdk-trace-base/src/Span.ts#L144):

const span1 = opentelemetry.trace.getSpan(opentelemetry.context.active());
span1.recordException(x);
const span2 = opentelemetry.trace.getActiveSpan();
span1.recordException(x);

If i create an other span then the exception would be recorded but I would like to avoid this:

const span = opentelemetry.trace.getTracer('default').startSpan('Exception');
span.recordException(x);
pan.end();

It looks like that I can't get the span for the actual fetch call or is there something else?

P.s. I have the same issue if I try to set an attribute to the active span within catch section.

Please help!

• [x] This only affects the JavaScript OpenTelemetry library
• [ ] This may affect other libraries, but I would like to get opinions here first