When should you use try/catch in JavaScript?

Question

When I\'m developing normal web application with JavaScript, the try/catch statement is not needed usually. There\'s no checked exception, File IO or database conne

Answer 1

I don't agree this is a good scenario to use try...catch in JavaScript:

var something;
try { something = one.two.three.four.five; }
catch { something = "default"; }
finally { doSomething(something); }

https://stackoverflow.com/a/26172702/12410906

Because Remembering To Condition If Object Exist Before Reading Its Prop is something that belongs to JavaScript knowledge. You can't pretend you don't know it and just write a deep prop reading chain and wrap a try...catch around it. It is like if you call a primitive value like a function will also trigger exception:

const val = 1
val()

You can't pretend you don't know it and wrap a try...catch around every call of function. I do agree that it is very easy to forget condition if object exists when reading prop in JavaScript, but that is because javascript's design fault (typescript solve this issue with optional chaining operator), in one word that's not a good example to show when to use try...catch.

To understand when to use try...catch needs to understand when to throw error first.

When to throw error

An Error Is Something Thrown By Producer To Consumer When Something Really Bad Happens That Makes The Producer Has To Stop Until The Consumer (in most cases) Make Change.

For example, if backend API is producer, frontend code would-be consumer. When frontend requests something that backend doesn't have, backend can't continue so it throws a 404 error to frontend; when frontend requests something that being protected without validation, the backend would throw a 401 error to force the frontend input username and password; when there's server hard drive explodes, there will be another form of error thrown(if the server can still run).

Frontend code can also be frontend code's consumer. For example, you are using jQuery library, jQuery would-be producer, and your frontend code would-be consumer. This is an example in source code of jQuery throwing an error:

// from jQuery source code
        function( w ) {
            if ( !w.document ) {
                throw new Error( "jQuery requires a window with a document" );
            }
            return factory( w );
        };

See, the frontend developer(consumer) use jQuery in an environment that even document does not exist, so jQuery(producer) really can't go on and throw an error and stop everything until the developer do it right.

If you are developing a web app, the uesr who browser your web app would be consumer, then your web app code would be producer. There will be shit things happen surely, like the user might request a url does not exist(assume in spa app), or the user might input english letters in mobile number input, if you just simply throw an error like jQuery, Vue, backend would do, the user(consumer) can't catch it and consume it.

What you would really do is to show some toast or navigate to a special 404 route to let the user know what happens. That's why most of us frontend developers seldomly throw an error.

When to try...catch

This question will be easy after understanding when to throw an error. If you are consuming a producer that might throw error, you try...catch it, this is a piece of source code from vue-next:

// from vue-next source code

 try {
    result = postcss(plugins).process(source, postCSSOptions)
    ...
   }catch(e){}

The reason it try...catch is because the plugin postcss will throw error when the input is not right. Or you try to JSON.parse a string from server, you try...catch it. That's a general principle.