bug: React Error Boundaries Don't Work in Ionic

Bug Report

Ionic version: 5.5.5

Current behavior: React Error Boundaries don’t seem to work with Ionic. Basic runtime errors in a component aren’t caught by wrapping Error Boundary component.

Expected behavior: Error Boundary should catch error and display fallback UI.

Steps to reproduce:

1. Implement a basic react Error Boundary
2. Wrap the Error Boundary component around another component with a runtime error.
3. Confirm that the Error Boundary doesn’t catch or display an alternate UI.

Related code:

Full example here: https://github.com/tnoetzel/error-boundry-ionic

ErrorBoundary.tsx

import React from 'react';

class ErrorBoundary extends React.Component<any, { hasError: boolean }> {
    constructor(props) {
        super(props);
        this.state = { hasError: null };
    }

    static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI.
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        console.log("ERROR!");
        // You can also log the error to an error reporting service
        //   logErrorToMyService(error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            // You can render any custom fallback UI
            return <h1>Something went wrong.</h1>;
        }

        return this.props.children;
    }
}

export default ErrorBoundary;

ExampleComponent.tsx

...

    function throwError(shouldError) {
        if (shouldError) {
            throw Error("I crashed");
        } else {
            return <></>;
        }
    }
    
 ...
 
<ErrorBoundary>
     {throwError(true)}
</ErrorBoundary>   

Other information: N/A

Ionic info:

Ionic:

   Ionic CLI       : 6.12.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.5.5

Capacitor:

   Capacitor CLI   : 2.4.4
   @capacitor/core : 2.4.4

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (update available: 1.3.0)   : 1.2.2

System:

   NodeJS : v15.0.1 (/usr/local/Cellar/node/15.0.1/bin/node)
   npm    : 7.5.2
   OS     : macOS Big Sur

[tnoetzel]

I think you’re right @liamdebeasi - Seems like the issue is that error boundaries won’t catch errors unless they’re in a child component, not a child dom element. Apologies!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.