JavaScript error handling

Hello, Habr!

The topic of error handling in JavaScript arises not only for every beginner, but also for a seasoned developer. I note that the topic is already quite hackneyed, so I will allow myself to summarize in a short summary everything that is really effective and tested in battle by me, colleagues and IT gurus.

So, in order for you to understand what is the essence and whether there is something new for you, below is the structure of the note:

• JavaScript error?

• Reinforced concrete error handling methods

• Making our life easier

• Dependency errors

JavaScript error?

Without diving into the etymology of an error in JavaScript, let's characterize it abstractly, since the error object itself in JS is not completely standardized.

A mistake in JS is "throwing" an exception. The exception must be handled by the program, otherwise the interpreter will return us to the place where this exception was thrown. By default, an exception throws an Error object.

It doesn't matter if you write Frontend or Backend, there is only one approach to handling - catch the unfortunate exception and handle it. Everything needs to be processed, especially in the production.

Let's immediately enlighten a couple of non-standard situations (as anyone):

• error from outside the program,

• terminal error.

Terminal error is the error code returned by the OS or daemon.

An error from outside the program may be a special case of a terminal, but nevertheless it must be handled.

, .. , , .

– ?

, :

• ( , ..)

• ( ..)

• ( , , undefined) –

• , .

, , . , – JavaScript, Typescript.

, , Error:

• name – ;

• message – ;

• stack – , .

, , , .

. , – 80% . 20% , – , , – .

, . , TDD E2E, , , :

• , ;

• (, , , ..);

• (, , ..);

• -;

• ;

• / .

. , , , , . , - .

– , . .

SOLID DRY, (middleware) , . Middleware , . .

Node.js

Vanilla JS

React

Angular

Vue

, : , JavaScript? .

try…catch, .

:

// ...

const middlewareRequest = async (req) => {
  try {
    const { data } = await axios.get(req);
    
    return data;
  } catch (err) {
    throw new Error(err);
  }
}

// ...

, try…catch, « », DRY , .

: middleware – .

:

// ...

const wrapEventWithExcpetionHandler = (middleware) => (e) => {
  const { error } = e; // ,     
  
  if (error) {
    throw new Error(error);
  }
  
  try {
    return middleware(e);
  } catch (err) {
    throw new Error(err);
  }
}

window.addEventListener('mousemove', wrapEventWithExceptionHandler(middlewareGlobalMouseMove));

// ...

, , , , .

, «» .

, : , , . , , , .

?

– . – , «» . , .

DevTools , , . , , :

// ...

/*  console.log      */

/*
   ,      ,
          
*/

console.log('Check:\r\n  username - %s\r\n  age - %i\r\n  data - %o', 'Mike', 23, {status: 'registered'});
/*
Check:
  username - Mike
  age - 23
  data - {status: "registered"}
*/

/*    */
console.table([{username: 'Mike', age: 23}, {username: 'Sarah', age: 46}]);

/*         */
console.dir(document.body.childNodes[1]);

// ...

, , (, , ..), , .

1.    : , . log4js. , , .

2.    DevTools! . , – , . Source. , . .

3.    .

4.    , , (. ).

5.    – , , , . , DevTools .

, , , .

JS, .

, Sentry Rollbar, , .

, , . , ( ).

Graphana, , .. JavaScript, , .

, .

, .. . ? :

• . console (log, warn, error, info), (. log4js). , , .

• production/development/test source-map -, , .

• , , Pull Request. Fork , , .

• , babel. babel AST, JavaScript . , , , , . , , , , .

Above, we have considered quite standard error handling methods, and also demonstrated examples of techniques with code for popular packages. In addition, there are tools for automating the collection and processing of errors. For more information, read the links.

Combine multiple methods and trust reputable projects. Be sure to log during development, breakpoints only help to understand the problem in a specific case, but are not a cure.

Author: Rishat Gabaidullov, Head of the Frontend Practice Group at Reksoft.