JavaScript-Fehlerbehandlung

Hallo Habr!

Das Thema Fehlerbehandlung in JavaScript stellt sich nicht nur für jeden Anfänger, sondern auch für einen erfahrenen Entwickler. Ich stelle fest, dass das Thema bereits ziemlich abgedroschen ist, daher werde ich mir erlauben, in einer kurzen Zusammenfassung alles zusammenzufassen, was wirklich effektiv ist und von mir, Kollegen und IT-Gurus im Kampf getestet wurde.

Damit Sie verstehen, worauf es ankommt und ob es etwas Neues für Sie gibt, finden Sie unten die Struktur der Notiz:

• JavaScript-Fehler?

• Methoden zur Fehlerbehandlung bei Stahlbeton

• Unser Leben leichter machen

• Abhängigkeitsfehler

JavaScript-Fehler?

Ohne auf die Etymologie eines Fehlers in JavaScript einzugehen, wollen wir ihn abstrakt charakterisieren, da das Fehlerobjekt selbst in JS nicht vollständig standardisiert ist.

Ein Fehler in JS ist das "Auslösen" einer Ausnahme. Die Ausnahme muss vom Programm behandelt werden, andernfalls bringt uns der Interpreter an die Stelle zurück, an der diese Ausnahme ausgelöst wurde. Standardmäßig löst eine Ausnahme ein Fehlerobjekt aus.

Es spielt keine Rolle, ob Sie Frontend oder Backend schreiben, es gibt nur einen Ansatz für die Behandlung: Fangen Sie die unglückliche Ausnahme und behandeln Sie sie. Vor allem in der Produktion muss alles verarbeitet werden.

Lassen Sie uns sofort einige nicht standardisierte Situationen (wie jeder andere auch) aufklären:

• Fehler von außerhalb des Programms,

• Terminalfehler.

Terminalfehler ist der vom Betriebssystem oder Dämon zurückgegebene Fehlercode.

, .

, .. , , .

– ?

, :

• ( , ..)

• ( ..)

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

Oben haben wir Standardmethoden zur Fehlerbehandlung betrachtet und Beispiele für Techniken mit Code für gängige Pakete demonstriert. Darüber hinaus gibt es Tools zur Automatisierung der Erfassung und Verarbeitung von Fehlern. Weitere Informationen finden Sie unter den Links.

Kombinieren Sie mehrere Methoden und vertrauen Sie seriösen Projekten. Stellen Sie sicher, dass Sie sich während der Entwicklung anmelden. Haltepunkte helfen nur, das Problem in einem bestimmten Fall zu verstehen, sind jedoch keine Heilung.

Autor: Rishat Gabaidullov, Leiter der Frontend Practice Group bei Reksoft.