Gestion des erreurs JavaScript

Bonjour, Habr!

Le sujet de la gestion des erreurs en JavaScript se pose non seulement pour chaque débutant, mais aussi pour un développeur chevronné. Je constate que le sujet est déjà assez éculé, je vais donc me permettre de résumer dans un bref résumé tout ce qui est vraiment efficace et testé au combat par moi, collègues et gourous de l'informatique.

Donc, pour que vous compreniez quelle est l'essence et s'il y a quelque chose de nouveau pour vous, voici la structure de la note:

• Erreur JavaScript?

• Méthodes de traitement des erreurs du béton armé

• Faciliter notre vie

• Erreurs de dépendance

Erreur JavaScript?

Sans plonger dans l'étymologie d'une erreur en JavaScript, caractérisons-la de manière abstraite, car l'objet d'erreur lui-même dans JS n'est pas complètement standardisé.

Une erreur dans JS est de "lancer" une exception. L'exception doit être gérée par le programme, sinon l'interpréteur nous ramènera à l'endroit où cette exception a été levée. Par défaut, une exception renvoie un objet Error.

Peu importe si vous écrivez Frontend ou Backend, il n'y a qu'une seule approche pour la gestion: attraper l'exception malheureuse et la gérer. Tout doit être traité, en particulier dans la production.

Éclairons immédiatement quelques situations non standard (comme n'importe qui):

• erreur extérieure au programme,

• erreur de terminal.

L'erreur de terminal est le code d'erreur renvoyé par le système d'exploitation ou le démon.

, .

, .. , , .

– ?

, :

• ( , ..)

• ( ..)

• ( , , 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 . , , , , . , , , , .

Ci-dessus, nous avons considéré des méthodes de gestion des erreurs tout à fait standard, et également présenté des exemples de techniques avec du code pour les packages populaires. De plus, il existe des outils pour automatiser la collecte et le traitement des erreurs. Pour plus d'informations, lisez les liens.

Combinez plusieurs méthodes et faites confiance à des projets réputés. Assurez-vous de vous connecter pendant le développement, les points d'arrêt aident uniquement à comprendre le problème dans un cas spécifique, mais ne sont pas une solution.

Auteur: Rishat Gabaidullov, chef du groupe de pratique Frontend chez Reksoft.