reactjs - ErrorBoundary 没有捕获导入函数抛出的错误

Question

我有一个包含在错误边界中的组件，当单击按钮时 validate()函数被调用，如果没有提供信息，这个函数会抛出一个错误，但是 ErrorBoundary没有捕捉到这个错误。

组件上的渲染功能

return (
    <ErrorBoundary>
        ...
        <Playlist
            ...
            onClick={this.addPlaylistToSpotify}    // this function can throw an error
            ...
        />
    </ErrorBoundary>
);

有错误的函数

addPlaylistToSpotify = () => {
    try {
      addPlaylist(this.state.newPlaylist);    // this function throws an error on validate()
    } catch (error) {
      throw new Error(error);
    }
   ...
  };

误差边界分量

import React, { Component } from "react";
import { ErrorOverlay } from "../../components/index";

import styles from "./ErrorBoundary.css";

export class ErrorBoundary extends Component {
    constructor(props) {
        super(props);

        this.state = {
            hasError: false,
            error: null,
            errorInfo: ""
        };
    }

    componentDidCatch(error, errorInfo) {
        this.setState({
            hasError: true,
            error: error,
            errorInfo: errorInfo
        });

        // TODO: log the error somewhere in the db
    }

    dismiss() {
        this.setState({
            hasError: false,
            error: null,
            errorInfo: ""
        });
    }

    render() {
        if (this.state.hasError) {
            return (
                <ErrorOverlay message={this.state.errorInfo} dismiss={this.dismiss} />
            );
        } else {
            return this.props.children;
        }
    }
}

任何帮助将不胜感激，谢谢!
任何帮助将不胜感激。谢谢!

Answer 1

来自 React 文档

https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers

Note

Error boundaries do not catch errors for:

• Event handlers
• Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
• Server-side rendering
• Errors thrown in the error boundary itself (rather than its children)

在您的代码中，错误是从事件处理程序 (addPlaylistToSpotify) 抛出的，因此 componentDidCatch 无法捕获错误。因此，您需要执行以下操作:

import React from 'react';

export class Playlist extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      error: false
      // ...
    }
  }

  addPlaylistToSpotify = () => {
    try {
      // Something throws an error here.
    } catch (error) {
      this.setState({ error: true });
    }
  }

  render() {
    if (this.state.error) {
      throw new Error('I crashed!');
    }

    return (
      <div>
        ...
        <button onClick={this.addPlaylistToSpotify}>Add song</button>
        ...
      </div>
    )
  }
}

我希望这有帮助。