# Debug 'Undefined Is Not an Object' in React Native

> Use Sentry Logs in React Native and your backend to debug undefined properties, pinpoint timing bugs vs data issues, and verify your fix.

**URL:** https://sentry.io/cookbook/debug-undefined-react-native/

---

Use Sentry Logs from both your React Native app and backend to tell whether an undefined property is a first-render timing issue or actually missing from the API response — no more guessing.

**Time:** 15-20 minutes | **Difficulty:** Intermediate

## What You'll Learn

- Connected frontend crashes to backend API responses

- Distinguished timing issues from data issues

- Used distributed tracing to correlate logs across services

- Verified fixes with Session Replay and traces

**Topics:** Logs, Session Replay, Tracing, Issues

**SDKs:** React Native, Node.js

## Steps

### 1. Make sure logs are flowing into Sentry

This walkthrough assumes a React Native mobile app, a backend API, and Sentry SDKs already installed for both. Make sure you are logging the API response payload on the backend and the relevant data on the frontend right before you access the property that is throwing the error. You can verify logs are flowing by checking your [Logs Explorer](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/).

### 2. Open the issue and inspect the stack trace

In Sentry, go to [Issues](https://sentry.io/orgredirect/organizations/:orgslug/issues/) for your React Native project and open the issue containing the `Cannot read property of undefined` error. In the Event view, scroll to the Stack Trace and identify the exact line where you access the undefined property. From the stack trace alone, you cannot tell if the property is only undefined during first render or truly missing from your backend.

### 3. Scroll to the Logs section and expand the feed

Stay on the same Issue and Event page. Scroll down until you see the **Logs** section and click **View more**. This opens the full log stream captured during the same session as the crash. Because Sentry connects logs to issues, traces, and Session Replay, you get a single timeline that includes logs from both your React Native app and your backend. You can also explore all logs in the [Logs Explorer](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/).

### 4. Find the API logs from the backend

In the expanded logs view, scan the feed for your API endpoint. Locate the log line where you printed the response values returned from the backend. Confirm this log entry is tagged as coming from the backend service. You should now see exactly what your backend sent in the same request that led to the crash. Use the [Logs Explorer](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) to filter by service or endpoint.

### 5. Compare frontend vs backend logs to identify the issue

Use the combined logs in the [Logs Explorer](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) to decide:

### 6. Fix the data contract and redeploy

Once logs confirm the property is truly undefined from the backend: Update your API handler to always return a safe default value instead of undefined. Optionally adjust your types or validation so the property cannot be undefined. Add or update backend logs to clearly show the final values returned on each request.

### 7. Re-run the flow and verify with logs, traces, and replay

Redeploy your backend and repeat the same user flow that previously crashed. In Sentry, confirm the original issue stops reproducing in [Issues](https://sentry.io/orgredirect/organizations/:orgslug/issues/). Check the [Logs Explorer](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) to verify the API response now shows valid values. Jump to the [Trace Explorer](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/) to see which spans were active, or watch a [Session Replay](https://sentry.io/orgredirect/organizations/:orgslug/explore/replays/) to see exactly what the user did before and after the fix.

## FAQ

**What's the difference between logs and error tracking in Sentry?**

Error tracking captures exceptions and crashes automatically, while logs let you add custom context at any point in your code. Logs help you understand application state before, during, and after errors occur—giving you the 'why' behind the 'what'.

**Do I need to install separate SDKs for frontend and backend logging?**

Yes, you'll need the appropriate Sentry SDK for each platform (e.g., `@sentry/react-native` for your mobile app and `@sentry/node` for your backend). However, Sentry automatically correlates logs across services using distributed tracing.

**How much does logging add to my Sentry bill?**

Logs are billed separately from errors and transactions. Check Sentry's pricing page for current rates. You can control costs by adjusting log levels and sampling rates in your SDK configuration.

**Can I search and filter logs in Sentry?**

Yes, Sentry's Log Explorer lets you search logs by message content, filter by attributes (like user ID or endpoint), and correlate logs with specific issues, traces, or Session Replays.

---

*Source: [sentry.io/cookbook/debug-undefined-react-native/](https://sentry.io/cookbook/debug-undefined-react-native/)*