如何将OpenTelemetry自动生成的所有Span关联到手动创建的父Span

问题场景 #

已为前端应用配置OpenTelemetry埋点，核心代码如下：

const resource = new Resource({
  [SemanticResourceAttributes.SERVICE_NAME]: 'frontend_app',
});
const provider = new WebTracerProvider({
  resource,
});
const exporter = new OTLPTraceExporter();

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

export const tracer = provider.getTracer('fe-tracer');

registerInstrumentations({
  instrumentations: [
    getWebAutoInstrumentations({
      "@opentelemetry/instrumentation-xml-http-request": {
        propagateTraceHeaderCorsUrls: [/.+/g],
      },
      "@opentelemetry/instrumentation-fetch": {
        propagateTraceHeaderCorsUrls: [/.+/g],
      },
    }),
  ],
});

在Cypress测试中手动创建Span：

const activeSpan = tracer.startSpan(
  Cypress.mocha.getRunner().suite.ctx.currentTest.fullTitle()
);

测试结束后调用activeSpan.end()结束Span，但Jaeger中手动Span与自动生成的Span分属不同链路，尝试trace.setSpan(context.active(), activeSpan)无效。

问题原因 #

Cypress的测试运行环境与前端应用的ZoneContextManager上下文相互隔离，手动设置的上下文无法渗透到应用代码运行的Zone中。自动埋点的Span会在应用自身的Zone上下文生成，导致无法关联到手动创建的Span。

解决方法 #

需要确保测试中应用的所有操作都运行在手动Span的上下文中，结合OpenTelemetry的context.with方法包裹测试逻辑，让自动生成的Span继承手动Span的上下文：

修改后的测试代码 #

import { trace, context } from '@opentelemetry/api';
import { tracer } from './path-to-your-tracer-file';

describe('Your Test Suite', () => {
  let activeSpan;

  beforeEach(() => {
    // 创建手动Span
    activeSpan = tracer.startSpan(
      Cypress.mocha.getRunner().suite.ctx.currentTest.fullTitle()
    );
    // 将手动Span设置到当前上下文
    const activeContext = trace.setSpan(context.active(), activeSpan);

    // 用context.with包裹测试逻辑，确保后续操作继承该上下文
    context.with(activeContext, () => {
      // 触发应用初始化/访问操作，让应用代码在该上下文运行
      cy.visit('/');
    });
  });

  afterEach(() => {
    // 测试结束后结束Span
    activeSpan.end();
  });

  it('Your test case', () => {
    // 这里的Cypress命令会继承之前设置的上下文，自动生成的Span会成为手动Span的子Span
    cy.get('[data-testid="your-element"]').click();
    // ...其他测试步骤
  });
});

额外注意事项 #

• 确保@opentelemetry/api已正确安装并导入，context和trace对象要从api包中获取
• Cypress的命令是异步队列执行的，必须将初始化操作（如cy.visit）放在context.with内部，确保应用启动时就处于目标上下文
• 如果测试中有多个异步操作，所有涉及应用交互的命令都应在context.with的作用域内，或确保上下文已正确传递

内容的提问来源于stack exchange，提问作者KristijanS99