React `componentDidCatch` 未被调用但需要处理错误？

Question

我正在尝试使用 React 的 componentDidCatch 方法来捕获导致我的 Cordova iOS 应用程序崩溃的错误。它似乎可以防止崩溃，但该方法从未被调用，所以我不知道是什么导致了问题。

我的组件：

import styled from 'styled-components';
import { View, observable } from 'shared/View';
import { Player } from 'video-react';
import SpinnerOverlay from 'shared/components/SpinnerOverlay';
import * as Icons from 'shared/components/Icons';
import fs from 'fileSystem';

export default class VideoOverlay extends View {
  @observable ready = false;

  handlePlayerStateChange = (state, prevState) => {
    const { onClose } = this.props;

    if(state.paused && !prevState.paused && onClose) {
      try {
        onClose();
      } catch(error) {
        console.log('--- onClose error', error);
      }
    }
  };

  handlePlayerRef = (player) => {
    player.subscribeToStateChange(this.handlePlayerStateChange);
    player.play();
  };

  async componentDidMount() {
    try {
      const { mediaFile } = this.props;
      await mediaFile.download(fs);
      this.ready = true;
    } catch(error) {
      console.log('--- SHIT', error);
    }
  }

  componentDidCatch(error) {
    // Needed because `Player` throws an error when unmounting.
    // This method doesn't get called (not sure why), but without this method,
    // the app crashes when a video is closed.
    console.log('Caught', error);
  }

  render() {
    const { ready } = this;
    const { mediaFile } = this.props;
    const src = ready && mediaFile.fileSrc;

    return (
      <React.Fragment>
        <SpinnerOverlay visible/>
        {ready &&
          <Player ref={this.handlePlayerRef}>
            <source src={src}/>
          </Player>
        }
      </React.Fragment>
    );
  }
}

组件工作正常，但卸载时始终抛出此错误：

2018-02-22 12:52:19.706530-0800 App[1094:598984] ERROR: The above error occurred in the <Player> component:
    in Player (created by Component)
    in Component (created by Component)
    in div (created by Screen)
    in Screen (created by Component)
    in Component (created by inject-Component-with-store)
    in inject-Component-with-store (created by Route)
    in Route (created by Component)
    in Switch (created by Component)
    in Component (created by inject-Component-with-store)
    in inject-Component-with-store (created by Route)
    in Route (created by Component)
    in Component (created by Route)
    in Route (created by withRouter(Component))
    in withRouter(Component) (created by inject-withRouter(Component)-with-api)
    in inject-withRouter(Component)-with-api (created by Component)
    in Switch (created by Component)
    in div (created by App__Root)
    in App__Root (created by Component)
    in Component (created by Route)
    in Route (created by withRouter(Component))
    in withRouter(Component)
    in Router (created by HashRouter)
    in HashRouter
    in Provider

此错误出现在 XCode 控制台中，上面没有错误。 componentDidCatch 中的 console.log 永远不会运行。 componentDidMount 和 handlePlayerStateChange 中的 catch 块也永远不会到达。

最奇怪的是，如果我删除componentDidCatch，应用程序会因上述错误而崩溃，所以componentDidCatch 似乎在做某事；只是没有让我真正处理错误。

此外，我无法在浏览器中重现此问题，因为此组件仅适用于 iOS（此组件利用 iOS 自动全屏自动播放视频）。

Answer 1

问题是componentDidCatch 不会捕获事件处理程序错误，就像您的handlePlayerRef 方法中的处理程序会发生的错误一样。这是因为这些类型的错误不会在组件的渲染过程中发生，这正是didCatch 的预期目的。

例如，didCatch 不会正确捕获和记录这件事：

class MyComponent extends Component {
  componentDidCatch() {
    console.log('whats wrong?')
  }

  onButtonClick() {
    //errors emerging here
  }

  render() {
    return (
      <button onClick={this.onButtonClick}>Click</button>
    );
  }
}

如果您需要捕获此类错误，请使用 handlePlayerRef 中的常规 try/catch 块。

handlerPlayerRef() {
  try {
    player.subscribeToStateChange(this.handlePlayerStateChange);
    player.play();
  } catch () {
    console.error('Something wrong happened');
  }
}

此外，通常最好将组件渲染错误与组件功能分离，因为它往往会产生难以调试的神秘错误。

您是否尝试过构建一个 ErrorBoundary 组件来包裹您的 VideoOverlay 类？这样做并将其呈现条件为不存在错误：

class ErrorBoundary extends React.Component {
  componentDidCatch(err) {
    this.setState({
      hasError: true
    });
  }

  render() {
    return this.state.hasError 
      ?  <h2>Oh noes! Something went wrong.</h2>
      :  this.props.children
   }
}

现在您可以只提供 VideoOverlay 作为 ErrorBoundary 的子级：

<ErrorBoundary>
  <VideoOverlay />
</ErrorBoundary>

详细阅读here