¡Hola, Habr!
El tema del manejo de errores en JavaScript surge no solo para todos los principiantes, sino también para los desarrolladores experimentados. Observo que el tema ya está bastante trillado, por lo que me permitiré resumir en un breve resumen todo lo que es realmente efectivo y probado en batalla por mí, colegas y gurús de TI.
Entonces, para que entiendas cuál es la esencia y si hay algo nuevo para ti, a continuación se muestra la estructura de la nota:
¿Error de JavaScript?
Métodos de manejo de errores de hormigón armado
Haciendo nuestra vida más fácil
Errores de dependencia
¿Error de JavaScript?
Sin sumergirnos en la etimología de un error en JavaScript, caractericémoslo de manera abstracta, ya que el objeto de error en sí en JS no está completamente estandarizado.
Un error en JS es "lanzar" una excepción. La excepción debe ser manejada por el programa; de lo contrario, el intérprete nos devolverá al lugar donde se lanzó esta excepción. De forma predeterminada, una excepción arroja un objeto Error.
No importa si escribe Frontend o Backend, solo hay un enfoque de manejo: detectar la desafortunada excepción y manejarla. Todo necesita ser procesado, especialmente en la producción.
Aclaremos de inmediato un par de situaciones no estándar (como cualquiera):
error desde fuera del programa,
error de terminal.
El error de terminal es el código de error devuelto por el sistema operativo o el demonio.
Un error externo al programa puede ser un caso especial de un terminal, pero sin embargo debe ser manejado.
, .. , , .
– ?
, :
, , . , – JavaScript, Typescript.
, , Error:
, , , .
. , – 80% . 20% , – , , – .
, . , TDD E2E, , , :
, ;
(, , , ..);
(, , ..);
-;
;
/ .
. , , , , . , - .
– , . .
SOLID DRY, (middleware) , . Middleware , . .
, : , 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 , .
:
// ...
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));
// ..., , , , .
, «» .
, : , , . , , , .
?
– . – , «» . , .
// ...
/* 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. , , (. ).
, , , .
JS, .
, , . , ( ).
Graphana, , .. JavaScript, , .
, .
, .. . ? :
. console (log, warn, error, info), (. log4js). , , .
production/development/test source-map -, , .
, , Pull Request. Fork , , .
, babel. babel AST, JavaScript . , , , , . , , , , .
Anteriormente, hemos considerado métodos de manejo de errores bastante estándar y también hemos demostrado ejemplos de técnicas con código para paquetes populares. Además, existen herramientas para automatizar la recopilación y el procesamiento de errores. Para obtener más información, lea los enlaces.
Combine varios métodos y confíe en proyectos acreditados. Asegúrese de iniciar sesión durante el desarrollo, los puntos de interrupción solo ayudan a comprender el problema en un caso específico, pero no son una cura.
Autor: Rishat Gabaidullov, Jefe del Grupo de Práctica Frontend en Reksoft.