反应错误边界不适用于反应 [英] React Error Boundaries not working with React

问题描述

这是我的错误边界文件 -

class ErrorHandling 扩展组件 {状态 = { hasError: false }componentDidCatch() {this.setState({ hasError: true })}使成为() {//调试器如果(this.state.hasError){返回<div>组件中的错误</div>}返回 this.props.children}}

另一个文件是 -

import React, { Component } from 'react';//我特意在 'd' 下面添加了语法错误功能中间(道具){返回<h1>hi</h1>d}导出默认中级

在我的 App.js 中

<中级/></错误处理>

它导致应用程序在没有捕获错误的情况下中断.这是在浏览器屏幕上看到的错误

这里有更详细的版本-

This is my Error Boundary file -

class ErrorHandling extends Component {
    state = { hasError: false }

    componentDidCatch() {
        this.setState({ hasError: true })
    }

    render() {
        // debugger
        if (this.state.hasError) {
            return <div>Error in Component</div>
        }
        return this.props.children
    }
}

And the other file is -

import React, { Component } from 'react';

// Intentionally I have added syntax error below 'd'

function Intermediate(props) {
    return <h1>hi</h1>;d
}
export default Intermediate

And in my App.js

<ErrorHandling>
  <Intermediate />
</ErrorHandling>

It is causing the application to break without catching the error. Here is the error is seen on the browser screen

The more detailed version here- https://codepen.io/meghana1991/pen/abojydj?editors=0010

When I use the same code in my local with multiple files as above listed, it doesn't work

解决方案

You can't catch compile-time errors, the Error Boundaries are for run-time errors within the UI.

Refer to Compile time vs run time errors.

Moreover, you have to use getDerivedStateFromError in order to add additional render on fall back UI:

class ErrorBoundary extends React.Component {
  state = {
    hasError: false,
    error: { message: '', stack: '' },
    info: { componentStack: '' }
  };

  static getDerivedStateFromError = error => {
    return { hasError: true };
  };

  componentDidCatch = (error, info) => {
    this.setState({ error, info });
  };

  render() {
    const { hasError, error, info } = this.state;
    const { children } = this.props;

    return hasError ? <ErrorComponent/> : children;
  }
}

For checking your ErrorBoundary, throw an error from a reachable section in the component tree which is not:

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

const ButtonComponent = () => {
  throw Error("error!");
  return <></>;
};

Note: In development env you will always see the error overlay unless you turn it off or close it with the X button.

---

Full example:

const ErrorComponent = () => {
  return <h1>Something went wrong</h1>;
};

class ErrorBoundary extends React.Component {
  state = {
    hasError: false,
    error: { message: "", stack: "" },
    info: { componentStack: "" }
  };

  static getDerivedStateFromError = error => {
    return { hasError: true };
  };

  componentDidCatch = (error, info) => {
    this.setState({ error, info });
  };

  render() {
    const { hasError, error, info } = this.state;
    console.log(error, info);
    const { children } = this.props;

    return hasError ? <ErrorComponent /> : children;
  }
}

const ButtonComponent = () => {
  throw Error("error!");
  return <></>;
};

const App = () => {
  return (
    <ErrorBoundary>
      <ButtonComponent />
    </ErrorBoundary>
  );
};

这篇关于反应错误边界不适用于反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！