👩🏾‍🔬 👩🏿‍🌾 🔗 JavaScript错误处理 🤶🏿 🐟 👏🏿

哈Ha！

JavaScript中的错误处理主题不仅出现在每个初学者中，而且对于经验丰富的开发人员来说也是如此。我注意到该主题已经很老套了，因此我将允许自己简短总结所有在我，同事和IT专家的战斗中真正有效并经过考验的内容。

因此，为了让您了解实质内容和是否有新内容，以下是注释的结构：

JavaScript错误？
钢筋混凝土错误处理方法
让我们的生活更轻松
依赖错误

JavaScript错误？

在不深入探讨JavaScript错误的词源的情况下，让我们对其进行抽象地描述，因为JS中的错误对象本身并未完全标准化。

JS中的错误是“引发”异常。异常必须由程序处理，否则解释器会将我们返回到引发该异常的位置。默认情况下，异常引发Error对象。

编写Frontend或Backend都没有关系，只有一种处理方法-捕获不幸的异常并进行处理。一切都需要处理，特别是在生产中。

让我们立即启发一些非标准情况（与任何人一样）：

来自程序外部的错误，
终端错误。

终端错误是操作系统或守护程序返回的错误代码。

程序外部的错误可能是终端的一种特殊情况，但是仍然必须进行处理。

, .. , , .

– ?

, :

( , ..)
( ..)
( , , undefined) –
, .

, , . , – JavaScript, Typescript.

, , Error:

name – ;
message – ;
stack – , .

, , , .

. , – 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 , .

: 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 . , , , , . , , , , .

上面，我们讨论了相当标准的错误处理方法，并演示了流行软件包的代码示例技术。此外，还有一些工具可以自动收集和处理错误。有关更多信息，请阅读链接。

结合多种方法和信任信誉良好的项目。确保在开发过程中记录日志，断点仅有助于了解特定情况下的问题，而不能解决问题。

作者： Reksoft前端实践小组负责人Rishat Gabaidullov。

JavaScript错误处理

JavaScript错误？

More articles: