Practice Exercise 04

Observability & Telemetry Diagnosis

Learn how to bridge the gap between "test failure" and "root cause" by injecting trace context into your automated requests.

1

The Objective

You will configure a Playwright test to inject a Trace Correlation ID into its request headers. This is the foundational step for Observability-Driven Development (ODD), allowing SREs to link your test execution to backend microservice traces.

2

Injecting Trace Headers

Update your playwright.config.ts or individual test to include custom headers. In a real-world scenario, you would use a standard like W3C Trace Context (traceparent).

playwright.config.ts
import { defineConfig } from '@playwright/test';
import { v4 as uuidv4 } from 'uuid';

export default defineConfig({
  use: {
    extraHTTPHeaders: {
      // Custom header for correlation
      'X-Resync-Test-ID': `bootcamp-run-${uuidv4()}`,
      // Standard W3C Trace Context (simulated)
      'traceparent': '00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01',
    },
  },
});
3

The "Failed" Diagnostic Test

Write a test that intentionally hits a failing endpoint, then logs the Correlation ID so a Senior Engineer can find it in the "Production" logs.

tests/observability.spec.ts
import { test, expect } from '@playwright/test';

test('diagnose backend failure via trace ID', async ({ request }) => {
  const response = await request.get('https://httpbin.org/status/500');
  
  if (response.status() === 500) {
    const traceId = response.headers()['X-Resync-Test-ID'] || 'Check Config';
    console.log(`[CRITICAL] Backend failure detected.`);
    console.log(`[DIAGNOSTIC] Search logs for Correlation ID: ${traceId}`);
  }
  
  expect(response.status()).toBe(200);
});
4

Verify the Signal

Run the test and observe the output. In a real 2026 environment, your CI pipeline would automatically turn that Correlation ID into a clickable link to your tracing tool (e.g., Honeycomb or Jaeger).

Terminal
npx playwright test tests/observability.spec.ts