0

I have a component where an abort controller is declared outside a useEffect. controller.abort() is called inside a useEffect when the component is unmounted.

When the component is unmounted this error below is thrown

Unhandled Rejection (AbortError): The operation was aborted.

 const controller = new AbortController()
    function MyComponent() {

      useEffect(() => {
        return () => controller.abort()
      }, [])
    
    const fetchData = async () => {
         try {
         const data = await fetchMyData(controller)
    } catch(error) {
    if (error.name === "AbortError") return
      console.log("Error ", error)
    }
  }
}

What am I doing wrong?

stacktrace images

enter image description here

user3476614
  • 537
  • 2
  • 8
  • 26
  • Where is `fetchData` called? – adsy Jul 15 '22 at 12:42
  • Does this answer your question? [Unhandled Rejection (AbortError): The operation was aborted](https://stackoverflow.com/questions/69007006/unhandled-rejection-aborterror-the-operation-was-aborted) – Jax-p Jul 15 '22 at 12:54
  • No. When `controller.abort()` is called the error Unhandled Rejection (AbortError): The operation was aborted. Is still thrown – user3476614 Jul 15 '22 at 13:30
  • did the `catch(error)` print something? – Giovanni Esposito Aug 09 '22 at 13:00
  • No, it does not even go `catch(error)` section. The app crashes the app crashes Unhandled Rejection (AbortError): The operation was aborted. I don't know if the error is coming from my react code or this https://stackoverflow.com/questions/73237571/handle-domexception-in-a-promise – user3476614 Aug 09 '22 at 13:31
  • Oh ok... well just to be 100% sure: did you try to wrap `controller.abort()` into `{}` brackets? – Giovanni Esposito Aug 09 '22 at 14:26
  • Yes, I tried that but I still have the same problem. I updated the question with images if that helps – user3476614 Aug 10 '22 at 14:43

2 Answers2

0

Check your index.js in root. If you are using StrictMode, that is exactly the problem. Checkout document: https://reactjs.org/docs/strict-mode.html. I think what you should do here is call request and abort in the same one.

tanthuann
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 25 '22 at 22:12
0

I tried all solutions from both of your tickets (this one and this of Unhandled Rejection (AbortError): The operation was aborted ). I tried Abortcontroller, cleanup after useEffect as well as try/catch, but it didn't come to the catch section at all. What worked for me was adding another catch in the try-area, basically, after the handling of the promise.

useEffect(() => {
    try {
      loadOptions()
        .then((response) => ...)
       // The error is catched here
        .catch((error) => console.log("Error"));
    } catch (error) {
      // It didn't work, as it never comes to this section
      console.log('Error ');
    }
  }, [item]);

So the error is catched and the app is not chashed. However, in my case, it is not really a good solution, as it seems to be a bug in new version of Apollo (as mentioned here DOMException: signal is aborted without reason in useEffect with async call ) and it should be handled more properly.

ihordoroshenko
  • 1
  • 1