Things no one told you about error handling in JS
Why your error handling is not working?
Error won’t be caught if error is thrown inside a ‘then’ method of an async function, The try catch block executes before the async function is executed (yes! error handling in JS is synchronous), but the error is thrown at a latter point in time when that async function is executed
try{anAsyncFunction().then(//do something which can throw an error)}catch(e){}
//in this case error will not be caught because of the reason stated aboveCodepen link: https://codepen.io/arnavsingh/pen/MWKLRjP?editors=0010
Open inspect mode at Codepen, console will have an uncaught error
Solutions
Use unhandled rejection event
window.addEventListener('unhandledrejection', function(event) {})
or
Use callbacks instead of async function
or
Use async error handling
anAsyncFunction.then(errorProneFunction).catch(error=>{})
or
Use multiple catch
let anAsyncFunction = async()=>{ return null}try{
anAsyncFunction().then(()=>{
try{
throw 'shit happens'
}catch(e){
document.body.innerHTML = e
}
})
}catch(e){
document.innerHTML = e
}Codepen link: https://codepen.io/arnavsingh/pen/MWKLRjP?editors=0010
This time there will be no uncaught error
You don’t need to throw error object
Generally we desire to extract error message in catch block by this
try{throw Error('shit happens')
}catch(e){
console.log(e.message) // it will console log "shit happens"}
throw Error creates an error object that contains the line where this error originated, and the message but if you only desire to use error message you can instead throw only message.
yes! that is possible.
try{throw 'shit happens'
}catch(e){
console.log(e) // it will console log "shit happens"}similarly you can throw objects constants arrays any JS object
but you won’t be able to know the line error originated from