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

[yaohongkok]

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"

2. 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

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

4. Run npm install and npm run.

5. Visit http://localhost:8090/fetch/ and click on 'Test'.

6. 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 

[lingyan]

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.

[yaohongkok]

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

[lingyan]

@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.

[seemk]

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.

[evantorrie]

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.

[pichlermarc]

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.

[seemk]

Adding toString from long.js would pretty much bring in most of the library.

Wonder if it'd make sense to copy long.js to this codebase instead of copying only the relevant parts.

Another option would be to encode fixed64 as numbers in the JSON exporter, but this means the precision error is back.

I'm for just copying over long.js (as far as I know it can't be added as a dependency due to ESM), but this would cause the package size to go up and I think the JSON exporter is mostly used in browsers 🤔

[lingyan]

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