fix: bugs related to fallbackUI

README.md

@@ -266,8 +266,7 @@ export function App(props) {
 You may also include a Fallback UI to render when the error occurs so that the User does not experience a broken/blank
 UI caused during the render cycle of React.
 
-Like the other `prop`s it can accept a value that is a React Component or a function that returns a React Component with
-the same signature `(error, info)`.
+It can accept a value that is a React Component
 
 ```javascript
 import React from 'react';
@@ -280,7 +279,10 @@ const rollbarConfig = {
 };
 
 const ErrorDisplay = ({ error, resetError }) => ( // <-- props passed to fallbackUI component
-  <div>…</div>
+  <div>
+    <h1>A following error has occured:</h1>
+    <p>{error.toString()}</p>
+  </div>
 );
 
 export function App(props) {

examples/index.js

@@ -4,15 +4,16 @@ import { Router, Switch, Route } from 'react-router-dom';
 import { Client } from 'rollbar-react-native';
 import { Provider, Context, ErrorBoundary, useRollbar, useRollbarCaptureEvent, LEVEL_INFO, useRollbarPerson, useContext, RollbarContext, historyContext } from '../src';
 
-const ErrorDisplay = ({ error, resetError }) => ( // <-- props passed to fallbackUI component
-  <div>…</div>
-);
-
-function displayForError(error, resetError) { // <-- args passed to fallbackUI function
+function ErrorDisplay({error, resetError}) { // <-- props passed to fallbackUI component
   if (error instanceof AggregateError) {
     return <AggregateDisplay error={error} />;
   }
-  return <ErrorDisplay error={error} onclick={resetError} />;
+  return (
+    <div>
+      <h1>Something went wrong.</h1>
+      {error && <p>{error.toString()}</p>}
+    </div>
+  );
 }
 
 const rollbarConfig = {

src/error-boundary.js

@@ -52,25 +52,16 @@ export class ErrorBoundary extends Component {
 
   render() {
     const { hasError, error } = this.state;
-    const { fallbackUI, children } = this.props;
+    const { fallbackUI: FallbackUI, children } = this.props;
 
     if (!hasError) {
       return children;
     }
 
-    if (!fallbackUI) {
+    if (!FallbackUI) {
       return null;
     }
 
-    if (React.isValidElement(fallbackUI)) {
-      return <fallbackUI error={error} resetError={this.resetError} />;
-    }
-
-    if (typeof fallbackUI === 'function') {
-      const fallbackComponent = fallbackUI(error, this.resetError);
-      return React.isValidElement(fallbackComponent) ? fallbackComponent : null;
-    }
-
-    return null;
+    return <FallbackUI error={error} resetError={this.resetError} />;
   }
 }