[10-error-boundaries] Fallback page with link to home and redirect doesn't work

[atiabbz]

The code in the 10-error-boundaries checkpoint does not seem to work as expected since the <h2> tag with the link back to home is never rendered when hitting a path like http://localhost:1234/details/thisShouldShowTheFallbackPage. I tried console.log()'ing through the different parts of the component and am seeing that only render() is entered and this.props.children is returned immediately which results in a page with the None.jpg image and an ugly undefined-filled details page:

<h2>undefined — undefined — undefined, undefined</h2>
<button>Adopt </button>

// mostly code from reactjs.org/docs/error-boundaries.html
import { Component } from "react";
import { Link, Redirect } from "react-router-dom";

class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    console.log("getDerivedStateFromError"); //Never logged
    return { hasError: true, redirect: false };
  }
  componentDidCatch(error, info) {
    console.log("componentDidCatch");  //Never logged
    console.error("ErrorBoundary caught an error", error, info);
  }
  componentDidUpdate() {
    console.log("componentDidUpdate");  //Never logged
    if (this.state.hasError) {
      setTimeout(() => this.setState({ redirect: true }), 5000);
    }
  }

  render() {
    console.log("render"); //Logged
    if (this.state.redirect) {
      console.log("redirect"); //Never logged
      return <Redirect to="/" />;
    } else if (this.state.hasError) {
      console.log("hasError");  //Never logged
      return (
        <h2>
          There was an error with this listing. <Link to="/">Click here</Link>{" "}
          to back to the home page or wait five seconds.
        </h2>
      );
    }
    console.log("this.props.children"); //Logged
    return this.props.children;
  }
}

export default ErrorBoundary;

[atiabbz]

Further info: this issue is persistent in the 11-context and 12-portals-and-refs checkpoints too.

[crazylazycode]

Its working on my pc
For logging error you need to throw an error
throw new Error("lol its broken")
make sure the above code is in render()of Detail.js cause we are looking for error in Details Component.