React JS shwo Error on same page using ErrorBoundary Component

3595 views reactjs

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) {
    this.state = {
      error: null,
      errorInfo: null
    this.toggleDialog = this.toggleDialog.bind(this);
  toggleDialog() {
        visible: !this.state.visible
  componentDidCatch(error, errorInfo) {
    // Catch errors in any child components and re-renders with an error message
      error: error,
      errorInfo: errorInfo

  render() {

    let routeHtml = '';
    routeHtml = 
        <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="" target="_blank">Privacy Policy</a>|  
                <a href="" target="_blank">Terms and Conditions </a>
                |  <a href="">Support</a>

    if (this.state.error) {
      // Fallback UI if an error occurs
      return (
          <header className="NetworkMgmt-header">
            <PhyndMenu />
          {/* <div style={{minHeight:"1000px"}} >
            <h2>{"Oh-no! Something went wrong"}</h2>
          {routeHtml} */}
                <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>
                        <button className="k-button" onClick={this.toggleDialog}>No</button>
                        <button className="k-button" onClick={this.toggleDialog}>Yes</button>
    // component normally just renders children
    return this.props.children;

export default ErrorBoundary;

And this how we register our ErrorBoundary Component :

 <Provider store={store}>

                <NetworkMgmt />

answered question

1 Answer


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:

posted this

Have an answer?


Please login first before posting an answer.