Press ⌘K anywhere to search

Checkout failed

Debug React Native checkout and payment failures that never throw a crash — structured logs, breadcrumbs, alerts

The user taps Pay. The card is declined. Your UI shows an error — but nothing lands in crash groups, so support only hears about it days later.

What to instrument

  1. trackScreen("Checkout") when the screen mounts
  2. Info log when checkout starts
  3. Error log (or TraceRN.error) when payment fails — with orderId and reason
  4. Keep auto breadcrumbs on so fetch / Pay tap appear in the trail
javascript
TraceRN.trackScreen("Checkout");
TraceRN.log("checkout.started", { cartSize: items.length, totalCents });

try {
  await pay(orderId);
  TraceRN.log("order.confirmed", { orderId });
} catch (err) {
  TraceRN.error(err instanceof Error ? err : new Error("payment.failed"), {
    event: "payment.failed",
    orderId,
    reason: "card_declined",
  });
  showToast("Payment failed");
}

What you see in TraceRN

  1. Search payment.failed (or the orderId) in the log viewer
  2. Open breadcrumbs for screens + network before the failure
  3. Optional: alert when volume spikes

Related

What to log · Custom logs · Breadcrumbs

Last updated · TraceRN docs