Breaking News: Grepper is joining You.com. Read the official announcement!

class error boundary component react

Cherry berry answered on September 6, 2022 Popularity 10/10 Helpfulness 4/10

answer class error boundary component react

related react error boundary

class error boundary component react

Comment

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

  componentDidCatch(error, errorInfo) {
    this.setState({
      hasError: true
    })
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: boundary class javascript

Link to this answer
Share Copy Link

Contributed on Sep 06 2022

Cherry berry

0 Answers Avg Quality 2/10

Closely Related Answers

react error boundary

Comment

Sometimes you get errors in your component, 
Frequently there's errors with APIs with malformatted or otherwise weird 
data. Let's be defensive about this because we still want to use this 
API but we can't control when we get errors.Your app does not always
need error boundary but it is helpful. 
We're going to use a 
feature called componentDidCatch to handle this.


A React component can only catch errors in its children, so that's important to 
keep in mind.
It cannot catch its own errors. we will use error boundary.
This is something you can't do with hooks or functional component so if
you needed this sort of functionality you'd have to use a class component.



Make a new file ErrorBoundary.jsx 

import { Component } from "react";
import { Link } from "react-router-dom";

class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.error("ErrorBoundary caught an error", error, info);
  }
  render() {
    if (this.state.hasError) {
      return (
        <h2>
          There was an error with this listing. <Link to="/">Click here</Link>{" "}
          to back to the home page.
        </h2>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;



 Now anything that is a child of this component will have errors caught here.
 Think of this like a catch block from try/catch.
 A static method is one that can be called on the constructor. 
 You'd call this method like this:
ErrorBoundary.getDerivedStateFromError(error). 
This method must be static.
 If you want to call an error logging service, 
 componentDidCatch would be an amazing place to do that. 
 I can recommend Sentry and TrackJS.


***** How to make any component use this error boundary ? *****
  - the biggest temptation would be to wrap it around the component,
  
  DO NOT do that. WHY??? because error boundary only catch things in component
that are inside it.
so that is how we do it???
  
  - go to that component, import errorBoundary.jsx component in there.
	lets say we want to apply in Details.jsx component.

in that file declare a 

function DetailsErrorBoundary(props){
return (
<ErrorBoundary>
  <Details {...props}/>
  </ErrorBoundary>
)
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Mar 15 2023

M Hassan khan

0 Answers Avg Quality 2/10

class error boundary component react

Contents

More Related Answers

class error boundary component react

Closely Related Answers

react error boundary

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.