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 🙏

[prajon84]

cc: @codecapitano

[codecapitano]

Hi @prajon84 I tested your setup with our Demo app and it works as expected. But it doesn't use the OTLP transport.

Only thing I see is that you should add collectorUrl to the ignoredUrls list. Otherwise Faro will report on requests sent to the collector which makes Faro sending events in a loop, even if nothing else happens. Normally this is handled internally but in case of custom instruments it needs to be attached manually.

Can you double check in there are any unexpected headers added by something else? The only requests header attached by the otlp transport is the x-api-key header

[codecapitano]

Hi @prajon84 I found an issue which you maybe also ran into when updating otel deps in Faro:

After upgrading the otel dependencies in our packages some e2e tests started to fail because of cors issues. Turns out that version greater @opentelemetry/context-zone": "1.21.0 lead to these issues.

Can you double check if somehow a higher version of opentelemetry/context-zone sneaked in which maybe gut pulled while building?

[prajon84]

Hi @prajon84 I found an issue which you maybe also ran into when updating otel deps in Faro:

After upgrading the otel dependencies in our packages some e2e tests started to fail because of cors issues. Turns out that version greater @opentelemetry/context-zone": "1.21.0 lead to these issues.

Can you double check if somehow a higher version of opentelemetry/context-zone sneaked in which maybe gut pulled while building?

But in my above case I was using @opentelemetry/context-zone: 1.18.1

So, there was issue in lower version too ?

[codecapitano]

No issues with 1.18.1

[prajon84]

Can you double check in there are any unexpected headers added by something else? The only requests header attached by the otlp transport is the x-api-key header

Added the collectorUrl to the ignoreUrls list. But, still the same issue. The request header values for e.g. for "/v1/traces" call is as:

[codecapitano]

All right this looks good. Can you search your yarn.lock or package.lock files in there's a dependency to a higher version of context-zone which may interfere?

We'll release a new Faro version with the updated web-tracing package soon (hopefully this or next week). Maybe this will work

Atm I have no good idea what may cause the cors issue. Are you aware of any changes to the collector endpoints?

[prajon84]

Yeah. I tried and updated the yarn.lock also with context-zone with 1.21.0. But, I am still having the same cors issue. I will wait for the updated web-tracing package.

I am not aware of any change to the collector endpoint. I do not think so. But anyway I will check it too. But, waiting for the updated packages. 🙏

[prajon84]

Also, I wish there was some demo e.g with OtlpHttpTransport too