TraceRN

Press ⌘K anywhere to search

Blank or stuck

Fix blank screens and stuck spinners in React Native with screen trails, load budgets, and TraceRN warns

The feed never loads. The spinner spins. There is no crash — the user force-quits and leaves a one-star review.

What to instrument

  1. trackScreen on every route change
  2. Info when a screen starts loading data
  3. Warn if loading exceeds a budget (e.g. 8s)
  4. Error if the request fails or returns empty when it should not
javascript
TraceRN.trackScreen("Home");
TraceRN.log("feed.load_started", { screen: "Home" });

const started = Date.now();
const data = await fetchFeed();

if (Date.now() - started > 8000) {
  TraceRN.warn("feed.load_slow", { ms: Date.now() - started, screen: "Home" });
}

if (!data?.items?.length) {
  TraceRN.warn("list.empty", { screen: "Home", source: "feed" });
}

If a render path can hang after a partial state update, also log ui.stuck_suspected from a timeout watchdog.

What you see in TraceRN

  1. Filter by screen: Home or feed.load_slow in the log viewer
  2. Breadcrumbs show navigation into Home and the slow or failed fetch
  3. Pair with slow or offline if fetches routinely exceed thresholds

Related

Breadcrumbs · What to log · Log viewer

Last updated · TraceRN docs