标签: react-error-boundary

这是我的错误边界文件 -

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
    }
}

另一个文件是-

import React, { Component } from 'react';

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

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

在我的 App.js 中

<ErrorHandling>
  <Intermediate />
</ErrorHandling>

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

更详细的版本在这里 - https://codepen.io/meghana1991/pen/abojydj?editors=0010

当我在本地使用与上面列出的多个文件相同的代码时，它不起作用

我正在使用react-error-boundary包来显示回退UI，以防应用程序抛出任何错误。该软件包对我来说效果很好。如果我使用浏览器后退按钮转到上一页，我需要了解如何重置应用程序错误状态，因为转到上一页还会显示回退 UI 而不是原始组件。无论如何我们可以渲染原始组件吗？

在下面的代码中，用户将在 Page2 上抛出错误，因为我将空对象作为 props 传递。在这种情况下，它将显示后备屏幕。如果我单击后退按钮，Page1 上仍然会显示我不想要的后备屏幕。

应用程序.js

const errorHandler = (error) =>{
      console.log(error)
}

<BrowserRouter basename={'/bookingtool/obt/'}>
     <ErrorBoundary FallbackComponent={Fallback} onError={errorHandler}>
          <Routes>
               <Route path="/page1" element={<Page1 PageName="Page1" />} />
               <Route path="/page2" element={<Page2 PageName={{}} /> } />
          </Routes>
    <ErrorBoundary />
</BrowserRouter>

Page1.js

import { useErrorHandler } from 'react-error-boundary';
const Page1 = ({PageName}) =>{
     return(<p>{PageName}</p>)
}

Page2.js

import { useErrorHandler } from 'react-error-boundary';
const Page2 = ({PageName}) =>{
     return(<p>{PageName}</p>)
}

回退.js

import React from "react";

const Fallback= (props) => {
    return(<h1>Something went …

我有这个组件：

import React, { lazy, Suspense } from 'react';
import { ErrorBoundary } from '../ErrorBoundary';

const FALLBACK = <svg aria-label="" data-testid="icon-fallback" viewBox="0 0 21 21" />;

const ERROR = (
    <svg data-testid="icon-notdef" viewBox="0 0 21 21">
        <path d="M0.5,0.5v20h20v-20H0.5z M9.1,10.5l-6.6,6.6V3.9L9.1,10.5z M3.9,2.5h13.2l-6.6,6.6L3.9,2.5z M10.5,11.9l6.6,6.6H3.9 L10.5,11.9z M11.9,10.5l6.6-6.6v13.2L11.9,10.5z" />
    </svg>
);

export const Icon = ({ ariaLabel, ariaHidden, name, size }) => {
    const LazyIcon = lazy(() => import(`../../assets/icons/${size}/${name}.svg`));
    return (
        <i aria-hidden={ ariaHidden }>
            <ErrorBoundary fallback={ ERROR }>
                <Suspense fallback={ FALLBACK }>
                    <LazyIcon aria-label={ …

这是我目前关于如何ErrorBoundary在 Typescript 中正确键入 React类组件的尝试：

import React from "react";
import ErrorPage from "./ErrorPage";
import type { Store } from "redux";   // I'M PASSING THE REDUX STORE AS A CUSTOM PROP

interface Props {
  store: Store         // THIS IS A CUSTOM PROP THAT I'M PASSING
}

interface State {      // IS THIS THE CORRECT TYPE FOR THE state ?
  hasError: boolean
}

class ErrorBoundary extends React.Component<Props,State> {
  
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error): …

我们App.js在 React 中有一个文件，我想添加一个包围大多数路由的错误边界。App.js 文件大致如下所示：

import { ErrorBoundary } from 'react-error-boundary';


function ErrorFallback({ error }) {
    return (
        <div role='alert'>
            <p>Something went wrong:</p>
            <pre style={{ color: 'red' }}>{error.message}</pre>
        </div>
    );
}

function App() {
    return (
        <React.Fragment>
            <Navbar />
            <Switch>
                <Route exact path='/page1' component={comp1} />
                <Route exact path='/page2' component={comp2} />
                <Route exact path='/page3' component={comp3} />
                <Route exact path='/page4' component={comp4} />
                <Route exact path='/page5' component={comp5} />
                <Route exact path='/page6' component={comp6} />
                <Route component={NoMatch} />
            </Switch>
            <Footer />
        <React.Fragment>
    )
} …

来自错误边界的反应文档：

React 16 会将渲染过程中发生的所有错误打印到开发中的控制台，即使应用程序不小心吞下了它们。

由于上述原因，我在运行测试时遇到了大量不必要的控制台错误。是否可以在 Jest 中隐藏这些内容，而无需嘲笑/监视 console.error？

我们正在应用程序中测试React 错误边界。目前，我们看到 React 错误边界间歇性地用以下内容掩盖错误：

“在你的一个组件中抛出了一个错误，但 React 不知道它是什么。这可能是由于浏览器不稳定造成的。React 尽力保留 DevTools 的“异常暂停”行为，这需要一些 DEV -mode only 技巧。这些可能在您的浏览器中不起作用。尝试在生产模式下触发错误，或切换到现代浏览器。如果您怀疑这实际上是 React 的问题，请提交问题。at对象.invokeGuardedCallbackImpl”

错误边界确实成功捕获了堆栈跟踪；但是，如果没有错误消息，我们只能了解失败原因的一半。

以前有人遇到过这种行为吗？或者对于使用 React 的错误边界捕获完整错误有什么建议吗？

我们期待的不是上面的错误消息，而是类似“无法读取未定义的属性（读取'toString'）”的错误消息。

环境

• 我们正在使用 React 16.12.0。
• 我们正在使用生产版本进行测试。

示例代码

export class ReactErrorBoundary extends React.Component<
  {},
  ReactErrorBoundaryState
> {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static contextType = CpqTelemetryContext;

  static getDerivedStateFromError(error: TypeError): ReactErrorBoundaryState {
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo): void {
    const telemetryProvider: ILoggerService = this.context;
    telemetryProvider.logException("App.ErrorBoundary", error, errorInfo);
  } …

下面链接的代码笔使用react-router错误边界来捕获每个路由中的错误。

如果您单击“商店”，则会按预期捕获错误，但其他链接将不再起作用。这里发生了什么？为什么react-router-dom看起来停止工作？执行此操作的“正确”方法是什么？是<ErrorBoundary>组件的问题，还是路由组件的包装方式的问题？

https://codepen.io/mpontus/pen/NyKNoL

如果 codepen 链接出现问题：

const { BrowserRouter, Switch, Route, NavLink } = ReactRouterDOM;

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  render() {
    if (this.state.hasError) {
      return <h1>An error has occured.</h1>;
    }

    return this.props.children;
  }
}

const HomeScreen = () => <h3>Home</h3>;

const ProfileScreen = () => <h3>Profile Screen</h3>;

const ShopScreen = () => {
  throw new Error("Error during …

我们正在尝试将react-error-boundary与react-router（v6）一起使用，但似乎我们需要用错误边界包装每个路由元素，如下所示

import { ErrorBoundary } from "react-error-boundary";

export const AppRoutes = createBrowserRouter([
{
   path: "/",
   element: <ErrorBoundary FallbackComponent={GlobalError}><Login /></ErrorBoundary>
},
{
  path: "login",
  element: <ErrorBoundary FallbackComponent={GlobalError}><Login /></ErrorBoundary>,
},
{
  path: "trans",
  element: <ErrorBoundary FallbackComponent={GlobalError}><Trans /></ErrorBoundary>
),
{
  path: "*",
  element: <ErrorBoundary FallbackComponent={GlobalError}><RouteNotFound /></ErrorBoundary>
}]);

我们是否有更简单的方法来做到这一点，如下所示？反应路由器中的任何配置标志都会引发错误

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary FallbackComponent={GlobalError}>
  <Header />
    <RouterProvider router={AppRoutes} />
  <Footer />
</ErrorBoundary>

下面是当我们将 RouterProvider 包装在错误边界内时得到的错误的屏幕截图

下面是 Trans 组件抛出错误的示例代码。

export function Trans() {
  const [error, setError] = useState(null);

  if (error) {
    throw …

我有一个React应用程序，我用它包围了一个ErrorBoundary向 Sentry 发送错误的应用程序，它工作正常。我也想将我所有的 GraphQL 查询错误记录到 Sentry 中，但我现在的问题是我所有的 GraphQL 查询，我有一个 catch 块，我可以在其中为失败的查询调度一个操作。当我删除 catch 块时，错误会记录到 Sentry 中，但我无法触发失败的查询操作。

我现在的解决方案是将Sentry.captureException()非常重复的 GraphQL 查询的每个 catch 块放入。

ErrorBoundary即使查询有自己的 catch 块，有没有办法允许它仍然捕获 GraphQL 错误？

function getEmployee() {
    return function(dispatch) {
        dispatch(requestEmployeeInformation());

        GraphqlClient.query({ query: EmployeeQuery, fetchPolicy: 'network-only' })
            .then((response) => {
                dispatch(receiveEmployeeInformation(response.data));
            })
            .catch((error) => {
                /* temporary solution. This sends error to sentry but is very repetitive because
                   it has to be added to every single action with a graphql query 
                 */ …

我在我的 React 应用程序中使用 ErrorBoundary，并希望在发生错误时重定向到主页 - 但我的重定向不起作用。相反，应用程序停留在同一页面上。

相比之下，添加按钮允许用户通过单击它来切换页面。

但我想在错误发生时自动将用户带到那里。

当然，我缺少一种简单的方法来做到这一点。

import React from 'react';
import { Redirect } from 'react-router-dom';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({
      error: error,
      errorInfo: errorInfo
    })
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.errorInfo) {
      return (
        <div>
          {/* <Button href="/index.html">Go Home</Button> */}
          <Redirect to="/index.html" />
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

我也尝试过返回一条路线，但没有成功：

render() {
  if (this.state.errorInfo) { …

我有一个故意抛出错误的组件，包裹在错误边界组件中。

它捕获错误并显示消息，但只显示一秒钟。

这是我的包装组件

  useEffect(() => {   
        error(); 
    }, []);

    const error = () => {
        try {
            return [].replace(/'--'/, '')
        } catch (error) {
           throw(error)
            
        }
    }

和我的错误边界组件

class ErrorBoundary extends Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    static getDerivedStateFromError(error) {
        console.log('derived', error)
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }
  
    componentDidCatch(error, errorInfo) {
        console.log('error did catch', error)
      this.setState({ hasError: true})
    }
  
    render() {
      if …

安装反应后出现这个问题

在此输入图像描述