React Native 中如何处理错误和异常？

推荐答案

在 React Native 中，处理错误和异常通常可以通过以下几种方式：

1. 使用 try-catch 语句：在 JavaScript 代码中，可以使用 try-catch 语句来捕获同步代码中的错误。

   try {
     // 可能会抛出错误的代码
   } catch (error) {
     console.error('捕获到错误:', error);
   }

2. 使用 Error Boundaries：React 16 引入了 Error Boundaries，可以捕获组件树中的 JavaScript 错误，并显示备用 UI。

   // www.javascriptcn.com code example
   class ErrorBoundary extends React.Component {
     constructor(props) {
       super(props);
       this.state = { hasError: false };
     }
   
     static getDerivedStateFromError(error) {
       return { hasError: true };
     }
   
     componentDidCatch(error, errorInfo) {
       console.error('ErrorBoundary 捕获到错误:', error, errorInfo);
     }
   
     render() {
       if (this.state.hasError) {
         return <Text>Something went wrong.</Text>;
       }
   
       return this.props.children;
     }
   }

3. 使用 Promise.catch：对于异步操作，可以使用 Promise.catch 来捕获错误。

   fetch('https://example.com/data')
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error('捕获到异步错误:', error));

4. 使用 React Native 的全局错误处理：可以通过 ErrorUtils.setGlobalHandler 来设置全局错误处理器。

   ErrorUtils.setGlobalHandler((error, isFatal) => {
     console.error('全局错误处理器捕获到错误:', error, isFatal);
   });

本题详细解读

try-catch 语句

try-catch 是 JavaScript 中处理同步错误的常见方式。它允许你尝试执行一段代码，并在发生错误时捕获并处理该错误。这种方式适用于同步代码块，但不适用于异步代码。

Error Boundaries

Error Boundaries 是 React 提供的一种机制，用于捕获组件树中的 JavaScript 错误，并防止整个应用崩溃。它通过 componentDidCatch 生命周期方法来捕获错误，并允许你显示一个备用 UI。Error Boundaries 只能捕获其子组件树中的错误，不能捕获事件处理器、异步代码或服务端渲染中的错误。

Promise.catch

对于异步操作，如网络请求或定时器，可以使用 Promise.catch 来捕获错误。这种方式适用于处理异步代码中的错误，确保在发生错误时能够进行适当的处理。

React Native 的全局错误处理

React Native 提供了 ErrorUtils.setGlobalHandler 方法，允许你设置一个全局错误处理器。这个处理器会捕获应用中未处理的错误，包括同步和异步错误。通过这种方式，你可以集中处理所有未捕获的错误，并进行日志记录或错误上报。

通过结合这些方法，你可以在 React Native 应用中有效地处理错误和异常，确保应用的稳定性和用户体验。