Attempting to capture a previously unhandled error thrown by Axios when utilized in conjunction with React Query (with suspense mode enabled) within a NextJs application

Question

Attempting to capture a previously unhandled error thrown by Axios when utilized in conjunction with React Query (with suspense mode enabled) within a NextJs application

Utilizing NextJS, React query (with axios and suspense mode), I am attempting to handle an intentional 404 error from my API. Although I successfully caught it in my error.js file, the same error still shows up in the console as "uncaught." https://i.stack.imgur.com/J0yCx.png

I have also made attempts to log and catch this error in my component where I use the react query, but despite being able to log it, it continues to display as "Uncaught" in the console.

Here is my Home component: https://i.stack.imgur.com/I0Aq0.png

My route: https://i.stack.imgur.com/RAm3E.png

And my error.js file: https://i.stack.imgur.com/uLdKc.png

Any suggestions on how to effectively catch this error?

javascript next.js error-handling axios react-query

Answer 1

Answer №1

It seems like the issue lies in your error.js file not properly handling the 404 Error that occurred. The GlobalError component is only logging the error generated by the useEffect().

To address this, I recommend implementing the ErrorBoundary Component to effectively display an error message (in this case, indicating that an error has occurred!)

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
 
    // Initialize state variable to track error occurrence
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    // Update state to display fallback UI upon error
 
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    // Implement custom error logging service here
    console.log({ error, errorInfo });
  }
  render() {
    // Check if error has been caught
    if (this.state.hasError) {
      // Display custom fallback UI in case of error
      return (
        <div>
          <h2>An error occurred</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            Try again?
          </button>
        </div>
      );
    }
 
    // Render children components if no error occurred
 
    return this.props.children;
  }
}
 
export default ErrorBoundary;

Answer 2

It seems like the issue lies in your error.js file not properly handling the 404 Error that occurred. The GlobalError component is only logging the error generated by the useEffect().

To address this, I recommend implementing the ErrorBoundary Component to effectively display an error message (in this case, indicating that an error has occurred!)

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
 
    // Initialize state variable to track error occurrence
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    // Update state to display fallback UI upon error
 
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    // Implement custom error logging service here
    console.log({ error, errorInfo });
  }
  render() {
    // Check if error has been caught
    if (this.state.hasError) {
      // Display custom fallback UI in case of error
      return (
        <div>
          <h2>An error occurred</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            Try again?
          </button>
        </div>
      );
    }
 
    // Render children components if no error occurred
 
    return this.props.children;
  }
}
 
export default ErrorBoundary;

Attempting to capture a previously unhandled error thrown by Axios when utilized in conjunction with React Query (with suspense mode enabled) within a NextJs application

Answer №1

Similar questions

Modifying background with JavaScript and AJAX技术

Issue with Rails: Content_For not functioning properly when combined with AJAX or when attempting to rehydrate JavaScript files

The CSS stylesheet is not being applied to the components in Next.js

What steps should I take to have a specific input prompt a certain action?

An error has occurred in React with a nested JSON object, suggesting that it may actually

Error: Unable to convert null or undefined to an object | NextAuth

The Jquery flot plugin is failing to plot the graph accurately based on the specified date

Maintaining checked items in their original state while searching for another one in ion-searchbar can be achieved by properly handling

What seems to be the issue with the useState hook in my React application - is it not functioning as

Combining various components within an inactive element tag using Vue

transform JSON data into XML format with the help of JavaScript

Is it possible to utilize various return values generated by a regex?

The form submission did not yield any results

Personalize Your Highcharts Legend with Custom HTML

Adjust the cell text overflow based on the width of the table

The concept of dynamic schema in Mongoose allows for flexibility and

Issue with mouse movement in Selenium and Protractor not functioning as expected

The "self" variable in the Node.js prototype object fails to retain the correct context for the callback function

Combining php with jquery

Choosing a subset of data within a JavaScript object with the help of jQuery/jHashtable