Traces not uploading for React Native.

[Shahanshah-TA]

Hi
I am trying to use traces for react native app, for documentation referring here: https://opentelemetry.io/docs/demo/services/react-native-app/
i have useTracer.ts

import {useEffect, useState} from 'react';
import {Platform} from 'react-native';
import {
  CompositePropagator,
  W3CBaggagePropagator,
  W3CTraceContextPropagator,
} from '@opentelemetry/core';
import {WebTracerProvider} from '@opentelemetry/sdk-trace-web';
import {BatchSpanProcessor} from '@opentelemetry/sdk-trace-base';
import {XMLHttpRequestInstrumentation} from '@opentelemetry/instrumentation-xml-http-request';
import {FetchInstrumentation} from '@opentelemetry/instrumentation-fetch';
import {registerInstrumentations} from '@opentelemetry/instrumentation';
import {resourceFromAttributes} from '@opentelemetry/resources';
import {
  ATTR_SERVICE_NAME,
  ATTR_SERVICE_VERSION,
} from '@opentelemetry/semantic-conventions';
import {
  ATTR_DEVICE_ID,
  ATTR_OS_NAME,
  ATTR_OS_VERSION,
} from '@opentelemetry/semantic-conventions/build/src/index-incubating.js';
import {OTLPTraceExporter} from '@opentelemetry/exporter-trace-otlp-http';
import {
  getDeviceId,
  getSystemVersion,
  getVersion,
} from 'react-native-device-info';
import {SessionIdProcessor} from './sessionIdProcessor';

const Tracer = async () => {
  const resource = resourceFromAttributes({
    [ATTR_SERVICE_NAME]: 'react-native-app',
    [ATTR_OS_NAME]: Platform.OS,
    [ATTR_OS_VERSION]: getSystemVersion(),
    [ATTR_SERVICE_VERSION]: getVersion(),
    [ATTR_DEVICE_ID]: getDeviceId(),
  });

  const provider = new WebTracerProvider({
    resource,
    spanProcessors: [
      new BatchSpanProcessor(
        new OTLPTraceExporter({
          url: `https://MYURL.cloud:443/otlp-http/v1/traces`,
          headers: {
            Authorization:
              'ApiKey `MYAPIKEY`==',
            'Content-Type': 'application/json',
          },
        }),
        {
          scheduledDelayMillis: 500,
        },
      ),
      new SessionIdProcessor(),
    ],
  });

  provider.register({
    propagator: new CompositePropagator({
      propagators: [
        new W3CBaggagePropagator(),
        new W3CTraceContextPropagator(),
      ],
    }),
  });

  registerInstrumentations({
    instrumentations: [
      // Some tiptoeing required here, propagateTraceHeaderCorsUrls is required to make the instrumentation
      // work in the context of a mobile app even though we are not making CORS requests. `clearTimingResources` must
      // be turned off to avoid using the web-only Performance API
      new FetchInstrumentation({
        propagateTraceHeaderCorsUrls: /.*/,
        clearTimingResources: false,
      }),

      // The React Native implementation of fetch is simply a polyfill on top of XMLHttpRequest:
      // https://github.com/facebook/react-native/blob/7ccc5934d0f341f9bc8157f18913a7b340f5db2d/packages/react-native/Libraries/Network/fetch.js#L17
      // Because of this when making requests using `fetch` there will an additional span created for the underlying
      // request made with XMLHttpRequest. Since in this demo calls to /api/ are made using fetch, turn off
      // instrumentation for that path to avoid the extra spans.
      new XMLHttpRequestInstrumentation({
        ignoreUrls: [/\/api\/.*/],
      }),
    ],
  });
};

export interface TracerResult {
  loaded: boolean;
}

export const useTracer = (): TracerResult => {
  const [loaded, setLoaded] = useState<boolean>(false);

  useEffect(() => {
    if (!loaded) {
      Tracer()
        .catch(e => console.warn('failed to setup tracer', e))
        .finally(() => setLoaded(true));
    }
  }, [loaded]);

  return {
    loaded,
  };
};

and i have sessionIdProcessor.ts

// Copyright The OpenTelemetry Authors
// SPDX-License-Identifier: Apache-2.0
/**
 * Copied with modification from src/frontend/utils/telemetry/SessionIdProcessor.ts
 */
import {Context} from '@opentelemetry/api';
import {ReadableSpan, Span, SpanProcessor} from '@opentelemetry/sdk-trace-web';

export class SessionIdProcessor implements SpanProcessor {
  forceFlush(): Promise<void> {
    return Promise.resolve();
  }

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  onStart(span: Span, parentContext: Context): void {
    // SessionGateway.getSession().then(({userId}) => {
    //   span.setAttribute('session.id', userId);
    // });
    span.setAttribute('session.id', 'userId34223');
  }

  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
  onEnd(span: ReadableSpan): void {}

  shutdown(): Promise<void> {
    return Promise.resolve();
  }
}

I am not getting any error but I can't see traces on elastic.

I have tried 2 versions set
1.

    "@opentelemetry/api": "^1.9.0",
    "@opentelemetry/core": "^2.2.0",
    "@opentelemetry/exporter-trace-otlp-http": "^0.208.0",
    "@opentelemetry/instrumentation": "^0.208.0",
    "@opentelemetry/instrumentation-fetch": "^0.208.0",
    "@opentelemetry/instrumentation-xml-http-request": "^0.208.0",
    "@opentelemetry/resources": "^2.2.0",
    "@opentelemetry/sdk-trace-base": "^2.2.0",
    "@opentelemetry/sdk-trace-web": "^2.2.0",
    "@opentelemetry/semantic-conventions": "^1.38.0",
    "@react-native-async-storage/async-storage": "^2.2.0",
    "react": "18.3.1",
    "react-native": "0.77.3",
    "react-native-device-info": "^14.1.1"

   "@opentelemetry/api": "^1.9.0",
    "@opentelemetry/core": "^1.28.0",
    "@opentelemetry/exporter-logs-otlp-http": "^0.52.0",
    "@opentelemetry/exporter-metrics-otlp-http": "^0.52.0",
    "@opentelemetry/exporter-trace-otlp-http": "^0.52.0",
    "@opentelemetry/instrumentation": "^0.55.0",
    "@opentelemetry/instrumentation-fetch": "^0.55.0",
    "@opentelemetry/instrumentation-xml-http-request": "^0.55.0",
    "@opentelemetry/resources": "^2.0.1",
    "@opentelemetry/sdk-logs": "^0.52.0",
    "@opentelemetry/sdk-metrics": "^1.25.0",
    "@opentelemetry/sdk-trace-base": "^1.28.0",
    "@opentelemetry/sdk-trace-web": "^1.28.0",
    "@opentelemetry/semantic-conventions": "^1.28.0",
    "react": "18.2.0",
    "react-native": "0.74.5",