Express中try catch捕获错误后如何向客户端返回对应错误页面

问题根源 #

你遇到的问题核心是：next(error)仅负责将错误传递给下游的错误处理中间件，不会终止当前路由处理函数的执行，因此即使触发了错误分支，后续的res.render('homepage')依然会执行，不仅会覆盖错误处理中间件返回的500页面，还会触发「响应头已发送后无法再次设置」的隐含报错。

解决方案 #

最简单的修复方式是在调用next(error)时加return终止当前函数的执行，避免后续逻辑运行，也可以将正常响应逻辑放到try块内，只有无报错时才执行。修正后的代码示例如下：

app.get('/', function(req, res, next) {
    let cat = 10;
    try {
        if (cat === 10) throw new Error('cat should not be 10');
        // 正常响应逻辑放在try块内，出错时自然不会执行
        res.render('homepage');
    } catch(error) {
        // 加return终止函数执行，不会再运行后续代码
        return next(error);
    }
})

// 自定义错误处理中间件
app.use( function(error, req, res, next) {
    console.log(error);
    let filePath = path.join(__dirname, '/error-pages/500.html');
    res.status(500).sendFile(filePath);
});

注意事项 #

Express中同一个请求生命周期内只能发送一次响应，一旦调用了res.render/res.sendFile/res.json等方法后，再次调用任何响应发送方法都会抛出异常，写路由逻辑时要确保所有分支路径下只会触发一次响应发送操作。

内容的提问来源于stack exchange，提问作者myNewAccount