安科网

iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 错误处理

Bougie

Bougie

2019-06-26

关注 关注

沪江CCtalk视频地址：https://www.cctalk.com/v/15114923887518

iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 错误处理

处理错误请求

爱能遮掩一切过错。

当我们在访问一个站点的时候，如果访问的地址不存在(404)，或服务器内部发生了错误(500)，站点会展示出某个特定的页面，比如：

iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 错误处理

那么如何在 Koa 中实现这种功能呢？其实，一个简单的中间件即可实现，我们把它称为 http-error。实现过程并不复杂，拆分为三步来看：

  • 第一步：确认需求
  • 第二步：整理思路
  • 第三步：代码实现

<br/>

确认需求

打造一个事物前，需要先确认它具有什么特性，这就是需求。

<br/>

在这里，稍微整理下即可得到几个基本需求：

  • 在页面请求出现 400 、 500 类错误码的时候，引导用户至错误页面；
  • 提供默认错误页面；
  • 允许使用者自定义错误页面。

<br/>

整理思路

现在，从一个请求进入 Koa 开始说起：

  1. 一个请求访问 Koa，出现了错误；
  2. 该错误会被 http-error 中间件捕捉到；
  3. 错误会被中间件的错误处理逻辑捕捉到，并进行处理；
  4. 错误处理逻辑根据错误码状态，调用渲染页面逻辑；
  5. 渲染页面逻辑渲染出对应的错误页面。

可以看到，关键点就是捕捉错误，以及实现错误处理逻辑和渲染页面逻辑。

<br/>

代码实现

建立文件

基于教程目录结构，我们创建 middleware/mi-http-error/index.js 文件，存放中间件的逻辑代码。初始目录结构如下:

middleware/
├─ mi-http-error/
│  └── index.js
└─ index.js

注意： 目录结构不存在，需要自己创建。

<br/>

捕捉错误

该中间件第一项需要实现的功能是捕捉到所有的 http 错误。根据中间件的洋葱模型，需要做几件事：

1. 引入中间件

修改 middleware/index.js，引入 mi-http-error 中间件，并将它放到洋葱模型的最外层

const path = require('path')
const ip = require("ip")
const bodyParser = require('koa-bodyparser')
const nunjucks = require('koa-nunjucks-2')
const staticFiles = require('koa-static')
const miSend = require('./mi-send')
const miLog = require('./mi-log')

// 引入请求错误中间件
const miHttpError = require('./mi-http-error')
module.exports = (app) => {
  // 应用请求错误中间件
  app.use(miHttpError())
  app.use(miLog(app.env, {
    env: app.env,
    projectName: 'koa2-tutorial',
    appLogLevel: 'debug',
    dir: 'logs',
    serverIp: ip.address()
  }));
  app.use(staticFiles(path.resolve(__dirname, "../public")))
  app.use(nunjucks({
    ext: 'html',
    path: path.join(__dirname, '../views'),
    nunjucksConfig: {
      trimBlocks: true
    }
  }));
  app.use(bodyParser())
  app.use(miSend())
}

2. 捕获中间件异常情况

修改 mi-http-error/index.js，在中间件内部对内层的其它中间件进行错误监听，并对捕获 catch 到的错误进行处理

module.exports = () => {
  return async (ctx, next) => {
    try {
       await next();
       /**
        * 如果没有更改过 response 的 status，则 koa 默认的 status 是 404 
        */
       if (ctx.response.status === 404 && !ctx.response.body) ctx.throw(404);
    } catch (e) {
      /*此处进行错误处理，下面会讲解具体实现*/
    }
  }
}

<br/>

上面的准备工作做完，下面实现两个关键逻辑。

<br/>

错误处理逻辑

错误处理逻辑其实很简单，就是对错误码进行判断，并指定要渲染的文件名。这段代码运行在错误 catch 中。

修改 mi-http-error/index.js：

module.exports = () => {
  let fileName = 'other'
  return async (ctx, next) => {
    try {
       await next();
       /**
        * 如果没有更改过 response 的 status，则 koa 默认的 status 是 404 
        */
       if (ctx.response.status === 404 && !ctx.response.body) ctx.throw(404);
    } catch (e) {
      let status = parseInt(e.status)
      // 默认错误信息为 error 对象上携带的 message
      const message = e.message

      // 对 status 进行处理，指定错误页面文件名 
      if(status >= 400){
        switch(status){
          case 400:
          case 404:
          case 500:
            fileName = status;
            break;
          // 其它错误 指定渲染 other 文件
          default:
            fileName = 'other'
        }
      }
    }
  }
}

也就是说，对于不同的情况，会展示不同的错误页面：

├─ 400.html
├─ 404.html
├─ 500.html
├─ other.html

这几个页面文件我们会在后面创建，接下来我们开始讲述下页面渲染的问题。

<br/>

渲染页面逻辑

首先我们创建默认的错误页面模板文件 mi-http-error/error.html，这里采用 nunjucks 语法。

<!DOCTYPE html>
<html>
<head>
  <title>Error - {{ status }}</title>
</head>
<body>
  <div id="error">
    <h1>Error - {{ status }}</h1>
    <p>Looks like something broke!</p>
    {% if (env === 'development') %}
    <h2>Message:</h2>
    <pre>
      <code>
        {{ error }}
      </code>
    </pre>
    <h2>Stack:</h2>
    <pre>
      <code>
        {{ stack }}
      </code>
    </pre> 
    {% endif %}
  </div>
</body>
</html>

<br/>

因为牵涉到文件路径的解析，我们需要引入 path 模块。另外，还需要引入 nunjucks 工具来解析模板。path 是 node 模块，我们只需从 npm 上安装nunjucks 即可。

<br/>

安装 nunjucks 模块来解析模板文件：

npm i nunjucks -S

<br/>

修改 mi-http-error/index.js，引入 path 和 nunjucks 模块：

// 引入 path nunjucks 模块 
const Path = require('path') 
const nunjucks = require('nunjucks')

module.exports = () => {
  // 此处代码省略，与之前一样
}

<br/>

为了支持自定义错误文件目录，原来调用中间件的代码需要修改一下。我们给中间件传入一个配置对象，该对象中有一个字段 errorPageFolder，表示自定义错误文件目录。

修改 middleware/index.js：

// app.use(miHttpError())
app.use(miHttpError({
  errorPageFolder: path.resolve(__dirname, '../errorPage')
}))

注意： 代码中，我们指定了 /errorPage 为默认的模板文件目录。

<br/>

修改 mi-http-error/index.js，处理接收到的参数：

const Path = require('path') 
const nunjucks = require('nunjucks')

module.exports = (opts = {}) => {
  // 400.html 404.html other.html 的存放位置
  const folder = opts.errorPageFolder
  // 指定默认模板文件
  const templatePath = Path.resolve(__dirname, './error.html') 

  let fileName = 'other'
  return async (ctx, next) => {
    try {
       await next()
       if (ctx.response.status === 404 && !ctx.response.body) ctx.throw(404);
    } catch (e) {
      let status = parseInt(e.status)
      const message = e.message
      if(status >= 400){
        switch(status){
          case 400:
          case 404:
          case 500:
            fileName = status;
            break;
          default:
            fileName = 'other'
        }
      }else{// 其它情况，统一返回为 500
        status = 500
        fileName = status
      }
      // 确定最终的 filePath 路径
      const filePath = folder ? Path.join(folder, `${fileName}.html`) : templatePath
    }
  }
}

<br/>

路径和参数准备好之后，我们需要做的事情就剩返回渲染的页面了。

<br/>

修改 mi-http-error/index.js，对捕捉到的不同错误返回相应的视图页面：

const Path = require('path') 
const nunjucks = require('nunjucks')
module.exports = (opts = {}) => {
  // 增加环境变量，用来传入到视图中，方便调试
  const env = opts.env || process.env.NODE_ENV || 'development'  

  const folder = opts.errorPageFolder
  const templatePath = Path.resolve(__dirname, './error.html')
  let fileName = 'other'
  return async (ctx, next) => {
    try {
       await next()
       if (ctx.response.status === 404 && !ctx.response.body) ctx.throw(404);
    } catch (e) {
      let status = parseInt(e.status)
      const message = e.message
      if(status >= 400){
        switch(status){
          case 400:
          case 404:
          case 500:
            fileName = status;
            break;
          default:
            fileName = 'other'
        }
      }else{
        status = 500
        fileName = status
      }
      const filePath = folder ? Path.join(folder, `${fileName}.html`) : templatePath
      
      // 渲染对应错误类型的视图，并传入参数对象
      try{
        // 指定视图目录
        nunjucks.configure( folder ? folder : __dirname )
        const data = await nunjucks.render(filePath, {
          env: env, // 指定当前环境参数
          status: e.status || e.message, // 如果错误信息中没有 status，就显示为 message
          error: e.message, // 错误信息
          stack: e.stack // 错误的堆栈信息
        })
        // 赋值给响应体
        ctx.status = status
        ctx.body = data
      }catch(e){
        // 如果中间件存在错误异常，直接抛出信息，由其他中间件处理
        ctx.throw(500, `错误页渲染失败:${e.message}`)
      }
    }
  }
}

上面所做的是使用渲染引擎对模板文件进行渲染，并将生成的内容放到 http 的 Response 中，展示在用户面前。感兴趣的同学可以去中间件源码中查看 error.html 查看模板内容（其实是从 koa-error 那里拿来稍作修改的）。

<br/>

在代码的最后，我们还有一个异常的抛出 ctx.throw()，也就是说，中间件处理时候也会存在异常，所以我们需要在最外层做一个错误监听处理。

修改 middleware/index.js：

const path = require('path')
const ip = require("ip")
const bodyParser = require('koa-bodyparser')
const nunjucks = require('koa-nunjucks-2')
const staticFiles = require('koa-static')

const miSend = require('./mi-send')
const miLog = require('./mi-log')
const miHttpError = require('./mi-http-error')
module.exports = (app) => {
  app.use(miHttpError({
    errorPageFolder: path.resolve(__dirname, '../errorPage')
  }))

  app.use(miLog(app.env, {
    env: app.env,
    projectName: 'koa2-tutorial',
    appLogLevel: 'debug',
    dir: 'logs',
    serverIp: ip.address()
  }));

  app.use(staticFiles(path.resolve(__dirname, "../public")))

  app.use(nunjucks({
    ext: 'html',
    path: path.join(__dirname, '../views'),
    nunjucksConfig: {
      trimBlocks: true
    }
  }));

  app.use(bodyParser())
  app.use(miSend())

  // 增加错误的监听处理
  app.on("error", (err, ctx) => {
    if (ctx && !ctx.headerSent && ctx.status < 500) {
      ctx.status = 500
    }
    if (ctx && ctx.log && ctx.log.error) {
      if (!ctx.state.logged) {
        ctx.log.error(err.stack)
      }
    }
  }) 
}

<br/>

下面，我们增加对应的错误渲染页面：

创建 errorPage/400.html：

<!DOCTYPE html>
<html>
<head>
  <title>400</title>
</head>
<body>
  <div id="error">
    <h1>Error - {{ status }}</h1>
    <p>错误码 400 的描述信息</p>
    {% if (env === 'development') %}
    <h2>Message:</h2>
    <pre>
      <code>
        {{ error }}
      </code>
    </pre>
    <h2>Stack:</h2>
    <pre>
      <code>
        {{ stack }}
      </code>
    </pre> 
    {% endif %}
  </div>
</body>
</html>

<br/>

创建 errorPage/404.html：

<!DOCTYPE html>
<html>
<head>
  <title>404</title>
</head>
<body>
  <div id="error">
    <h1>Error - {{ status }}</h1>
    <p>错误码 404 的描述信息</p>
    {% if (env === 'development') %}
    <h2>Message:</h2>
    <pre>
      <code>
        {{ error }}
      </code>
    </pre>
    <h2>Stack:</h2>
    <pre>
      <code>
        {{ stack }}
      </code>
    </pre> 
    {% endif %}
  </div>
</body>
</html>

<br/>

创建 errorPage/500.html：

<!DOCTYPE html>
<html>
<head>
  <title>500</title>
</head>
<body>
  <div id="error">
    <h1>Error - {{ status }}</h1>
    <p>错误码 500 的描述信息</p>
    {% if (env === 'development') %}
    <h2>Message:</h2>
    <pre>
      <code>
        {{ error }}
      </code>
    </pre>
    <h2>Stack:</h2>
    <pre>
      <code>
        {{ stack }}
      </code>
    </pre> 
    {% endif %}
  </div>
</body>
</html>

<br/>

创建 errorPage/other.html：

<!DOCTYPE html>
<html>
<head>
  <title>未知异常</title>
</head>
<body>
  <div id="error">
    <h1>Error - {{ status }}</h1>
    <p>未知异常</p>
    {% if (env === 'development') %}
    <h2>Message:</h2>
    <pre>
      <code>
        {{ error }}
      </code>
    </pre>
    <h2>Stack:</h2>
    <pre>
      <code>
        {{ stack }}
      </code>
    </pre> 
    {% endif %}
  </div>
</body>
</html>

<br/>

errorPage 中的页面展示内容，可以根据自己的项目信息修改，以上仅供参考。

<br/>

至此，我们基本完成了用来处理『请求错误』的中间件。而这个中间件并不是固定的形态，大家在真实项目中，还需要多考虑自己的业务场景和需求，打造出适合自己项目的中间件。

下一节中，我们将学习下规范与部署——制定合适的团队规范，提升开发效率。

iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 错误处理

上一篇：iKcamp新课程推出啦～～～～～iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 处理静态资源

推荐： 翻译项目Master的自述：

1. 干货｜人人都是翻译项目的Master

2. iKcamp出品微信小程序教学共5章16小节汇总(含视频)

koa

Bougie

Bougie

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

如何利用node转发请求详解

vue 项目开发过程中，接口跨域是一个很常见的问题。在开发时候可以用 vue 自带的 proxy 可以轻松解决。生产环境下，前端项目往往是部署在后端项目下，不会存在跨域的问题，接口前缀可以忽略。项目是能正常请求了，可是还需要处理接口问题，即 node 当成

往后余生 2020-09-17

如何更好地理解中间件和洋葱模型

相信用过 Koa、Redux 或 Express 的小伙伴对中间件都不会陌生，特别是在学习 Koa 的过程中，还会接触到 “洋葱模型”。本文阿宝哥将跟大家一起来学习 Koa 的中间件，不过这里阿宝哥不打算一开始就亮出广为人知的 “洋葱模型图”，而是先来介绍

yanyongtao 2020-11-02

什么时候使用这些Node框架？Express、Koa...

根据《2018年Node.js网络调查报告》显示，Node.js在很大程度上提高了开发者的生产力，降低了开发成本，提升了应用性能。这是成功采用和部署node.js框架的结果。我们喜欢node.js框架，从Express.js的灵活性，到koa.js的性能。

lzccheng 2020-09-06

node.js +mongdb实现登录功能

const koa = require("koa");const router = require("koa-router")();const app = new koa();app.use(router.route

webgm 2020-08-16

koa中间件核心（koa-compose）源码解读分析

最近经常使用koa进行服务端开发，迷恋上了koa的洋葱模型，觉得这玩意太好用了。而且koa是以精简为主，没有很多集成东西，所有的东西都需按需加载，这个更是太合我胃口了哈哈哈哈。基于对洋葱模型的热衷，所以对koa的洋葱模型进行一探究竟，不管是koa1还是ko

lert0 2020-08-16

Koa源码解析，带你实现一个迷你版的Koa

本文是我在阅读 Koa 源码后，并实现迷你版 Koa 的过程。如果你使用过 Koa 但不知道内部的原理，我想这篇文章应该能够帮助到你，实现一个迷你版的 Koa 不会很难。application.js: 入口文件，里面包括我们常用的 use 方法、liste

80447704 2020-06-09

koa-中间件使用

中间键在开发业务中起着承上启下的作用，比如登录的时候我们相关接口需要做登录的校验，是的，我们不可能在每个请求的接口前都加上一个函数叫做checkLogin. 这样的处理方式无一不是冗杂的，而且一旦我们的校验函数更改了名字，所有调用者都需要进行更改名字，这个

LorenLiu 2020-06-07

koa-创建项目

进入文件夹运行 npm init -y

苏莉koa 2020-04-15

学习koa开发API（五）--- 对异常和参数的处理

最近看了日漫《强风吹拂》，啊啊啊看的我开心，好久没好好看日漫了，找到了一种失去好久的的那种“中二”拼劲！！当我们输入一个不存在的接口路径时status是404；当我们手动抛出ctx.throw时，status是412，且显示的是Precondition F

无缘公子 2020-02-02

koa ejs 模板引擎

router.get(‘/add‘,async (ctx)=>{ let title = ‘hello koa2‘ await ctx.render(index‘,{. app.use //模板的后缀名是ejs. //app.use; //这

LorenLiu 2020-01-31

Koa 的中间件

把它叫做中间件。在express中间件是一个函数，它可以访问请求对象, 响应对象, 和 web 应用中处理请求-响应循环流程中的中间件，一 般被命名为 next 的变量。在 Koa 中中间件和 express 有点类似。修改请求和响应对象。调用堆栈中的下一

LorenLiu 2020-01-30

详解express与koa中间件执行顺序模式分析

var router = require(); /*引入是实例化路由** 推荐*/

80447704 2020-01-30

学习koa开发API（四）--- 文件目录设置

在根目录新增app文件夹，分别新增controllers文件夹、routes文件夹和index.js文件。假设我们需要开发两类接口，一种是有关图书的，一种是有关用户的。那么我们子routes文件夹下新增index.js、book.js和user.js文件。

80447704 2020-01-30

node.js开发API（二）--- 认识Koa-Router和获取参数

在koa实例化之后，我们会使用use来加载中间件；每一个中间件都是一个函数，函数的参数分别是ctx和next;建立好http服务器之后，koa-compose会将中间件存放在一个数组中，并依次从数组中执行每一个函数；每一个中间函数会调用next方法去取下一

苏莉koa 2020-01-29

学习node.js开发Resetful API（一）

请求应该包含URL、HTTP方法、请求体等。URL使用名词，尽量使用复数；URL使用嵌套表示关联关系，如/users/12/repos/5；如果是分页，应该包含当前页数和每一页的数量：分页 page=2&per_page=100；状态码：2开头正确

Qimingweikun 2020-01-28

koa 常用中间件

　　路由是Web框架必不可少的基础功能，koa.js为了保持自身的精简，并没有像Express.js自带了路由功能，因此koa-router做了很好的补充，作为koa星数最多的中间件，koa-router提供了全面的路由功能，比如类似Express的app

80447704 2020-01-02

利用Nginx或koa

最近在做上传的图片的需求，思考上传之后的图片怎么访问的问题，因为后端是Node，一开始尝试写一个专门的接口通过传入图片的path来查找，试了一下感觉并不理想，因为要为每种类型的文件设置Content-Type，不然浏览器会直接下载改文件。Nginx天生擅长

byourb 2020-01-04

服务端获取参数（koa）

ctx.body = "这是主页！

疯狂紫萧 2019-12-24

HTTP的options方法作用

检测服务器所支持的请求方法。相应的返回405（不允许）和501（没实现）（比如我使用delete，会返回405，因为我没有写这个接口。但我使用link接口请求，会返回501，因为koa里不支持link请求）。ctx.body = "这是主页！

80447704 2019-12-24

Koa原理和封装

application.js：简单封装http.createServer()并整合context.js. 需要实现use加载中间件，next下一个中间件，并且是环形的，

苏莉koa 2019-12-20
Bougie

Bougie

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号