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

The ThemeProvider does not automatically provide theme injections

What are the drawbacks of utilizing the onClick function in JavaScript?

Utilizing Angular for enhanced search functionality by sending multiple query parameters

Displaying Well-Formatted XML in Angular2 Using Typescript

Automate the input provided to yeoman command line interface for implementing CI/CD tools

JavaScript finding items in an array

Interference in the output of .innerHTML leads to disruption

Identifying Mistakes during Promise Initialization

Utilizing NextJS and NextAuth to Detect Customer Subscription Status

What could be the reason for Firebase automatically deploying my Next.js application to both Firebase Hosting and Functions?

The back button on an Angular JS application should display a confirmation dialog when pressed

What is the purpose of defining the initialState in Redux?

Automated configuration of AWS Amplify JavaScript using Gitpod

Problem with selecting odd and even div elements

What is the best way to scale down my entire webpage to 65%?

Looking to test form submissions in React using Jest and Enzyme? Keep running into the error "Cannot read property 'preventDefault' of undefined"?

The byte order of integer literals in JavaScript

Utilize React to selectively execute either Server-Side Rendering or Client-Side

What is the simplest method for preserving the Redux state?

Ways to access states from a Vuex store within a Vuetify list in VueJs