Optimizing Sentry Logging for React Native with Seer
Detailed tips for structured logging so Seer can triage issues in your React Native TypeScript app
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:
- Pinpoint root causes with rich context.
- Align logs with traces and errors.
- 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
- Development: rich
react-native-logs
output and file persistence. - Release: structured Sentry logs with breadcrumbs and tags.
- 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.