Tracking and fixing checkout performance in React Native with Sentry tracing

import * as Sentry from "@sentry/react-native";

const navigationIntegration = Sentry.reactNavigationIntegration({
  enableTimeToInitialDisplay: true,
});

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [navigationIntegration],
  // Set to 1.0 for testing, lower in production
  tracesSampleRate: 1.0,
  // Include your Python backend so trace headers propagate
  tracePropagationTargets: ["localhost", "https://your-api.example.com"],
});

import * as Sentry from "@sentry/react-native";
import { useState, useEffect } from "react";

function CheckoutScreen() {
  const [products, setProducts] = useState(null);
  const allLoaded = products !== null;

  useEffect(() => {
    fetchProducts().then(setProducts);
  }, []);

  return (
    <View>
      <Sentry.TimeToFullDisplay record={allLoaded} />
      {allLoaded
        ? products.map((p) => <ProductItem key={p.id} product={p} />)
        : <LoadingSpinner />}
    </View>
  );
}

async function loadCatalog() {
  return Sentry.startSpan(
    {
      op: "checkout.catalog_load",
      name: "Initial Catalog Load",
    },
    async () => {
      const response = await fetch("https://your-api.example.com/api/v1/products");
      return response.json();
    }
  );
}

async function processCheckout(cart) {
  return Sentry.startSpan(
    {
      op: "checkout.process",
      name: "Process Checkout",
      attributes: {
        "cart.item_count": cart.items.length,
        "cart.total": cart.total,
      },
    },
    async () => {
      const response = await fetch("https://your-api.example.com/api/v1/checkout", {
        method: "POST",
        body: JSON.stringify(cart),
      });
      return response.json();
    }
  );
}