Skip to main content

Debugging React Native Crashes with Firebase Crashlytics

Overview​

This guide outlines the step-by-step process for debugging JavaScript exceptions in React Native applications using Firebase Crashlytics. We'll focus on two main debugging approaches.

Understanding Crash Reports​

Key Components of a Crash Report​

  1. Stack Trace: Contains detailed crash information including:

    • Exception type (e.g., com.facebook.react.common.JavascriptException)
    • Error message
    • Component hierarchy
    • Line numbers and locations

  2. Logs & Events: Shows user actions leading up to the crash

    • User interactions
    • App state changes
    • Navigation flow

Debugging Methods​

Method 1: User Journey Recreation​

  1. Open the crash report in Firebase Crashlytics dashboard
  2. Navigate to "Logs & Events" tab
  3. Review the sequence of user actions before the crash
  4. Attempt to reproduce the crash locally by following the same steps
  5. Use the stack trace to identify the component where the crash occurred

Method 2: Production Bundle Analysis​

  1. Obtain Production Bundle

    • Download the production APK
    • Change file extension from .apk to .zip
    • Extract the zip file
    • Navigate to extracted_folder/assets/
    • Locate index.android.bundle file

  2. Stack Trace Analysis

    • Locate the line number reference in stack trace (e.g., @28:89)
    • Format: @lineNumber:characterPosition
    • Example: @28:89 means line 28, character 89

  3. Code Investigation

    • Open index.android.bundle in VS Code
    • Use "Go to Line" feature (Ctrl/Cmd + G)
    • Enter the line number format: 28:89
    • Examine code around this location
    • Look for similar patterns in your source code

Example Crash Analysis​

App Screenshot

Sample Stack Trace​

Fatal Exception: com.facebook.react.common.JavascriptException: 
TypeError: undefined is not an object (evaluating 'o[Symbol.iterator]')
This error is located at:
    in E
    in t
    in Unknown
    [... component hierarchy ...]
    in RNCSafeAreaProvider
    stack:
    <unknown>@28:89
    <unknown>@25:109
    [... stack frames ...]

Analysis Steps​

  1. Note the error type: TypeError for undefined object
  2. Locate crash position: @28:89
  3. Review component hierarchy for context
  4. Check bundle file at line 28, character 89
  5. Look for iterator usage in corresponding source code

Best Practices​

When Analyzing Stack Traces​

  1. Always check the complete component hierarchy
  2. Note any patterns in component names
  3. Pay attention to error types and messages
  4. Look for recurring line numbers or patterns

When Reviewing Logs​

  1. Focus on events immediately before crash
  2. Note any unusual patterns or sequences
  3. Document reproducible steps
  4. Check for environment-specific conditions

Common Pitfalls to Avoid​

  1. Overlooking Context

    • Don't focus only on line numbers
    • Consider the full component hierarchy
    • Review complete error message

  2. Incomplete Analysis

    • Always check both logs and stack trace
    • Don't ignore user journey
    • Consider different device conditions

Resolution Steps​

  1. After Identifying the Issue

    • Document the root cause
    • Create a reproducible test case
    • Implement and test fix
    • Verify in similar scenarios

  2. Verification

    • Test on multiple devices
    • Verify in production bundle
    • Monitor crash reports after deployment