Frontend observability that works

// app/layout.tsx or _app.tsx
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
import { registerInstrumentations } from '@opentelemetry/instrumentation';

const provider = new WebTracerProvider();
provider.register();

registerInstrumentations({
  instrumentations: [
    getWebAutoInstrumentations({
      '@opentelemetry/instrumentation-fetch': {},
      '@opentelemetry/instrumentation-xml-http-request': {},
    }),
  ],
});

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Track checkout flow performance
import { trace } from '@opentelemetry/api';

function CheckoutButton() {
  const handleCheckout = async () => {
    const tracer = trace.getTracer('checkout');
    const span = tracer.startSpan('checkout.initiated');

    span.setAttribute('cart.items', cartItems.length);
    span.setAttribute('cart.value', totalValue);
    span.setAttribute('user.segment', userSegment);

    try {
      await processPayment();
      span.setStatus({ code: SpanStatusCode.OK });
    } catch (error) {
      span.recordException(error);
      span.setStatus({ code: SpanStatusCode.ERROR });
    } finally {
      span.end();
    }
  };

  return <button onClick={handleCheckout}>Pay Now</button>;
}