1

I'm still learning the language, and I'm very curious to know what is the proper way to ensure that either all functions will execute or none when one action requires series of functions to be executed. For example I might have an HTML button that calls some apply() function:

function apply() {
  try {
  // Check arguments, choose what exactly to do next through some IFs etc...
  }
  anotherFunction();
}

function anotherFunction() {
  try {
    // Request data from DB, process data received, update object variables, etc...
  }
  yetAnotherFunction();
}

function yetAnotherFunction() {
  try {
    // Update HTML
  }
  oneMoreFunction();
}

function oneMoreFunction() {
  try {
    // Update graph
  }
}

So the problem here is that if any of the functions in the flow throws an error the rest functions won't do what they should, hence the entire Apply process will be interrupted with some changes applied (let's say HTML is getting updated) but the rest (the graph) is not. I'm curious to know what is the best practice to prevent this behaviour? Yes I'm trying my best to use try {} and check arguments for errors etc, but it looks like I can't foresee everything, I just need some way to tell the code "ensure you can execute all of the functions, in case of any errors, just don't do anything at all". Please advise what can be done here?

1
  • 1
    This is generally not possible. When the first function already has done some work and the second function throws an exception afterwards, you cannot "not have function one executed". You would need to explicitly undo the work that function one has done when you get an error.
    – Bergi
    Oct 24, 2020 at 0:33

1 Answer 1

1

You're taking the right path when thinking about try/catch blocks, but notice I used a 'catch' as well. Usually (maybe that is even enforced, I can't remember) you need the catch blocks along with the try.

So your functions could look something like this:

function async myFirstTryCatch() {
   try {
     // Make your request in the try block
     await requestCall();
   } catch(error){
      // Hey, my http call returned an error
      // Deal with the error here. Maybe show a toast, validate a form
      // Anything you need to not break the code and have good UX
      console.log(error)
   }
}

In that same line of thought, you could have each function handle their own try/catch or maybe control that in your apply function, in case some of the chain must continue/stop depending each other.

    function apply() {
        try {
           firstCall();
           functionThatRequiresFirstCalltoSucceed();
        } catch (error){
          //Will catch if either firstCall or  functionThatRequiresFirstCalltoSucceed fail
          console.log(error)
        }

        functionThatIndependsFromTheResultAbove();
    }

I hope this will help you build your thoughts about error handling in JS :)

IMPORTANT NOTE If your code enters the catch block, it will consider that the error has been dealt with and will not propagate! Here's an example

function functionThatThrowsError(){
  try{
    throw new Error('Example Error!');
  } catch (error) {
     // Error has been dealt with
     console.log(error) // Returns "Example Error"

     // throw error;   <--- Throw the error in the catch block if you need t to propagate
  }
}

 function wontCatchError() {
   try {
      functionThatThrowsError();
   } catch (error) {
      // THE CODE WILL NOT ENTER THE CATCH BLOCK
      // SINCE THE ERROR WAS CAUGHT IN THE FUNCTION ITSELF.

      // If you need to catch here as well, make sure to throw the error
      // in the catch block of the 'functionThatThrowsError'
      console.log(error)
   }
 }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.