UserInteraction every event is separate trace

[padzikm]

What version of OpenTelemetry are you using?

user instrumentation: 0.32.0, opentelemetry api: 1.3.0

What version of Node are you using?

16.16.0

What did you do?

I have angular application (angular 14.1.0, application getting started from ng new). Added open telemetry to see traces for events like mouseover, click, focus, etc. I have created root span for my app bootstrap like this:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { Resource } from "@opentelemetry/resources";
import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { ZoneContextManager } from '@opentelemetry/context-zone-peer-dep';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { ZipkinExporter } from "@opentelemetry/exporter-zipkin";
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import opentelemetry from "@opentelemetry/api";

const resource =
  Resource.default().merge(
    new Resource({
      [SemanticResourceAttributes.SERVICE_NAME]: "myfront",
      [SemanticResourceAttributes.SERVICE_VERSION]: "0.1.0",
    })
  );

const options = {
  resource,
}

const provider = new WebTracerProvider(options);
provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter()));

provider.register({
  // Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
  contextManager: new ZoneContextManager(),
});

// Registering instrumentations
registerInstrumentations({
  instrumentations: [
    new UserInteractionInstrumentation({eventNames: ['click', 'change', 'focus', 'input', 'keyup', 'mouseover', 'select']}),
    new FetchInstrumentation()
  ],
});

if (environment.production) {
  enableProdMode();
}

let tracer = opentelemetry.trace.getTracer(
  'example-tracer'
);

tracer.startActiveSpan('boot', s => {
  platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
});

What did you expect to see?

Click, mousover and rest specified events should be part of root boot span when look into jaeger

What did you see instead?

When I disable user interaction plugin then every span inside my app I created is under boot span and displayed correctly in jaeger as one trace. Even fetch spans from fetch instrumentations are hooked into root boot span. But when user interaction is enabled then every click, mouseover, etc is a separate trace not included under root boot span.

Additional context

During debugging I noticed zone trace manager returns root zone with base context with no span in it every time during startSpan in user interaction

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stale for 14 days with no activity.

[L-Sypniewski]

Any update on this? It feels weird to have separate traces for very user interaction as it prevents tracking user's behavior.