写点什么

JavaScript 错误处理权威指南

2018 年 11 月 23 日

JavaScript错误处理权威指南

本文将分三部分分析 JavaScript 中的错误,首先我们将了解错误的一般情况。之后,我们将关注后端(Node.js + Express.js)。最后,我们将重点看下,如何处理 React.js 中的错误。我选择这些框架,因为它们是目前最流行的,但是,你应该能够将新发现轻松地应用到其他框架中!


继上一篇文章之后,我想谈谈错误。错误很好——我相信你以前听过这个说法。乍一看,我们害怕错误,因为错误往往会涉及到在公共场合受到伤害或羞辱。通过犯错误,我们实际上学会了如何不去做某事,以及下次如何做得更好。


显然,这是关于从现实生活的错误中学习。编程中的错误有点不同。它们为我们提供了很好的特征来改进我们的代码,并告诉用户什么地方出了问题(也可能是教他们如何修复它)。


GitHub上提供了一个完整的样例项目。


JavaScript 错误和一般处理

throw new Error(‘something went wrong’) 会在 JavaScript 中创建一个错误实例,并停止脚本的执行,除非你对错误做了一些处理。当你作为 JavaScript 开发者开启自己的职业生涯时,你自己很可能不会这样做,但是,你已经从其他库(或运行时)那里看到了,例如,类似“ReferenceError: fs 未定义”这样的错误。


Error 对象

Error 对象有两个内置属性供我们使用。第一个是消息,作为参数传递给 Error 构造函数,例如 new Error(“这是错误消息”)。你可以通过 message 属性访问消息:


const myError = new Error(‘请改进代码’)console.log(myError.message) // 请改进代码
复制代码


第二个是错误堆栈跟踪,这个属性非常重要。你可以通过 stack 属性访问它。错误堆栈将为你提供历史记录(调用堆栈),从中可以查看哪个文件导致了错误。堆栈的上部也包括消息,然后是实际的堆栈,从距离错误发生最近的点开始,一直到最外层“需要为错误负责”的文件:


Error: 请改进代码 at Object.<anonymous> (/Users/gisderdube/Documents/_projects/hacking.nosync/error-handling/src/general.js:1:79) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) at Function.Module.runMain (internal/modules/cjs/loader.js:742:12) at startup (internal/bootstrap/node.js:266:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)
复制代码


抛出和处理错误

现在,Error 实例本身不会导致任何结果,例如,new Error(’…’)不会做任何事情。当错误被抛出时,就会变得更有趣。然后,如前所述,脚本将停止执行,除非你在流程中以某种方式对它进行了处理。记住,是手动抛出错误,还是由库抛出错误,甚至由运行时本身(Node 或浏览器),都没有关系。让我们看看如何在不同的场景中处理这些错误。


try … catch

这是最简单但经常被遗忘的错误处理方法——多亏 async / await,它的使用现在又多了起来。它可以用来捕获任何类型的同步错误,例如,如果我们不把 console.log(b)放在一个 try … catch 块中,脚本会停止执行。


const a = 5
try { console.log(b) // b is not defined, so throws an error} catch (err) { console.error(err) // will log the error with the error stack}
console.log(a) // still gets executed
复制代码


… finally

有时候,不管是否有错误,代码都需要执行。你可以使用第三个可选块 finally。通常,这与在 try…catch 语句后面加一行代码是一样的,但它有时很有用。


const a = 5
try { console.log(b) // b is not defined, so throws an error} catch (err) { console.error(err) // will log the error with the error stack} finally { console.log(a) // will always get executed}
复制代码


异步性——回调

异步性,这是在使用 JavaScript 时必须考虑的一个主题。当你有一个异步函数,并且该函数内部发生错误时,你的脚本将继续执行,因此,不会立即出现任何错误。当使用回调函数处理异步函数时(不推荐),你通常会在回调函数中收到两个参数,如下所示:


如果有错误,err 参数就等同于那个错误。如果没有,参数将是 undefined 或 null。要么在 if(err)块中返回某项内容,要么将其他指令封装在 else 块中,这一点很重要,否则你可能会得到另一个错误,例如,result 可能未定义,而你试图访问 result.data,类似这样的情况。


 myAsyncFunc(someInput, (err, result) => {    if(err) return console.error(err) // we will see later what to do with the error object.    console.log(result)})

复制代码


异步性——Promises

处理异步性的更好方法是使用 Promises。在这一点上,除了代码可读性更强之外,我们还改进了错误处理。只要有一个 catch 块,我们就不再需要太关注具体的错误捕获。在链接 Promises 时,catch 块捕获会自 Promises 执行或上一个 catch 块以来的所有错误。注意,没有 catch 块的 Promises 不会终止脚本,但会给你一条可读性较差的消息,比如:


(node:7741) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: something went wrong(node:7741) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. */
复制代码


因此,务必要在 Promises 中加入 catch 块。


Promise.resolve(1)    .then(res => {        console.log(res) // 1
throw new Error('something went wrong')
return Promise.resolve(2) }) .then(res => { console.log(res) // will not get executed }) .catch(err => { console.error(err) // we will see what to do with it later return Promise.resolve(3) }) .then(res => { console.log(res) // 3 }) .catch(err => { // in case in the previous block occurs another error console.error(err) })
复制代码


回到 try … catch

随着 JavaScript 引入 async / await,我们回到了最初的错误处理方法,借助 try … catch … finally,错误处理变得非常简单。


因为这和我们处理“普通”同步错误的方法是一样的,所以如果需要的话,更容易使用作用域更大的 catch 语句。


;(async function() {    try {        await someFuncThatThrowsAnError()    } catch (err) {        console.error(err) // we will make sense of that later    }
console.log('Easy!') // will get executed})()

复制代码


服务器端错误的产生和处理

现在,我们已经有了处理错误的工具,让我们看下,我们在实际情况下能用它们做什么。后端错误的产生和处理是应用程序至关重要的组成部分。对于错误处理,有不同的方法。我将向你展示一个自定义 Error 构造函数和错误代码的方法,我们可以轻松地传递到前端或任何 API 消费者。构建后端的细节并不重要,基本思路不变。


我们将使用 Express.js 作为路由框架。让我们考虑下最有效的错误处理结构。我们希望:


  1. 一般错误处理,如某种回退,基本上只是说:“有错误,请再试一次或联系我们”。这并不是特别聪明,但至少通知用户,有地方错了——而不是无限加载或进行类似地处理。

  2. 特殊错误处理为用户提供详细信息,让用户了解有什么问题以及如何解决它,例如,有信息丢失,数据库中的条目已经存在等等。


构建一个自定义 Error 构造函数

我们将使用已有的 Error 构造函数并扩展它。继承在 JavaScript 中是一件危险的事情,但根据我的经验,在这种情况下,它非常有用。我们为什么需要它?我们仍然希望堆栈跟踪给我们一个很好的调试体验。扩展 JavaScript 原生 Error 构造函数可以让我们方便地获得堆栈跟踪。我们唯一要做的是添加代码(我们稍后可以通过错误代码访问)和要传递给前端的状态(http 状态代码)。


class CustomError extends Error {    constructor(code = 'GENERIC', status = 500, ...params) {        super(...params)
if (Error.captureStackTrace) { Error.captureStackTrace(this, CustomError) }
this.code = code this.status = status }}
module.exports = CustomError

复制代码


如何处理路由

在完成 Error 的自定义之后,我们需要设置路由结构。正如我指出的那样,我们想要一个单点真错误处理,就是说,对于每一个路由,我们要有相同的错误处理行为。在默认情况下,由于路由都是封装的,所以 Express 并不真正支持那种方式。


为了解决这个问题,我们可以实现一个路由处理程序,并把实际的路由逻辑定义为普通的函数。这样,如果路由功能(或任何内部函数)抛出一个错误,它将返回到路由处理程序,然后可以传给前端。当后端发生错误时,我们可以用以下格式传递一个响应给前端——比如一个 JSON API:


{    error: 'SOME_ERROR_CODE',    description: 'Something bad happened. Please try again or     contact support.'}
复制代码


准备好不知所措。当我说下面的话时,我的学生总是生我的气:


如果你咋看之下并不是什么都懂,那没问题。只要使用一段时间,你就会发现为什么要那样。


顺便说一下,这可以称为自上而下的学习,我非常喜欢。


路由处理程序就是这个样子:


const express = require('express')const router = express.Router()const CustomError = require('../CustomError')
router.use(async (req, res) => { try { const route = require(`.${req.path}`)[req.method]
try { const result = route(req) // We pass the request to the route function res.send(result) // We just send to the client what we get returned from the route function } catch (err) { /* This will be entered, if an error occurs inside the route function. */ if (err instanceof CustomError) { /* In case the error has already been handled, we just transform the error to our return object. */
return res.status(err.status).send({ error: err.code, description: err.message, }) } else { console.error(err) // For debugging reasons
// It would be an unhandled error, here we can just return our generic error object. return res.status(500).send({ error: 'GENERIC', description: 'Something went wrong. Please try again or contact support.', }) } } } catch (err) { /* This will be entered, if the require fails, meaning there is either no file with the name of the request path or no exported function with the given request method. */ res.status(404).send({ error: 'NOT_FOUND', description: 'The resource you tried to access does not exist.', }) }})
module.exports = router

复制代码


我希望你能读下代码中的注释,我认为那比我在这里解释更有意义。现在,让我们看下实际的路由文件是什么样子:


const CustomError = require('../CustomError')
const GET = req => { // example for success return { name: 'Rio de Janeiro' }}
const POST = req => { // example for unhandled error throw new Error('Some unexpected error, may also be thrown by a library or the runtime.')}
const DELETE = req => { // example for handled error throw new CustomError('CITY_NOT_FOUND', 404, 'The city you are trying to delete could not be found.')}
const PATCH = req => { // example for catching errors and using a CustomError try { // something bad happens here throw new Error('Some internal error') } catch (err) { console.error(err) // decide what you want to do here
throw new CustomError( 'CITY_NOT_EDITABLE', 400, 'The city you are trying to edit is not editable.' ) }}
module.exports = { GET, POST, DELETE, PATCH,}

复制代码


在这些例子中,我没有做任何有实际要求的事情,我只是假设不同的错误场景。例如,GET /city 在第 3 行结束,POST /city 在第 8 号结束等等。这也适用于查询参数,例如,GET /city?startsWith=R。本质上,你会有一个未处理的错误,前端会收到:


{    error: 'GENERIC',    description: 'Something went wrong. Please try again or contact support.'}
复制代码


或者你将手动抛出 CustomError,例如:


throw new CustomError('MY_CODE', 400, 'Error description')
复制代码


上述代码会转换成:


{    error: 'MY_CODE',    description: 'Error description'}
复制代码


既然我们有了这个漂亮的后端设置,我们就不会再把错误日志泄漏到前端,而总是返回有用的信息,说明出现了什么问题。


确保你已经在GitHub上看过完整的库。你可以把它用在任何项目中,并根据自己的需要来修改它!


向用户显示错误

下一个也是最后一个步骤是管理前端的错误。这里,你要使用第一部分描述的工具处理由前端逻辑产生的错误。不过,后端的错误也要显示。首先,让我们看看如何显示错误。如前所述,我们将使用 React 进行演练。


把错误保存在 React 状态中

和其他数据一样,错误和错误消息会变化,因此,你想把它们放在组件状态中。在默认情况下,你想要在加载时重置错误,以便用户第一次看到页面时,不会看到错误。


接下来我们必须澄清的是不同错误类型及与其匹配的可视化表示。就像在后端一样,有 3 种类型:


  1. 全局错误,例如,其中一个常见的错误是来自后端,或者用户没有登录等。

  2. 来自后端的具体错误,例如,用户向后端发送登录凭证。后端答复密码不匹配。前端无法进行此项验证,所以这样的信息只能来自后端。

  3. 由前端导致的具体错误,例如,电子邮件输入验证失败。


2 和 3 非常类似,虽然源头不一样,但如果你愿意,就可以在同样的 state 中处理。我们将从代码中看下如何实现。


我将使用 React 的原生 state 实现,但是,你还可以使用类似 MobX 或 Redux 这样的状态管理系统。


全局错误

通常,我将把这些错误保存在最外层的有状态组件中,并渲染一个静态 UI 元素,这可能是屏幕顶部的一个红色横幅、模态或其他什么东西,设计实现由你决定。


让我们看下代码:


import React, { Component } from 'react'
import GlobalError from './GlobalError'
class Application extends Component { constructor(props) { super(props)
this.state = { error: '', }
this._resetError = this._resetError.bind(this) this._setError = this._setError.bind(this) }
render() { return ( <div className="container"> <GlobalError error={this.state.error} resetError={this._resetError} /> <h1>Handling Errors</h1> </div> ) }
_resetError() { this.setState({ error: '' }) }
_setError(newError) { this.setState({ error: newError }) }}
export default Application

复制代码


正如你看到的那样,Application.js 中的状态存在错误。我们也有方法可以重置并改变错误的值。我们把值和重置方法传递给 GlobalError 组件,在点击’x’时,该组件会显示错误并重置它。让我们看看 GlobalError 组件:


import React, { Component } from 'react'
class GlobalError extends Component { render() { if (!this.props.error) return null
return ( <div style={{ position: 'fixed', top: 0, left: '50%', transform: 'translateX(-50%)', padding: 10, backgroundColor: '#ffcccc', boxShadow: '0 3px 25px -10px rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', }} > {this.props.error} &nbsp; <i className="material-icons" style={{ cursor: 'pointer' }} onClick={this.props.resetError} > close </i> </div> ) }}
export default GlobalError

复制代码


你可以看到,在第 5 行,如果没有错误,我们就不做任何渲染。这可以防止我们的页面上出现一个空的红框。当然,你可以改变这个组件的外观和行为。例如,你可以将“x”替换为 Timeout,几秒钟后重置错误状态。


现在,你已经准备好在任何地方使用全局错误状态了,只是从 Application.js 把_setError 向下传递,而且,你可以设置全局错误,例如,当一个请求从后端返回了字段 error: ‘GENERIC’。例如:


import React, { Component } from 'react'import axios from 'axios'
class GenericErrorReq extends Component { constructor(props) { super(props)
this._callBackend = this._callBackend.bind(this) }
render() { return ( <div> <button onClick={this._callBackend}>Click me to call the backend</button> </div> ) }
_callBackend() { axios .post('/api/city') .then(result => { // do something with it, if the request is successful }) .catch(err => { if (err.response.data.error === 'GENERIC') { this.props.setError(err.response.data.description) } }) }}
export default GenericErrorReq

复制代码


如果你比较懒,到这里就可以结束了。即使你有具体的错误,你总是可以改变全局错误状态,并把错误提示框显示在页面顶部。不过,我将向你展示如何处理和显示具体的错误。为什么?首先,这是关于错误处理的权威指南,所以我不能停在这里。其次,如果你只是把所有的错误都作为全局错误来显示,那么体验人员会疯掉。


处理具体的请求错误

和全局错误类似,我们也有位于其他组件内部的局部错误状态,过程相同:


import React, { Component } from 'react'import axios from 'axios'
import InlineError from './InlineError'
class SpecificErrorRequest extends Component { constructor(props) { super(props)
this.state = { error: '', }
this._callBackend = this._callBackend.bind(this) }
render() { return ( <div> <button onClick={this._callBackend}>Delete your city</button> <InlineError error={this.state.error} /> </div> ) }
_callBackend() { this.setState({ error: '', })
axios .delete('/api/city') .then(result => { // do something with it, if the request is successful }) .catch(err => { if (err.response.data.error === 'GENERIC') { this.props.setError(err.response.data.description) } else { this.setState({ error: err.response.data.description, }) } }) }}
export default SpecificErrorRequest

复制代码


有件事要记住,清除错误通常有一个不同的触发器。用’ x '删除错误是没有意义的。关于这一点,在发出新请求时清除错误会更有意义。你还可以在用户进行更改时清除错误,例如当修改输入值时。


源于前端的错误

如前所述,这些错误可以使用与处理后端具体错误相同的方式(状态)进行处理。这次,我们将使用一个有输入字段的示例,只允许用户在实际提供以下输入时删除一个城市:


import React, { Component } from 'react'import axios from 'axios'
import InlineError from './InlineError'
class SpecificErrorRequest extends Component { constructor(props) { super(props)
this.state = { error: '', city: '', }
this._callBackend = this._callBackend.bind(this) this._changeCity = this._changeCity.bind(this) }
render() { return ( <div> <input type="text" value={this.state.city} style={{ marginRight: 15 }} onChange={this._changeCity} /> <button onClick={this._callBackend}>Delete your city</button> <InlineError error={this.state.error} /> </div> ) }
_changeCity(e) { this.setState({ error: '', city: e.target.value, }) }
_validate() { if (!this.state.city.length) throw new Error('Please provide a city name.') }
_callBackend() { this.setState({ error: '', })
try { this._validate() } catch (err) { return this.setState({ error: err.message }) }
axios .delete('/api/city') .then(result => { // do something with it, if the request is successful }) .catch(err => { if (err.response.data.error === 'GENERIC') { this.props.setError(err.response.data.description) } else { this.setState({ error: err.response.data.description, }) } }) }}
export default SpecificErrorRequest

复制代码


使用错误代码实现错误国际化

也许你一直想知道为什么我们有这些错误代码,例如 GENERIC ,我们只是显示从后端传递过来的错误描述。现在,随着你的应用越来越大,你就会希望征服新的市场,并在某个时候面临多种语言支持的问题。如果你到了这个时候,你就可以使用前面提到的错误代码使用用户的语言来显示恰当的描述。


我希望你对如何处理错误有了一些了解。忘掉 console.error(err),它现在已经是过去时了。可以使用它进行调试,但它不应该出现在最终的产品构建中。为了防止这种情况,我建议你使用日志库,我过去一直使用loglevel,我对它非常满意。


英文原文

https://levelup.gitconnected.com/the-definite-guide-to-handling-errors-gracefully-in-javascript-58424d9c60e6


2018 年 11 月 23 日 10:343640
用户头像

发布了 1008 篇内容, 共 313.6 次阅读, 收获喜欢 282 次。

关注

评论 1 条评论

发布
暂无评论
发现更多内容

Suricata-流的处理

Phantasm

网络安全 suricata flow

troubleshoot之:用control+break解决线程死锁问题

程序那些事

Java JVM 死锁

如何让区块链技术能够更好赋能数字社会建设

CECBC区块链专委会

区块链 数字经济

ARTS-WEEK10

一周思进

ARTS 打卡计划

十年一梦,小米的原罪得到救赎了吗?

脑极体

如何对 ElasticSearch 集群进行压力测试

Bestony

elasticsearch ELK Elastic Stack

LeetCode题解:21. 合并两个有序链表,迭代,JavaScript,详细注释

Lee Chen

LeetCode 前端进阶训练营

关于 Bash 的 10 个常见误解

柴锋

bash Linux DevOps Shell

Java 常见的几种 OOM

hepingfly

Java OOM

求刚好大于当前数组组合,Code Review最佳实践,JVM框架原理,JVM垃圾回收原理 John 易筋 ARTS 打卡 Week 12

John(易筋)

Code Review ARTS 打卡计划 JVM虚拟机原理 JVM垃圾回收原理 Array算法

微服务、DDD

chenzt

如何设计实现一个证书加密签名工具包

三尾鱼

数据库的乐观锁和悲观锁并非真实的锁

架构师修行之路

数据库 架构 乐观锁 悲观锁 分布式锁

深化区块链技术的应用 体现其价值产业发展良机

CECBC区块链专委会

区块链技术 数字经济

BGP、OSPF、MPLS路由协议RFC分享

Phantasm

视读——沟通的艺术,看入人里,看出人外(第二章)

废材姑娘

读书笔记 视觉笔记

Requests模块基本操作

骆俊

应用开发基础之-并发编程

superman

程序的机器级表示-控制

引花眠

计算机基础

那些不可貌相的代码规范

废材姑娘

代码质量

设计模式之——JDK动态代理的源码分析

诸葛小猿

动态代理 cglib 代理模式 Proxy

ARTS Week11

时之虫

ARTS 打卡计划

第十章作业

武鹏

图文讲解 AQS ,一起看看 AQS 的源码……(图文较长)

程序员小航

AQS jdk源码 源码阅读 java 并发

当实证资产定价遇上机器学习

分析101

人工智能 学习 金融科技 金融 资产定价

ARTS打卡Week 10

teoking

LeetCode题解:21. 合并两个有序链表,利用数组排序,JavaScript,详细注释

Lee Chen

LeetCode 前端进阶训练营

如何理解Java8 的函数式编程

Rayjun

Java 函数式编程

ARTS 打卡(20.07.20-20.07.26)

小王同学

热潮-区块链的价值能够体现在哪些方面?

CECBC区块链专委会

区块链技术 标准化 应用价值

吃灰的旧显示器别扔!

Sicolas Flamel

学习 随笔杂谈

演讲经验交流会|ArchSummit 上海站

演讲经验交流会|ArchSummit 上海站

JavaScript错误处理权威指南-InfoQ