Breadcrumbs

Auto trails, trackScreen, Navigation and Expo Router

Breadcrumbs are a short trail of what happened before an error. They are kept in memory and attached only to error events.

Automatic

With enableAutoBreadcrumbs: true (default):

Each log / warn / error call is recorded as a breadcrumb
fetch calls become http breadcrumbs (enableNetworkBreadcrumbs)
AppState changes become state breadcrumbs (enableAppStateBreadcrumbs)

typescript

TraceRN.init({
  apiKey: "trn_live_xxx",
  enableAutoBreadcrumbs: true,
  enableNetworkBreadcrumbs: true,
  enableAppStateBreadcrumbs: true,
  maxBreadcrumbs: 50,
});

Manual

typescript

TraceRN.addBreadcrumb({
  category: "user",
  message: "Tapped Pay",
  data: { screen: "Checkout" },
});

React Navigation

typescript

import { NavigationContainer, createNavigationContainerRef } from "@react-navigation/native";
import { TraceRN } from "tracern-sdk";

export const navigationRef = createNavigationContainerRef();

export function AppNav() {
  return (
    <NavigationContainer
      ref={navigationRef}
      onStateChange={() => {
        const route = navigationRef.getCurrentRoute();
        if (route?.name) TraceRN.trackScreen(route.name);
      }}
    >
      {/* stacks */}
    </NavigationContainer>
  );
}

Expo Router

typescript

import { usePathname } from "expo-router";
import { useEffect } from "react";
import { TraceRN } from "tracern-sdk";

export function useTraceRNScreens() {
  const pathname = usePathname();
  useEffect(() => {
    if (pathname) TraceRN.trackScreen(pathname);
  }, [pathname]);
}

Call useTraceRNScreens() once from your root layout.

Playbook: Blank or stuck — use screen trails when there is no crash.

Last updated · TraceRN docs