Issues with tracing in Vue application

[alvaro-baranoski]

Greetins everyone,

I am trying to connect my Vue frontend to SigNoz via OpenTelemetry. I am following this tutorial, however, since our project is using TypeScript I had to do some modifications.

The problem that I'm facing is that the application is not able to connect to the /v1/traces endpoint. I've tried creating a single simple span to test the connection, but it still fails (in firefox, the request gets blocked and I get the NS_BINDING_ABORTED error). Has someone experienced the same issue? Is there another tutorial/documentation that I can look into to solve my issue? Thanks a bunch!

My tracing.ts:

import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
import { ConsoleSpanExporter, SimpleSpanProcessor, Span } from '@opentelemetry/sdk-trace-base';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { B3Propagator } from '@opentelemetry/propagator-b3';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
import { Resource } from '@opentelemetry/resources';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';

export default function setupTracing() {
  console.log("[INFO] Setting up tracing...");
  
  const serviceName = "AssistenteFrontend";
  const resource = new Resource({ "service.name": serviceName });
  const provider = new WebTracerProvider({ resource });
  
  const collector = new OTLPTraceExporter({
    url: "http://172.31.29.XXX:4318/v1/traces",
    headers: { }
  });

  provider.addSpanProcessor(new SimpleSpanProcessor(collector));
  provider.register({
      contextManager: new ZoneContextManager()
  });
  
  const webTracerWithZone = provider.getTracer(serviceName);

  const span = webTracerWithZone.startSpan("");
  span.updateName("POST http://google.com");

  for (let index = 0; index < 1000; index++) {
    continue;
  }
  span.end();
}

My otel-collector-config.yaml CORS configuration:

otlp:
  protocols:
    http:
      cors:
        allowed_origins: ["*"]
        allowed_headers: ["*"]
        max_age: 7200 

[mgiammarco]

We have the same problem, no matter what we put on cors: we always get the error.