Why fe span cannot contain be span after integrate

[fjw-ai]

trafficstars

after integrate opentelemetry-js, I found that the fe span cannot contain be span, like the below snapshot. What could be causing this?

My frontend code looks like this，In addition, the users of our website may come from different countries. Does this have anything to do with it?

  const provider = new WebTracerProvider({
    resource: resourceFromAttributes({
      [ATTR_SERVICE_NAME]: `${CurrentProductCode}-fetch-web-service-${DatasuiteEnv}`,
      [ATTR_SERVICE_VERSION]: version,
    }),
    idGenerator: {
      generateTraceId: () => {
        const uuid = uuidv7();
        return uuid.replace(/-/g, '').toLowerCase();
      },

      generateSpanId: () => {
        const uidStr = uuidv7().replace(/-/g, '');
        return uidStr.substring(uidStr.length - 16, uidStr.length).toLowerCase();
      },
    },
    sampler: new AlwaysOnSampler(),
    spanProcessors: [
      new BatchSpanProcessor(
        new OTLPTraceExporter({
          url: `${location.origin}/api/collector/otlp/trace`,
        }),
        {
          maxQueueSize: 50,
          maxExportBatchSize: 25,
          scheduledDelayMillis: 5000,
          exportTimeoutMillis: 30000,
        },
      ),
    ]
  });

  provider.register({
    contextManager: new ZoneContextManager(),
  });

  const ignoreReg = new RegExp(`^(?!${origin}).*`);
  registerInstrumentations({
    instrumentations: [
      new XMLHttpRequestInstrumentation({
        ignoreUrls: [ignoreReg],
      }),
      new FetchInstrumentation({
        ignoreUrls: [ignoreReg],
      }),
    ],
  });