React JS shwo Error on same page using ErrorBoundary Component - reactjs

Question

We have implemented ErrorBoundary Component approach to support generic error handling for our website, and it is working perfectly fine but we want a Popup with Error Message on Same page, would it be possible ?
ErrorBoundary Component code is shown below :
import React from 'react';
import PhyndMenu from './menu/phyndMenu';
import { Dialog, DialogActionsBar } from '#progress/kendo-react-dialogs';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
errorInfo: null
};
this.toggleDialog = this.toggleDialog.bind(this);
}
toggleDialog() {
this.setState({
visible: !this.state.visible
});
}
componentDidCatch(error, errorInfo) {
// Catch errors in any child components and re-renders with an error message
this.setState({
error: error,
errorInfo: errorInfo
});
}
render() {
let routeHtml = '';
routeHtml =
<div>
<footer className="footer">
<div className="text-center">
<div className="inlineBlock">© Copyright 2018 PHYND TECHNOLOGIES, INC. All rights reserved. Version 3.4</div>
<nav className="inlineBlock">
Privacy Policy|
Terms and Conditions
| Support
</nav>
</div>
</footer>
</div>
if (this.state.error) {
// Fallback UI if an error occurs
return (
<div>
<header className="NetworkMgmt-header">
<PhyndMenu />
</header>
{/* <div style={{minHeight:"1000px"}} >
<h2>{"Oh-no! Something went wrong"}</h2>
</div>
{routeHtml} */}
{this.props.children}
<div>
<button className="k-button" onClick={this.toggleDialog}>Open Dialog</button>
{this.state.visible && <Dialog title={"Please confirm"} onClose={this.toggleDialog}>
<p style={{ margin: "25px", textAlign: "center" }}>Are you sure you want to continue?</p>
<DialogActionsBar>
<button className="k-button" onClick={this.toggleDialog}>No</button>
<button className="k-button" onClick={this.toggleDialog}>Yes</button>
</DialogActionsBar>
</Dialog>}
</div>
</div>
);
}
// component normally just renders children
return this.props.children;
}
}
export default ErrorBoundary;
And this how we register our ErrorBoundary Component :
<Provider store={store}>
<Router>
<ErrorBoundary>
<CookiesProvider>
<NetworkMgmt />
</CookiesProvider>
</ErrorBoundary>
</Router>
</Provider>,
After Suggested by #Trent, i have implemented my ErrorBoundary something like this, but that displays blank page :
import React from 'react';
import PhyndMenu from './menu/phyndMenu';
import ReactDOM from 'react-dom';
const modalRoot = document.getElementById('modal-root');
// Let's create a Modal component that is an abstraction around
// the portal API.
class Modal extends React.Component {
constructor(props) {
super(props);
// Create a div that we'll render the modal into. Because each
// Modal component has its own element, we can render multiple
// modal components into the modal container.
this.el = document.createElement('div');
}
componentDidMount() {
// Append the element into the DOM on mount. We'll render
// into the modal container element (see the HTML tab).
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
// Remove the element from the DOM when we unmount
modalRoot.removeChild(this.el);
}
render() {
// Use a portal to render the children into the element
return ReactDOM.createPortal(
// Any valid React child: JSX, strings, arrays, etc.
this.props.children,
// A DOM element
this.el,
);
}
}
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
errorInfo: null
};
}
componentDidCatch(error, errorInfo) {
// Catch errors in any child components and re-renders with an error message
this.setState({
error: error,
errorInfo: errorInfo
});
}
render() {
const modal =
<Modal>
<div className="modal">
<div>
With a portal, we can render content into a different
part of the DOM, as if it were any other React child.
</div>
</div>
</Modal>
return (
<div className="app">
{modal}
</div>
);
}
}
export default ErrorBoundary;

Answer 1

Sure! It looks like your "bubbling-up" the error message to your ErrorBoundary component.
Inside of the ErrorBoundary's render method, you can use a React Portal to render a div higher up in the DOM tree, style it as a modal, and absolutely position it over your web app.
There's an example of creating a modal inside of the React Portal documentation:
https://reactjs.org/docs/portals.html#event-bubbling-through-portals