opentelemetry-js: Unable to send trace data to collector using 'examples/opentelemetry-web'

What happened?

Steps to Reproduce

  1. Set up the collector as follows:
receivers:
  otlp:
    protocols:
      http:
        endpoint: "0.0.0.0:4318"
        cors:
          allowed_origins:
            - http://localhost:8080
            - http://localhost:8090

exporters:
  debug:
    verbosity: normal
    sampling_initial: 1
    sampling_thereafter: 1

service:
  # extensions: [health_check, pprof, zpages]
  pipelines:
    traces:
      receivers: [otlp]
      exporters: [debug]
  telemetry:
    logs:
      level: "debug"
  1. Run the collector:
docker run -v $(pwd)/otel_config.yml:/etc/otelcol-contrib/config.yaml -p 4318:4318 otel/opentelemetry-collector-contrib:0.87.0-armv7

  1. Clone this repo and go into examples/opentelemetry-web.

  2. Run npm install and npm run.

  3. Visit http://localhost:8090/fetch/ and click on ‘Test’.

  4. Open up the developer console and under the Network tab, you will see /traces responding with 400s.

Expected Result

The POST /traces requests should succeed.

Actual Result

The POST /traces requests receives a 400 Bad Request. The response is:

{
    "code": 3,
    "message": "ReadUint64: unsupported value type, error found in #10 byte of ...|UnixNano\":{\"low\":102|..., bigger context ...|1\",\"name\":\"HTTP GET\",\"kind\":3,\"startTimeUnixNano\":{\"low\":1029784000,\"high\":395146000},\"endTimeUnixNa|..."
}

The request looks smth as follows:

{
  "resourceSpans": [
    {
      "resource": {
        "attributes": [
          {
            "key": "service.name",
            "value": {
              "stringValue": "unknown_service"
            }
          },
          {
            "key": "telemetry.sdk.language",
            "value": {
              "stringValue": "webjs"
            }
          },
          {
            "key": "telemetry.sdk.name",
            "value": {
              "stringValue": "opentelemetry"
            }
          },
          {
            "key": "telemetry.sdk.version",
            "value": {
              "stringValue": "1.17.1"
            }
          }
        ],
        "droppedAttributesCount": 0
      },
      "scopeSpans": [
        {
          "scope": {
            "name": "@opentelemetry/instrumentation-fetch",
            "version": "0.44.0"
          },
          "spans": [
            {
              "traceId": "b6d98f8d3db156c41479a10dcec7acad",
              "spanId": "d56edc49226cec35",
              "parentSpanId": "dfad940e2086e9c1",
              "name": "HTTP GET",
              "kind": 3,
              "startTimeUnixNano": {
                "low": 1029784000,
                "high": 395146000
              },
              "endTimeUnixNano": {
                "low": 1098784000,
                "high": 395146000
              },
              "attributes": [
                {
                  "key": "component",
                  "value": {
                    "stringValue": "fetch"
                  }
                },
                {
                  "key": "http.method",
                  "value": {
                    "stringValue": "GET"
                  }
                },
                {
                  "key": "http.url",
                  "value": {
                    "stringValue": "https://httpbin.org/get"
                  }
                },
                {
                  "key": "http.status_code",
                  "value": {
                    "intValue": 200
                  }
                },
                {
                  "key": "http.status_text",
                  "value": {
                    "stringValue": ""
                  }
                },
                {
                  "key": "http.host",
                  "value": {
                    "stringValue": "httpbin.org"
                  }
                },
                {
                  "key": "http.scheme",
                  "value": {
                    "stringValue": "https"
                  }
                },
                {
                  "key": "http.user_agent",
                  "value": {
                    "stringValue": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36"
                  }
                },
                {
                  "key": "http.response_content_length",
                  "value": {
                    "intValue": 0
                  }
                }
              ],
              "droppedAttributesCount": 0,
              "events": [
                {
                  "attributes": [],
                  "name": "fetchStart",
                  "timeUnixNano": {
                    "low": 1029984001,
                    "high": 395146000
                  },
                  "droppedAttributesCount": 0
                },
                {
                  "attributes": [],
                  "name": "domainLookupStart",
                  "timeUnixNano": {
                    "low": -956532928,
                    "high": 395145867
                  },
                  "droppedAttributesCount": 0
                },
                {
                  "attributes": [],
                  "name": "domainLookupEnd",
                  "timeUnixNano": {
                    "low": -956532928,
                    "high": 395145867
                  },
                  "droppedAttributesCount": 0
                },
                {
                  "attributes": [],
                  "name": "connectStart",
                  "timeUnixNano": {
                    "low": -956532928,
                    "high": 395145867
                  },
                  "droppedAttributesCount": 0
                },
                {
                  "attributes": [],
                  "name": "secureConnectionStart",
                  "timeUnixNano": {
                    "low": -956532928,
                    "high": 395145867
                  },
                  "droppedAttributesCount": 0
                },
                {
                  "attributes": [],
                  "name": "connectEnd",
                  "timeUnixNano": {
                    "low": -956532928,
                    "high": 395145867
                  },
                  "droppedAttributesCount": 0
                },
                {
                  "attributes": [],
                  "name": "requestStart",
                  "timeUnixNano": {
                    "low": -956532928,
                    "high": 395145867
                  },
                  "droppedAttributesCount": 0
                },
                {
                  "attributes": [],
                  "name": "responseStart",
                  "timeUnixNano": {
                    "low": -956532928,
                    "high": 395145867
                  },
                  "droppedAttributesCount": 0
                },
                {
                  "attributes": [],
                  "name": "responseEnd",
                  "timeUnixNano": {
                    "low": 1094484001,
                    "high": 395146000
                  },
                  "droppedAttributesCount": 0
                }
              ],
              "droppedEventsCount": 0,
              "status": {
                "code": 0
              },
              "links": [],
              "droppedLinksCount": 0
            }
          ]
        }
      ]
    }
  ]
}

Additional Details

I suspect this error has something to do with the negative numbers. But, I don’t understand enough about the proper behavior of unsigned_long.js.

I am on an ARM Mac and I am not sure if this could be the cause of this issue? I know that my colleague is able to use opentelemetry-js without much problem.

OpenTelemetry Setup Code

// Directly from the example fetch/index.js

const { context, trace } = require( '@opentelemetry/api');
const { ConsoleSpanExporter, SimpleSpanProcessor } = require( '@opentelemetry/sdk-trace-base');
const { OTLPTraceExporter } = require( '@opentelemetry/exporter-trace-otlp-http');
const { WebTracerProvider } = require( '@opentelemetry/sdk-trace-web');
const { FetchInstrumentation } = require( '@opentelemetry/instrumentation-fetch');
const { ZoneContextManager } = require( '@opentelemetry/context-zone');
const { B3Propagator } = require( '@opentelemetry/propagator-b3');
const { registerInstrumentations } = require( '@opentelemetry/instrumentation');

const provider = new WebTracerProvider();

// Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests
// to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the
// exporter without delay
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter()));
provider.register({
  contextManager: new ZoneContextManager(),
  propagator: new B3Propagator(),
});

registerInstrumentations({
  instrumentations: [
    new FetchInstrumentation({
      ignoreUrls: [/localhost:8090\/sockjs-node/],
      propagateTraceHeaderCorsUrls: [
        'https://cors-test.appspot.com/test',
        'https://httpbin.org/get',
      ],
      clearTimingResources: true,
    }),
  ],
});

const webTracerWithZone = provider.getTracer('example-tracer-web');

const getData = (url) => fetch(url, {
  method: 'GET',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
});

// example of keeping track of context between async operations
const prepareClickEvent = () => {
  const url = 'https://httpbin.org/get';

  const element = document.getElementById('button1');

  const onClick = () => {
    const singleSpan = webTracerWithZone.startSpan('files-series-info');
    context.with(trace.setSpan(context.active(), singleSpan), () => {
      getData(url).then((_data) => {
        trace.getSpan(context.active()).addEvent('fetching-single-span-completed');
        singleSpan.end();
      });
    });
    for (let i = 0, j = 5; i < j; i += 1) {
      const span = webTracerWithZone.startSpan(`files-series-info-${i}`);
      context.with(trace.setSpan(context.active(), span), () => {
        getData(url).then((_data) => {
          trace.getSpan(context.active()).addEvent(`fetching-span-${i}-completed`);
          span.end();
        });
      });
    }
  };
  element.addEventListener('click', onClick);
};

window.addEventListener('load', prepareClickEvent);

package.json

{
  "name": "web-opentelemetry-example",
  "private": true,
  "version": "0.44.0",
  "description": "Example of using @opentelemetry/sdk-trace-web and @opentelemetry/sdk-metrics in browser",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --progress --color --port 8090 --config webpack.dev.config.js --hot --host 0.0.0.0 --compress",
    "start-nc": "webpack serve --progress --color --port 8090 --config webpack.dev.config.js --hot --host 0.0.0.0 --no-compress",
    "start-prod": "webpack serve --progress --color --port 8090 --config webpack.prod.config.js --hot --host 0.0.0.0 --compress",
    "start-prodnc": "webpack serve --progress --color --port 8090 --config webpack.prod.config.js --hot --host 0.0.0.0 --no-compress",
    "docker:start": "cd ./docker && docker-compose down && docker-compose up",
    "docker:startd": "cd ./docker && docker-compose down && docker-compose up -d",
    "docker:stop": "cd ./docker && docker-compose down"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/open-telemetry/opentelemetry-js.git"
  },
  "keywords": [
    "opentelemetry",
    "tracing",
    "metrics",
    "web"
  ],
  "engines": {
    "node": ">=14"
  },
  "author": "OpenTelemetry Authors",
  "license": "Apache-2.0",
  "bugs": {
    "url": "https://github.com/open-telemetry/opentelemetry-js/issues"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "babel-loader": "^8.0.6",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.2",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.5.0",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "@opentelemetry/api": "^1.3.0",
    "@opentelemetry/context-zone": "1.17.1",
    "@opentelemetry/core": "1.17.1",
    "@opentelemetry/exporter-metrics-otlp-http": "0.44.0",
    "@opentelemetry/exporter-trace-otlp-http": "0.44.0",
    "@opentelemetry/exporter-trace-otlp-proto": "0.44.0",
    "@opentelemetry/exporter-zipkin": "1.17.1",
    "@opentelemetry/instrumentation": "0.44.0",
    "@opentelemetry/instrumentation-fetch": "0.44.0",
    "@opentelemetry/instrumentation-xml-http-request": "0.44.0",
    "@opentelemetry/propagator-b3": "1.17.1",
    "@opentelemetry/sdk-metrics": "1.17.1",
    "@opentelemetry/sdk-trace-base": "1.17.1",
    "@opentelemetry/sdk-trace-web": "1.17.1",
    "@opentelemetry/semantic-conventions": "1.17.1"
  },
  "homepage": "https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/tracer-web"
}

Relevant log output

On the collector side, these are the output:

WARNING: The requested image's platform (linux/arm/v7) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested
2023-10-12T19:32:20.321Z	info	service@v0.87.0/telemetry.go:84	Setting up own telemetry...
2023-10-12T19:32:20.328Z	info	service@v0.87.0/telemetry.go:201	Serving Prometheus metrics	{"address": ":8888", "level": "Basic"}
2023-10-12T19:32:20.335Z	info	exporter@v0.87.0/exporter.go:275	Development component. May change in the future.	{"kind": "exporter", "data_type": "traces", "name": "debug"}
2023-10-12T19:32:20.340Z	debug	receiver@v0.87.0/receiver.go:294	Stable component.{"kind": "receiver", "name": "otlp", "data_type": "traces"}
2023-10-12T19:32:20.343Z	info	service@v0.87.0/service.go:143	Starting otelcol-contrib...	{"Version": "0.87.0", "NumCPU": 5}
2023-10-12T19:32:20.343Z	info	extensions/extensions.go:33	Starting extensions...
2023-10-12T19:32:20.344Z	warn	internal@v0.87.0/warning.go:40	Using the 0.0.0.0 address exposes this server to every network interface, which may facilitate Denial of Service attacks	{"kind": "receiver", "name": "otlp", "data_type": "traces", "documentation": "https://github.com/open-telemetry/opentelemetry-collector/blob/main/docs/security-best-practices.md#safeguards-against-denial-of-service-attacks"}
2023-10-12T19:32:20.345Z	info	otlpreceiver@v0.87.0/otlp.go:101	Starting HTTP server	{"kind": "receiver", "name": "otlp", "data_type": "traces", "endpoint": "0.0.0.0:4318"}
2023-10-12T19:32:20.346Z	info	service@v0.87.0/service.go:169	Everything is ready. Begin running and processing data.

On the client side:

[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
log.js:39 [HMR] Waiting for update signal from WDS...
ConsoleSpanExporter.js:88 Object
ConsoleSpanExporter.js:88 Object
ConsoleSpanExporter.js:88 Object
ConsoleSpanExporter.js:88 Object
ConsoleSpanExporter.js:88 Object
ConsoleSpanExporter.js:88 Object
ConsoleSpanExporter.js:88 Object
util.js:55     POST http://localhost:4318/v1/traces 400 (Bad Request)
sendWithBeacon @ util.js:55
eval @ OTLPExporterBrowserBase.js:77
ZoneAwarePromise @ zone.js:1429
OTLPExporterBrowserBase.send @ OTLPExporterBrowserBase.js:72
eval @ OTLPExporterBase.js:76
ZoneAwarePromise @ zone.js:1429
OTLPExporterBase._export @ OTLPExporterBase.js:73
OTLPExporterBase.export @ OTLPExporterBase.js:63
eval @ exporter.js:26
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ exporter.js:25
ZoneAwarePromise @ zone.js:1429
_export @ exporter.js:23
doExport @ SimpleSpanProcessor.js:98
SimpleSpanProcessor.onEnd @ SimpleSpanProcessor.js:123
MultiSpanProcessor.onEnd @ MultiSpanProcessor.js:84
Span.end @ Span.js:190
eval @ index.js:64
invoke @ zone.js:372
run @ zone.js:134
eval @ zone.js:1275
invokeTask @ zone.js:406
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:585
Promise.then (async)
nativeScheduleMicroTask @ zone.js:561
scheduleMicroTask @ zone.js:572
scheduleTask @ zone.js:396
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1265
resolvePromise @ zone.js:1202
eval @ zone.js:1118
eval @ zone.js:1134
Promise.then (async)
eval @ zone.js:1509
ZoneAwarePromise @ zone.js:1429
Ctor.then @ zone.js:1508
eval @ fetch.js:304
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ fetch.js:297
ZoneAwarePromise @ zone.js:1429
patchConstructor @ fetch.js:296
getData @ index.js:37
eval @ index.js:62
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
onClick @ index.js:61
invokeTask @ zone.js:406
runTask @ zone.js:178
invokeTask @ zone.js:487
invokeTask @ zone.js:1661
globalCallback @ zone.js:1692
globalZoneAwareCallback @ zone.js:1725
util.js:55     POST http://localhost:4318/v1/traces 400 (Bad Request)
sendWithBeacon @ util.js:55
eval @ OTLPExporterBrowserBase.js:77
ZoneAwarePromise @ zone.js:1429
OTLPExporterBrowserBase.send @ OTLPExporterBrowserBase.js:72
eval @ OTLPExporterBase.js:76
ZoneAwarePromise @ zone.js:1429
OTLPExporterBase._export @ OTLPExporterBase.js:73
OTLPExporterBase.export @ OTLPExporterBase.js:63
eval @ exporter.js:26
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ exporter.js:25
ZoneAwarePromise @ zone.js:1429
_export @ exporter.js:23
doExport @ SimpleSpanProcessor.js:98
SimpleSpanProcessor.onEnd @ SimpleSpanProcessor.js:123
MultiSpanProcessor.onEnd @ MultiSpanProcessor.js:84
Span.end @ Span.js:190
eval @ index.js:56
invoke @ zone.js:372
run @ zone.js:134
eval @ zone.js:1275
invokeTask @ zone.js:406
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:585
Promise.then (async)
nativeScheduleMicroTask @ zone.js:561
scheduleMicroTask @ zone.js:572
scheduleTask @ zone.js:396
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1265
resolvePromise @ zone.js:1202
eval @ zone.js:1118
eval @ zone.js:1134
Promise.then (async)
eval @ zone.js:1509
ZoneAwarePromise @ zone.js:1429
Ctor.then @ zone.js:1508
eval @ fetch.js:304
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ fetch.js:297
ZoneAwarePromise @ zone.js:1429
patchConstructor @ fetch.js:296
getData @ index.js:37
eval @ index.js:54
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
onClick @ index.js:53
invokeTask @ zone.js:406
runTask @ zone.js:178
invokeTask @ zone.js:487
invokeTask @ zone.js:1661
globalCallback @ zone.js:1692
globalZoneAwareCallback @ zone.js:1725
util.js:55     POST http://localhost:4318/v1/traces 400 (Bad Request)
sendWithBeacon @ util.js:55
eval @ OTLPExporterBrowserBase.js:77
ZoneAwarePromise @ zone.js:1429
OTLPExporterBrowserBase.send @ OTLPExporterBrowserBase.js:72
eval @ OTLPExporterBase.js:76
ZoneAwarePromise @ zone.js:1429
OTLPExporterBase._export @ OTLPExporterBase.js:73
OTLPExporterBase.export @ OTLPExporterBase.js:63
eval @ exporter.js:26
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ exporter.js:25
ZoneAwarePromise @ zone.js:1429
_export @ exporter.js:23
doExport @ SimpleSpanProcessor.js:98
SimpleSpanProcessor.onEnd @ SimpleSpanProcessor.js:123
MultiSpanProcessor.onEnd @ MultiSpanProcessor.js:84
Span.end @ Span.js:190
eval @ index.js:64
invoke @ zone.js:372
run @ zone.js:134
eval @ zone.js:1275
invokeTask @ zone.js:406
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:585
Promise.then (async)
nativeScheduleMicroTask @ zone.js:561
scheduleMicroTask @ zone.js:572
scheduleTask @ zone.js:396
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1265
resolvePromise @ zone.js:1202
eval @ zone.js:1118
eval @ zone.js:1134
Promise.then (async)
eval @ zone.js:1509
ZoneAwarePromise @ zone.js:1429
Ctor.then @ zone.js:1508
eval @ fetch.js:304
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ fetch.js:297
ZoneAwarePromise @ zone.js:1429
patchConstructor @ fetch.js:296
getData @ index.js:37
eval @ index.js:62
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
onClick @ index.js:61
invokeTask @ zone.js:406
runTask @ zone.js:178
invokeTask @ zone.js:487
invokeTask @ zone.js:1661
globalCallback @ zone.js:1692
globalZoneAwareCallback @ zone.js:1725
util.js:55     POST http://localhost:4318/v1/traces 400 (Bad Request)
sendWithBeacon @ util.js:55
eval @ OTLPExporterBrowserBase.js:77
ZoneAwarePromise @ zone.js:1429
OTLPExporterBrowserBase.send @ OTLPExporterBrowserBase.js:72
eval @ OTLPExporterBase.js:76
ZoneAwarePromise @ zone.js:1429
OTLPExporterBase._export @ OTLPExporterBase.js:73
OTLPExporterBase.export @ OTLPExporterBase.js:63
eval @ exporter.js:26
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ exporter.js:25
ZoneAwarePromise @ zone.js:1429
_export @ exporter.js:23
doExport @ SimpleSpanProcessor.js:98
SimpleSpanProcessor.onEnd @ SimpleSpanProcessor.js:123
MultiSpanProcessor.onEnd @ MultiSpanProcessor.js:84
Span.end @ Span.js:190
eval @ index.js:64
invoke @ zone.js:372
run @ zone.js:134
eval @ zone.js:1275
invokeTask @ zone.js:406
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:585
Promise.then (async)
nativeScheduleMicroTask @ zone.js:561
scheduleMicroTask @ zone.js:572
scheduleTask @ zone.js:396
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1265
resolvePromise @ zone.js:1202
eval @ zone.js:1118
eval @ zone.js:1134
Promise.then (async)
eval @ zone.js:1509
ZoneAwarePromise @ zone.js:1429
Ctor.then @ zone.js:1508
eval @ fetch.js:304
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ fetch.js:297
ZoneAwarePromise @ zone.js:1429
patchConstructor @ fetch.js:296
getData @ index.js:37
eval @ index.js:62
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
onClick @ index.js:61
invokeTask @ zone.js:406
runTask @ zone.js:178
invokeTask @ zone.js:487
invokeTask @ zone.js:1661
globalCallback @ zone.js:1692
globalZoneAwareCallback @ zone.js:1725
util.js:55     POST http://localhost:4318/v1/traces 400 (Bad Request)
sendWithBeacon @ util.js:55
eval @ OTLPExporterBrowserBase.js:77
ZoneAwarePromise @ zone.js:1429
OTLPExporterBrowserBase.send @ OTLPExporterBrowserBase.js:72
eval @ OTLPExporterBase.js:76
ZoneAwarePromise @ zone.js:1429
OTLPExporterBase._export @ OTLPExporterBase.js:73
OTLPExporterBase.export @ OTLPExporterBase.js:63
eval @ exporter.js:26
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ exporter.js:25
ZoneAwarePromise @ zone.js:1429
_export @ exporter.js:23
doExport @ SimpleSpanProcessor.js:98
SimpleSpanProcessor.onEnd @ SimpleSpanProcessor.js:123
MultiSpanProcessor.onEnd @ MultiSpanProcessor.js:84
Span.end @ Span.js:190
eval @ index.js:64
invoke @ zone.js:372
run @ zone.js:134
eval @ zone.js:1275
invokeTask @ zone.js:406
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:585
Promise.then (async)
nativeScheduleMicroTask @ zone.js:561
scheduleMicroTask @ zone.js:572
scheduleTask @ zone.js:396
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1265
resolvePromise @ zone.js:1202
eval @ zone.js:1118
eval @ zone.js:1134
Promise.then (async)
eval @ zone.js:1509
ZoneAwarePromise @ zone.js:1429
Ctor.then @ zone.js:1508
eval @ fetch.js:304
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ fetch.js:297
ZoneAwarePromise @ zone.js:1429
patchConstructor @ fetch.js:296
getData @ index.js:37
eval @ index.js:62
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
onClick @ index.js:61
invokeTask @ zone.js:406
runTask @ zone.js:178
invokeTask @ zone.js:487
invokeTask @ zone.js:1661
globalCallback @ zone.js:1692
globalZoneAwareCallback @ zone.js:1725
util.js:55     POST http://localhost:4318/v1/traces 400 (Bad Request)
sendWithBeacon @ util.js:55
eval @ OTLPExporterBrowserBase.js:77
ZoneAwarePromise @ zone.js:1429
OTLPExporterBrowserBase.send @ OTLPExporterBrowserBase.js:72
eval @ OTLPExporterBase.js:76
ZoneAwarePromise @ zone.js:1429
OTLPExporterBase._export @ OTLPExporterBase.js:73
OTLPExporterBase.export @ OTLPExporterBase.js:63
eval @ exporter.js:26
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ exporter.js:25
ZoneAwarePromise @ zone.js:1429
_export @ exporter.js:23
doExport @ SimpleSpanProcessor.js:98
SimpleSpanProcessor.onEnd @ SimpleSpanProcessor.js:123
MultiSpanProcessor.onEnd @ MultiSpanProcessor.js:84
Span.end @ Span.js:190
eval @ index.js:64
invoke @ zone.js:372
run @ zone.js:134
eval @ zone.js:1275
invokeTask @ zone.js:406
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:585
Promise.then (async)
nativeScheduleMicroTask @ zone.js:561
scheduleMicroTask @ zone.js:572
scheduleTask @ zone.js:396
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1265
resolvePromise @ zone.js:1202
eval @ zone.js:1118
eval @ zone.js:1134
Promise.then (async)
eval @ zone.js:1509
ZoneAwarePromise @ zone.js:1429
Ctor.then @ zone.js:1508
eval @ fetch.js:304
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ fetch.js:297
ZoneAwarePromise @ zone.js:1429
patchConstructor @ fetch.js:296
getData @ index.js:37
eval @ index.js:62
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
onClick @ index.js:61
invokeTask @ zone.js:406
runTask @ zone.js:178
invokeTask @ zone.js:487
invokeTask @ zone.js:1661
globalCallback @ zone.js:1692
globalZoneAwareCallback @ zone.js:1725
util.js:55     POST http://localhost:4318/v1/traces 400 (Bad Request)
sendWithBeacon @ util.js:55
eval @ OTLPExporterBrowserBase.js:77
ZoneAwarePromise @ zone.js:1429
OTLPExporterBrowserBase.send @ OTLPExporterBrowserBase.js:72
eval @ OTLPExporterBase.js:76
ZoneAwarePromise @ zone.js:1429
OTLPExporterBase._export @ OTLPExporterBase.js:73
OTLPExporterBase.export @ OTLPExporterBase.js:63
eval @ exporter.js:26
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ exporter.js:25
ZoneAwarePromise @ zone.js:1429
_export @ exporter.js:23
doExport @ SimpleSpanProcessor.js:98
SimpleSpanProcessor.onEnd @ SimpleSpanProcessor.js:123
MultiSpanProcessor.onEnd @ MultiSpanProcessor.js:84
Span.end @ Span.js:190
eval @ fetch.js:213
timer @ zone.js:2405
invokeTask @ zone.js:406
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args.<computed> @ zone.js:2385
setTimeout (async)
scheduleTask @ zone.js:2387
scheduleTask @ zone.js:393
scheduleTask @ zone.js:221
scheduleMacroTask @ zone.js:244
scheduleMacroTaskWithCurrentZone @ zone.js:683
eval @ zone.js:2429
proto.<computed> @ zone.js:973
FetchInstrumentation._endSpan @ fetch.js:207
endSpanOnSuccess @ fetch.js:247
eval @ fetch.js:268
invoke @ zone.js:372
run @ zone.js:134
eval @ zone.js:1275
invokeTask @ zone.js:406
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:585
Promise.then (async)
nativeScheduleMicroTask @ zone.js:561
scheduleMicroTask @ zone.js:572
scheduleTask @ zone.js:396
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1265
resolvePromise @ zone.js:1202
eval @ zone.js:1118
eval @ zone.js:1134
Promise.then (async)
eval @ zone.js:1509
ZoneAwarePromise @ zone.js:1429
Ctor.then @ zone.js:1508
read_1 @ fetch.js:265
eval @ fetch.js:271
invoke @ zone.js:372
run @ zone.js:134
eval @ zone.js:1275
invokeTask @ zone.js:406
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:585
Promise.then (async)
nativeScheduleMicroTask @ zone.js:561
scheduleMicroTask @ zone.js:572
scheduleTask @ zone.js:396
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1265
resolvePromise @ zone.js:1202
eval @ zone.js:1118
eval @ zone.js:1134
Promise.then (async)
eval @ zone.js:1509
ZoneAwarePromise @ zone.js:1429
Ctor.then @ zone.js:1508
read_1 @ fetch.js:265
onSuccess @ fetch.js:277
invoke @ zone.js:372
run @ zone.js:134
eval @ zone.js:1275
invokeTask @ zone.js:406
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:585
Promise.then (async)
nativeScheduleMicroTask @ zone.js:561
scheduleMicroTask @ zone.js:572
scheduleTask @ zone.js:396
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
scheduleResolveOrReject @ zone.js:1265
resolvePromise @ zone.js:1202
eval @ zone.js:1118
eval @ zone.js:1134
Promise.then (async)
eval @ zone.js:1509
ZoneAwarePromise @ zone.js:1429
Ctor.then @ zone.js:1508
eval @ fetch.js:304
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
eval @ fetch.js:297
ZoneAwarePromise @ zone.js:1429
patchConstructor @ fetch.js:296
getData @ index.js:37
eval @ index.js:62
invoke @ zone.js:372
run @ zone.js:134
ZoneContextManager.with @ ZoneContextManager.js:219
ContextAPI.with @ context.js:88
onClick @ index.js:61
invokeTask @ zone.js:406
runTask @ zone.js:178
invokeTask @ zone.js:487
invokeTask @ zone.js:1661
globalCallback @ zone.js:1692
globalZoneAwareCallback @ zone.js:1725
ConsoleSpanExporter.js:88

About this issue

  • Original URL
  • State: closed
  • Created 9 months ago
  • Reactions: 10
  • Comments: 24 (12 by maintainers)

Commits related to this issue

Most upvoted comments

This was quite the debug session to find the issue. Errors coming from the tools we used weren’t helpful.

Give this appears to be a broken release (i assume) could a patch be released or retag latest on npm to 0.43.0? Personally it was my first time using OTEL and without a change log or anything to go off this was very hard to pin down.

+9
joshmeads on Oct 26, 2023

@lingyan Is there an older release of this open-telemetry-js that I could run without running into this issue?

If you can, try downgrading @opentelemetry/exporter-trace-otlp-http to 0.43.0 for now.

+8
lingyan on Oct 12, 2023

Hello any progress?

They fixed it. I tested the latest version and it works well.

+5
cristianmadularu on Nov 14, 2023

This was quite the debug session to find the issue. Errors coming from the tools we used weren’t helpful.

Give this appears to be a broken release (i assume) could a patch be released or retag latest on npm to 0.43.0? Personally it was my first time using OTEL and without a change log or anything to go off this was very hard to pin down.

+1 for releasing emergency patches in these cases

+3
vpmedia on Oct 26, 2023

I’m seeing the same issue, and it seems to be related to this change: #4062 The startTimeUnixNano and endTimeUnixNano are serialized as an object, e.g. {"low":1045401984,"high":395145071}, instead of number or string, therefore collector can not parse it, hence throwing the ReadUint64: unsupported value type error: open-telemetry/opentelemetry-collector@main/pdata/internal/json/number.go#L71-L86 Based on the parser code, serializing the 64bit value to a string (instead of the object with low high fields) would solve this issue.

The JSON encoding went unnoticed in my PR, where the intermediate types were are serialized directly with JSON.stringify in the HTTP exporter. The conversion code needs another flag (e.g. to serialize fixed64 to strings). I’ll try to get a fix in tomorrow.

Thank you for picking this up @seemk

One thing to consider is whether CI should run some sort of functional test where the output from NodeJS exporters are sent to an OpenTelemetry Collector - and ensure that the data is parsed and collected correctly.

Such a test would have failed before the original PR #4062 was merged.

Agreed, we should have something like this. There’s #2157 to track this. I added it to the Exporter GA Milestone.

+2
pichlermarc on Oct 17, 2023

One thing to consider is whether CI should run some sort of functional test where the output from NodeJS exporters are sent to an OpenTelemetry Collector - and ensure that the data is parsed and collected correctly.

Such a test would have failed before the original PR #4062 was merged.

+2
evantorrie on Oct 16, 2023

I’m seeing the same issue, and it seems to be related to this change: #4062

The startTimeUnixNano and endTimeUnixNano are serialized as an object, e.g. {"low":1045401984,"high":395145071}, instead of number or string, therefore collector can not parse it, hence throwing the ReadUint64: unsupported value type error: https://github.com/open-telemetry/opentelemetry-collector/blob/main/pdata/internal/json/number.go#L71-L86

Based on the parser code, serializing the 64bit value to a string (instead of the object with low high fields) would solve this issue.

The JSON encoding went unnoticed in my PR, where the intermediate types were are serialized directly with JSON.stringify in the HTTP exporter. The conversion code needs another flag (e.g. to serialize fixed64 to strings). I’ll try to get a fix in tomorrow.

+2
seemk on Oct 16, 2023

#4202 (comment) This didnt work … any other alternative fix available?

Downgrade everything that’s 0.44.0 to 0.43.0, this helped me

0.43 does not have this issue but it has another bug (fixed in 0.44) where the library cannot be used from a WebWorker.

+1
cristianmadularu on Nov 1, 2023

#4202 (comment)

This didnt work … any other alternative fix available?

Downgrade everything that’s 0.44.0 to 0.43.0, this helped me

+1
mateusz-lisik on Oct 29, 2023

https://github.com/open-telemetry/opentelemetry-js/issues/4202#issuecomment-1760315879

This didnt work … any other alternative fix available?

+1
bpsgit on Oct 27, 2023

Is using JavaScript’s built-int BigInt type an option?

Went with the BigInt route with a fallback to the old imprecise (doesn’t really matter for browsers anyway) numeric value in case BigInt isn’t available: https://github.com/open-telemetry/opentelemetry-js/pull/4220

+1
seemk on Oct 24, 2023
Read more comments on GitHub
← opentelemetry-js: Unable to rely on AsyncHooksScopeManager when wrapping async functions
opentelemetry-js: Using OTLPTraceExporter and OTLPMetricExporter together causes empty data →