JavaScript错误处理权威指南-InfoQ



 写点什么

本文将分三部分分析 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 作为路由框架。让我们考虑下最有效的错误处理结构。我们希望：

一般错误处理，如某种回退，基本上只是说：“有错误，请再试一次或联系我们”。这并不是特别聪明，但至少通知用户，有地方错了——而不是无限加载或进行类似地处理。
特殊错误处理为用户提供详细信息，让用户了解有什么问题以及如何解决它，例如，有信息丢失，数据库中的条目已经存在等等。

构建一个自定义 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 种类型：

全局错误，例如，其中一个常见的错误是来自后端，或者用户没有登录等。
来自后端的具体错误，例如，用户向后端发送登录凭证。后端答复密码不匹配。前端无法进行此项验证，所以这样的信息只能来自后端。
由前端导致的具体错误，例如，电子邮件输入验证失败。

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