React Native Android断网时崩溃问题排查求助

Hey there, let's break down this frustrating Android-only crash you're seeing when your app loses network access. I've debugged similar issues with network state listeners before, so here's what's likely going on and how to fix it:

What's Causing the Crash? #

The Crashlytics error undefined is not a function (evaluating 'n({type:e.connectionType,effectiveType:e.effectiveConnectionType})') tells us exactly what's wrong: when the network state changes (to offline, in this case), your app is trying to call a function n that doesn't exist anymore (or was never properly defined).

iOS is more forgiving with these kinds of dangling callbacks, but Android will crash immediately when it hits an undefined function call in a native-triggered event (like network state changes).

Step-by-Step Fixes #

1. Audit Your Network State Listener Setup #

If you're using @react-native-community/netinfo (the standard library for network state in RN 0.60+), make sure you're properly subscribing and unsubscribing to avoid dangling callbacks:

For Function Components:

import NetInfo from '@react-native-community/netinfo';
import { useEffect } from 'react';

function YourComponent() {
  const handleNetworkChange = (state) => {
    // Add guard clauses for Android-specific edge cases
    const connectionType = state.connectionType || 'none';
    const effectiveType = state.effectiveType || 'unknown';
    // Call your update function only if it's defined
    if (typeof updateNetworkStatus === 'function') {
      updateNetworkStatus({ type: connectionType, effectiveType });
    }
  };

  useEffect(() => {
    // Subscribe to network changes
    const unsubscribe = NetInfo.addEventListener(handleNetworkChange);
    
    // Critical: Unsubscribe when the component unmounts
    return () => unsubscribe();
  }, []);

  // ... rest of your component code
}

For Class Components:

import NetInfo from '@react-native-community/netinfo';

class YourComponent extends React.Component {
  componentDidMount() {
    // Use an arrow function or bind `this` to avoid undefined context
    this.unsubscribeNetInfo = NetInfo.addEventListener(this.handleNetworkChange);
  }

  componentWillUnmount() {
    // Always clean up the listener!
    this.unsubscribeNetInfo();
  }

  // Define handler as an arrow function to preserve `this` context
  handleNetworkChange = (state) => {
    const connectionType = state.connectionType || 'none';
    const effectiveType = state.effectiveType || 'unknown';
    
    if (this.updateNetworkStatus) {
      this.updateNetworkStatus({ type: connectionType, effectiveType });
    }
  };

  // ... rest of your component code
}

2. Fix Callback Context Issues #

The most common reason for undefined function calls here is incorrect this binding. Avoid using plain function expressions in your listener—stick to arrow functions, or explicitly bind your handler in the constructor.

❌ Bad:

NetInfo.addEventListener(function(state) {
  this.updateNetworkStatus(state); // `this` won't point to your component
});

✅ Good:

// Arrow function preserves context
NetInfo.addEventListener((state) => this.updateNetworkStatus(state));

// Or bind in constructor
constructor(props) {
  super(props);
  this.handleNetworkChange = this.handleNetworkChange.bind(this);
}

3. Handle Android-Specific Network State Values #

Android sometimes returns different network state values than iOS (e.g., effectiveType might be undefined when offline). Add guard clauses to ensure you're never passing undefined to your update function:

const safeState = {
  type: state.connectionType ?? 'none',
  effectiveType: state.effectiveType ?? 'unknown'
};
updateNetworkStatus(safeState);

4. Debug Locally for Full Context #

Crashlytics truncated your stack trace, so run react-native log-android in your terminal, then manually turn off network in your Android emulator/device. You'll get a full stack trace that points directly to the file and line where the undefined function is being called—this will speed up your debugging drastically.

Final Notes #

This crash almost always boils down to a dangling network listener (not cleaned up when the component unmounts) or a context/binding issue that leaves your callback function undefined. Follow the steps above, and you should have this fixed in no time.

内容的提问来源于stack exchange，提问作者Mayank Baiswar