sentry-expo / @sentry/react-native

npx expo install @sentry/react-native
npx @sentry/wizard@latest -i reactNative

{
  "dependencies": {
    "@sentry/react-native": "^6.0.0",
    "expo": "~57.0.4",
    "react": "19.2.3",
    "react-native": "0.86.0"
  }
}

// app/_layout.tsx - must run before other imports' side effects
import * as Sentry from "@sentry/react-native";
import { Stack } from "expo-router";
import * as Application from "expo-application";
import * as Updates from "expo-updates";
 
const nativeVersion = Application.nativeApplicationVersion ?? "0.0.0";
const buildNumber = Application.nativeBuildVersion ?? "0";
const release = `${nativeVersion}+${buildNumber}`;
const dist = Updates.updateId ?? buildNumber;
 
Sentry.init({
  dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,
  environment: process.env.EXPO_PUBLIC_APP_ENV ?? "development",
  release,
  dist,
  enableAutoSessionTracking: true,
  tracesSampleRate: 0.2,
  attachStacktrace: true,
  beforeSend(event) {
    if (event.user?.email) delete event.user.email;
    return event;
  },
});
 
function RootLayout() {
  return <Stack />;
}
 
export default Sentry.wrap(RootLayout);

// eas.json excerpt
{
  "build": {
    "production": {
      "env": {
        "SENTRY_AUTH_TOKEN": "@sentry-auth-token",
        "SENTRY_ORG": "your-org",
        "SENTRY_PROJECT": "your-rn-app"
      }
    }
  }
}

# Wizard hooks upload Hermes source maps after EAS Build
eas build --platform all --profile production

# .env.local (not committed)
EXPO_PUBLIC_SENTRY_DSN=https://xxx@o000.ingest.sentry.io/000
EXPO_PUBLIC_APP_ENV=development

// eas.json - per-profile environments
{
  "build": {
    "preview": {
      "env": { "EXPO_PUBLIC_APP_ENV": "preview" }
    },
    "production": {
      "env": { "EXPO_PUBLIC_APP_ENV": "production" }
    }
  }
}

// app/_layout.tsx - full bootstrap with route breadcrumbs
import * as Sentry from "@sentry/react-native";
import { Stack, usePathname } from "expo-router";
import * as Application from "expo-application";
import * as Updates from "expo-updates";
import { useEffect } from "react";
 
const release = `${Application.nativeApplicationVersion}+${Application.nativeBuildVersion}`;
const dist = Updates.updateId ?? Application.nativeBuildVersion ?? "0";
 
Sentry.init({
  dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,
  environment: process.env.EXPO_PUBLIC_APP_ENV ?? "development",
  release,
  dist,
  enableAutoSessionTracking: true,
  tracesSampleRate: __DEV__ ? 1.0 : 0.2,
});
 
function useSentryRouteBreadcrumb() {
  const pathname = usePathname();
  useEffect(() => {
    Sentry.addBreadcrumb({ category: "navigation", message: pathname, level: "info" });
    Sentry.setTag("route", pathname);
  }, [pathname]);
}
 
function RootLayout() {
  useSentryRouteBreadcrumb();
  return <Stack />;
}
 
export default Sentry.wrap(RootLayout);

// components/ErrorFallback.tsx - boundary reports to Sentry
import * as Sentry from "@sentry/react-native";
import { Component, type ReactNode } from "react";
import { Pressable, Text, View } from "react-native";
 
type Props = { children: ReactNode };
type State = { hasError: boolean };
 
export class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false };
 
  static getDerivedStateFromError() {
    return { hasError: true };
  }
 
  componentDidCatch(error: Error, info: { componentStack?: string | null }) {
    Sentry.captureException(error, { extra: { componentStack: info.componentStack } });
  }
 
  render() {
    if (this.state.hasError) {
      return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text>Something went wrong.</Text>
          <Pressable onPress={() => this.setState({ hasError: false })}>
            <Text>Try again</Text>
          </Pressable>
        </View>
      );
    }
    return this.props.children;
  }
}

// lib/sentryFetch.ts - HTTP breadcrumbs without raw tokens
import * as Sentry from "@sentry/react-native";
 
export async function sentryFetch(input: RequestInfo, init?: RequestInit) {
  const start = Date.now();
  const url = typeof input === "string" ? input : input.url;
 
  try {
    const res = await fetch(input, init);
    Sentry.addBreadcrumb({
      category: "http",
      message: `${init?.method ?? "GET"} ${url}`,
      data: { status: res.status, durationMs: Date.now() - start },
      level: res.ok ? "info" : "warning",
    });
    return res;
  } catch (err) {
    Sentry.addBreadcrumb({
      category: "http",
      message: `${init?.method ?? "GET"} ${url} failed`,
      level: "error",
    });
    throw err;
  }
}

eas build (production)
  → Metro bundles with Sentry plugin
  → Native compile (iOS dSYM, Android symbols)
  → Post-build: upload source maps (wizard hook)
  → Store binary + symbolicated JS stacks in Sentry

import * as Sentry from "@sentry/react-native";
 
export function setSentryUser(userId: string) {
  Sentry.setUser({ id: userId }); // never set email or PII without redaction
}
 
export function clearSentryUser() {
  Sentry.setUser(null);
}