Optimizing Sentry Logging for React Native with Seer

Detailed tips for structured logging so Seer can triage issues in your React Native TypeScript app

Engineering ExecutionProduction Support

Sentry's Seer assistant surfaces the most actionable issues when your app logs rich context. The instructions below combine the official Sentry wizard steps with structured logging techniques so Seer can deliver precise insights.

1. 📦 Install & Initialize Sentry

Use the Sentry Wizard to configure your project:

npx @sentry/wizard@latest -i reactNative

This installs @sentry/react-native, updates Metro config, and sets up source map upload scripts.

Initialize Sentry early in App.tsx:

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

Sentry.init({
  dsn: "__YOUR_DSN__",
  enableNative: true,
  sendDefaultPii: true,
  tracesSampleRate: 0.2,
  profilesSampleRate: 0.1,
  _experiments: { enableLogs: true }
});

export default Sentry.wrap(App);

Wrapping the root component enables automatic touch and navigation instrumentation.

2. ⚙️ Use Sentry's Structured Logger

Structured logs are queryable and help Seer correlate events:

const { trace, debug, info, warn, error, fatal, fmt } = Sentry.logger;
info(fmt`User logged in: ${userId}`);
warn("Rate limit near", { endpoint, limit });
error("Payment failed", { orderId, amount });

3. 📍 Add Breadcrumbs & Context

Breadcrumbs

Sentry.addBreadcrumb({
  category: "navigation",
  message: `Navigated to ${screenName}`,
  level: Sentry.Severity.Info
});

Rich Context & Scopes

Create a helper to log with context:

export function logStructured(
  level: Sentry.Severity,
  message: string,
  contextName: string,
  info: Record<string, unknown>
) {
  Sentry.withScope(scope => {
    scope.setLevel(level);
    scope.setTag("context", contextName);
    scope.setExtras(info);
    Sentry.captureMessage(message);
  });
}

logStructured(Sentry.Severity.Error, "Payment flow failed", "Checkout", { orderId, cartSize });

4. 🔍 Integrate react-native-logs for Enhanced Debugging

import { logger, consoleTransport, fileAsyncTransport } from "react-native-logs";
import * as FileSystem from "expo-file-system";

const log = logger.createLogger({
  severity: "debug",
  transport: consoleTransport,
  transportOptions: { colors: { info: "blue", warn: "yellow", error: "red" } },
  async storage: fileAsyncTransport({
    fs: FileSystem,
    fileName: "app.log",
    maxSize: 5 * 1024 * 1024,
    maxFiles: 3
  })
});

Use log.info(), log.warn(), and log.error() in development. Logs persist locally for troubleshooting.

5. 🧩 Combine Console, Sentry & File Logs

  • Use react-native-logs while iterating locally.
  • Switch to Sentry.logger with breadcrumbs in release builds.
  • Optionally persist logs to files for offline analysis.

6. 🧠 Feedback Loop for Seer

Structured logs, breadcrumbs, tracing, and profiling work together so Seer can:

  1. Pinpoint root causes with rich context.
  2. Align logs with traces and errors.
  3. Suggest fixes or missing tests based on patterns.

✅ Quick Reference Checklist

| Step | Purpose | | --- | --- | | Sentry.init(..._experiments.enableLogs) | Enables structured logs | | Sentry.logger methods | Structured, queryable logs | | Sentry.addBreadcrumb() | Tracks important app events | | Sentry.withScope() | Scoped context & tagging | | react-native-logs | Enhanced dev & file logging | | wrap(App) | Instruments UI for tracing |

🛠 Tips & Best Practices

  • Sample traces and profiles carefully to stay within quota.
  • Avoid log flooding, especially debug level in production.
  • Tag context thoughtfully (e.g., feature, user type).
  • Upload source maps for readable stack traces.
  • Scrub sensitive PII before logging.
  • Test on real devices so native crashes and breadcrumbs are captured.

🎯 Where It All Comes Together

  1. Development: rich react-native-logs output and file persistence.
  2. Release: structured Sentry logs with breadcrumbs and tags.
  3. Seer: correlates errors, logs, traces, and context to propose fixes.

By following this structured logging approach, you'll harness the full power of Sentry and Seer—gaining better insights, faster debugging, and actionable suggestions.