React JS shwo Error on same page using ErrorBoundary Component

3595 views reactjs
-2

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">
                <a href="http://www.phynd.com/Privacy" target="_blank">Privacy Policy</a>|  
                <a href="http://www.phynd.com/Terms" target="_blank">Terms and Conditions </a>
                |  <a href="mailto:support@phynd.com">Support</a>
            </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>,

answered question

1 Answer

9

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

posted this

Have an answer?

JD

Please login first before posting an answer.