OpenTelemetry Collector 404'ing at http://localhost:55681/v1/traces

Question

I've run through the official Otel collector dockumentation, as well as run the collector using Docker and the follow config/code files, but always get a 404 from the collector when the app tries to POST to the /v1/traces endpoint. I've also tried various code samples, this post, running the collector on macOS and Ubuntu, using old builds, all with no success. Even curl -s -X POST 'http://localhost:55681/v1/traces gives a 404. Is this no longer the correct endpoint? It must be something simple. :)

docker run -it --rm -p 13133:13133 -p 14250:14250 -p 14268:14268 -p 55678-55681:55678-55681 -p 4317:4317 -p 8888:8888 -p 9411:9411 --name opentelemetry-collector -v "${PWD}/collector.yaml":/collector.yaml otel/opentelemetry-collector --config collector.yaml

collector.yaml

receivers:
  otlp:
    protocols:
      grpc:
      http:

processors:
  batch:

exporters:
  otlp:
    endpoint: 0.0.0.0:4317
  jaeger:
    endpoint: 0.0.0.0:14250

extensions:
  health_check:
  pprof:
  zpages:

service:
  extensions: [health_check, pprof, zpages]
  pipelines:
    traces:
      receivers: [otlp]
      processors: [batch]
      exporters: [otlp]
    metrics:
      receivers: [otlp]
      processors: [batch]
      exporters: [otlp]
    logs:
      receivers: [otlp]
      processors: [batch]
      exporters: [otlp]

TypeScript within an Angular app

import { Injectable } from '@angular/core';
import { JaegerExporter, ExporterConfig } from '@opentelemetry/exporter-jaeger';
import { WebTracerProvider } from '@opentelemetry/web';
import { SimpleSpanProcessor, ConsoleSpanExporter } from '@opentelemetry/tracing';
import { CollectorExporterNodeConfigBase, CollectorTraceExporter } from '@opentelemetry/exporter-collector';

@Injectable({
  providedIn: 'root'
})
export class TracerService {

  public tracerProvider: WebTracerProvider;

  constructor() {
    this.tracerProvider = new WebTracerProvider();
    this.tracerProvider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));

    let conf: CollectorExporterNodeConfigBase = {};
    const exporter = new CollectorTraceExporter(conf);
    this.tracerProvider.addSpanProcessor(new SimpleSpanProcessor(exporter));
    this.tracerProvider.register();
  }
}

Prometheus.yaml

global:
  scrape_interval: 15s # Default is every 1 minute.

scrape_configs:
  - job_name: 'collector'
    # metrics_path defaults to '/metrics'
    # scheme defaults to 'http'.
    static_configs:
      - targets: ['collector:9464']

Answer 1

The issue must be with collector itself as it was working fine for long time, please check the latest version it this still happens. Some explanation to better understand issue: The exporter collector for web is using 2 methods for sending traces one is sendBeacon and next is XMLHttpRequest. Beacon will be used only if headers are not defined and of course if beacon is available. As a workaround you can try to define empty headers which should be enough to switch from beacon to XMLHttpRequest for example

const exporter = new CollectorTraceExporter({headers: {}});

This way XMLHttpRequest will be used which has a default content type set to "application/json"