Forem

Itachi Uchiha
Itachi Uchiha

Posted on

2

How do you handle JavaScript errors?

Hi. I how do you handle JavaScript errors?

I wrote a sample function like this;

Function

let tried = function(callback) {
    let err = null

    let errorObject = {}

    try {
        callback()
    } catch(ex) {
        err = ex
    }

    return {
        catch: function(data, cb) {
            if(err) {
                if(cb) {
                    switch(err.name) {
                        case 'EvalError':
                            if(data == 'EvalError') cb(err)
                            break;
                        case 'InternalError':
                            if(data == 'InternalError') cb(err)
                            break;
                        case 'RangeError':
                            if(data == 'RangeError') cb(err)
                            break;
                        case 'ReferenceError':
                            if(data == 'ReferenceError') cb(err)
                            break;
                        case 'SyntaxError':
                            if(data == 'SyntaxError') cb(err)
                            break;
                        case 'TypeError':
                            if(data == 'TypeError') cb(err)
                            break;
                        case 'URIError':
                            if(data == 'URIError') cb(err)
                            break;
                        case 'Error':
                            if(data == 'default') cb(err)
                            break;
                        default:
                            cb(err)
                            break;
                    }
                }
            }
            return this
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Usage

tried(() => {
    thisMethodNotExist()    
}).catch('EvalError', (err) => {
    console.log('Eval error')
}).catch('InternalError', (err) => {
    console.log('Internal error')
}).catch('RangeError', (err) => {
    console.log('Range error')
}).catch('ReferenceError', (err) => {
    console.log('Referans error') // this scope will run.
}).catch('SyntaxError', (err) => {
    console.log('Syntax error')
}).catch('TypeError', (err) => {
    console.log('Tip error')
}).catch('URIError', (err) => {
    console.log('URI error')
}).catch('Error', (err) => {
    console.log('Generic Error')
}).catch('default', (err) => {
    console.log('Custom Error')
})
Enter fullscreen mode Exit fullscreen mode

This function helped me many times. Do you have any method like this? Or what is your approach to catching error handling?

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (5)

Collapse
 
somedood profile image
Basti Ortiz • Edited

Just saying, there's no need to catch all the types of errors in your script. Only catch those you expect to be thrown. For example, there's no reason to catch an EvalError if window.eval is not used in your code.

But to answer your question, it seems like your error handling function does the same thing over and over again; that is to do something about a specific error. For a more straightforward method of catching errors, you can simply use the instanceof operator in the catch block.

try {
  // Insert some erroneous code here...
} catch (err) {
  if (err instanceof EvalError) { /*...*/ }
  else if (err instanceof InternalError) { /*...*/ }
  else if (err instanceof RangeError) { /*...*/ }
  else if (err instanceof ReferenceError) { /*...*/ }
  else if (err instanceof SyntaxError) { /*...*/ }
  else if (err instanceof TypeError) { /*...*/ }
  else if (err instanceof URIError) { /*...*/ }
  else if (err instanceof Error) { /*Generic error...*/ }
  else { /*Custom error...*/ }
}

Or if you simply want to log the type of error you caught, you can use the Error#name instance property.

try {
  // Some erroneous code here...
} catch (err) {
  console.log(`Oh, no! A ${err.name} was caught!`);
}
Collapse
 
itachiuchiha profile image
Itachi Uchiha

Hi. Thanks for your answer. Yes, I realized that I can use that like how you coded.

I coded this function because of errors I didn't know. In this example, I wanted to catch specific errors.

But your code looks more professional than me.

Is there any function to catch global errors in the JavaScript?

Collapse
 
somedood profile image
Basti Ortiz

I'd say the try-catch block is good enough for most use cases.

If you're interested, MDN has a list of all the types of errors in JavaScript. You can start diving there for error handling. If you're already familiar with other programming languages, it shouldn't be too different from what you already know.

Collapse
 
mahlongumbs profile image
Mahlon Gumbs

Curious, have you studied or developed in Java? I ask because your method feels like it’s forcing JavaScript to behave like it were Java.

Collapse
 
itachiuchiha profile image
Itachi Uchiha

Haha. No, I didn't use before. But I used C#. This can be a habit.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay