React is only showing an empty screen rather than showing an error something like this on my instructor's system:

How can I fix this?

EDIT: I can definitely see the error in the console and in IDE but to test error boundaries I want to fix this. Currently, When I use error boundary and create my own error using throw new Error(), error boundary only console.logs the error but doesn't display the UI, my screen only gets freezed.

ON USING ERROR BOUNDARIES: App.js:

import UserFinder from './components/UserFinder';
import UsersContext from './store/user-context';
import ErrorBoundary from './components/ErrorBoundary';

const DUMMY_USERS = [
  { id: 'u1', name: 'Max' },
  { id: 'u2', name: 'Manuel' },
  { id: 'u3', name: 'Julie' },
];

function App() {
  const usersContext = {
    users: DUMMY_USERS
  }

  return (
    <UsersContext.Provider value={usersContext}>
      <ErrorBoundary>
        <UserFinder />
      </ErrorBoundary>
    </UsersContext.Provider>
  );
}

export default App;

ErrorBoundary.js:

import React, { Component } from 'react';

export class ErrorBoundary extends Component {
    constructor() {
        super();
        this.state = {
            hasError: false
        }
    }

    componentDidCatch(error){
        console.log(error);
        this.setState({hasError:true});
    }

    render() {
        if (this.state.hasError === true)
        {
            <p>Error Occured!</p>
        }
        return this.props.children;
    }
}

export default ErrorBoundary;

Users.js(where I generated error)

import { Component } from 'react';
import User from './User';
import classes from './Users.module.css';

class Users extends Component {

  constructor() {
    super();
    this.state = {
      showUsers: true
    }
  }

  componentDidUpdate() {
    if (this.props.users.length === 0) {
      throw new Error('No user Provided');
    }
  }

  toggleUsersHandler() {
    this.setState((currState) => {
      return {
        showUsers: !currState.showUsers
      }
    });
  };

  render() {
    const usersList = (
      <ul>
        {this.props.users.map((user) => (
          <User key={user.id} name={user.name} />
        ))}
      </ul>
    );

    return (
      <div className={classes.users}>
        <button onClick={this.toggleUsersHandler.bind(this)}>
          {this.state.showUsers ? 'Hide' : 'Show'} Users
        </button>
        {this.state.showUsers && usersList}
      </div>
    );
  }
}

export default Users;

SO WHEN I TYPE A NAME WHICH IS NOT IN THE USER-LIST, Users.js gets an error. I used error boundaries to display a paragraph saying "something went wrong". But on generating an error, My screen freezes, rather than showing a paragraph. Error boundary is working fine because my app doesn't crash (doesn't show blank screen like first screenshot), this time it only freezes my screen.

CodePudding user response：

In the render method of the ErrorBoundary, you do not return the message.

render() {
  if (this.state.hasError === true) {
    return <p>Error Occured!</p>;
  }
  return this.props.children;
}