Adding UserInteractionInstrumentation in TracingInstrumentation along with OtlpHttpTransport throws cors error.

[prajon84]

Initially I had initialized and used faro as:

import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';
import { TracingInstrumentation } from '@grafana/faro-web-tracing';
import { OtlpHttpTransport } from '@grafana/faro-transport-otlp-http';

const collectorUrl =
  process.env.BROWSER_TELEMETRY_COLLECTOR_URL || '<default_collector_url>';
const traceCorsUrl = collectorUrl.replace(/^https?:\/\//, '');
const  ignoreUrls = ['<url1>', '<url2>'];

window.FARO = initializeFaro({
  isolate: false,
  app: {
    name: `NAME`,
    version: 'VERSION', 
  },
  ignoreUrls,
  transports: [
    new OtlpHttpTransport({
      logsURL: `${collectorUrl}/v1/logs`,
      tracesURL: `${collectorUrl}/v1/traces`,
    }),
  ],
  instrumentations: [
    ...getWebInstrumentations(),
    new TracingInstrumentation({
      instrumentationOptions: {
        propagateTraceHeaderCorsUrls: [new RegExp(`/${traceCorsUrl}/`)],
      },
    }),
  ],
});

And, it was working fine. But, I need to add UserInteractionInstrumentation along with the default TracingInstrumentation for which I updated as:

import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';
import { TracingInstrumentation } from '@grafana/faro-web-tracing';
import { OtlpHttpTransport } from '@grafana/faro-transport-otlp-http';
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';

const collectorUrl =
  process.env.BROWSER_TELEMETRY_COLLECTOR_URL || '<default_collector_url>';
const traceCorsUrl = collectorUrl.replace(/^https?:\/\//, '');
const  ignoreUrls = ['<url1>', '<url2>'];

// initialize faro
window.FARO = initializeFaro({
  isolate: false,
  app: {
    name: `NAME`,
    version: 'VERSION', 
  },
  transports: [
    new OtlpHttpTransport({
      logsURL: `${collectorUrl}/v1/logs`,
      tracesURL: `${collectorUrl}/v1/traces`,
    }),
  ],
  instrumentations: [
    ...getWebInstrumentations(),
    new TracingInstrumentation({
      instrumentations: [
        new FetchInstrumentation({
          ignoreUrls,
          propagateTraceHeaderCorsUrls: [new RegExp(`/${traceCorsUrl}/`)],
        }),
        new XMLHttpRequestInstrumentation({
          ignoreUrls,
          propagateTraceHeaderCorsUrls: [new RegExp(`/${traceCorsUrl}/`)],
        }),
        new UserInteractionInstrumentation({
          eventNames: ['click', 'dblclick', 'submit', 'keypress'],
        }),
      ],
    }),
  ],
});

Since, I need to include UserInteractionInstrumentation, therefore I am passing it as custom instrumentation along with other default instrumentations.

However, I landed up with cors issue as this:

Any help would be appreciated 🙏