2. 程式人生 > >iKcamp｜基於Koa2搭建Node.js實戰（含視頻）? 錯誤處理

iKcamp｜基於Koa2搭建Node.js實戰（含視頻）? 錯誤處理

阿新 • • 發佈：2018-02-02
響應 當前 錯誤頁面 內部 修改 搭建 lock htm ret

滬江CCtalk視頻地址：https://www.cctalk.com/v/15114923887518

技術分享圖片

處理錯誤請求

愛能遮掩一切過錯。

當我們在訪問一個站點的時候，如果訪問的地址不存在(404)，或服務器內部發生了錯誤(500)，站點會展示出某個特定的頁面，比如：

技術分享圖片

那麽如何在 Koa 中實現這種功能呢？其實，一個簡單的中間件即可實現，我們把它稱為 http-error。實現過程並不復雜，拆分為三步來看：

  • 第一步：確認需求
  • 第二步：整理思路
  • 第三步：代碼實現


確認需求

打造一個事物前，需要先確認它具有什麽特性，這就是需求。


在這裏，稍微整理下即可得到幾個基本需求：

  • 在頁面請求出現 400
    、 500 類錯誤碼的時候，引導用戶至錯誤頁面；
  • 提供默認錯誤頁面；
  • 允許使用者自定義錯誤頁面。


整理思路

現在，從一個請求進入 Koa 開始說起：

  1. 一個請求訪問 Koa，出現了錯誤；
  2. 該錯誤會被 http-error 中間件捕捉到；
  3. 錯誤會被中間件的錯誤處理邏輯捕捉到，並進行處理；
  4. 錯誤處理邏輯根據錯誤碼狀態，調用渲染頁面邏輯；
  5. 渲染頁面邏輯渲染出對應的錯誤頁面。

可以看到，關鍵點就是捕捉錯誤，以及實現錯誤處理邏輯和渲染頁面邏輯。


代碼實現

建立文件

基於教程目錄結構，我們創建 middleware/mi-http-error/index.js 文件，存放中間件的邏輯代碼。初始目錄結構如下:

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

註意： 目錄結構不存在，需要自己創建。


捕捉錯誤

該中間件第一項需要實現的功能是捕捉到所有的 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) {
      /*此處進行錯誤處理，下面會講解具體實現*/
    }
  }
}


上面的準備工作做完，下面實現兩個關鍵邏輯。


錯誤處理邏輯

錯誤處理邏輯其實很簡單，就是對錯誤碼進行判斷，並指定要渲染的文件名。這段代碼運行在錯誤 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

這幾個頁面文件我們會在後面創建，接下來我們開始講述下頁面渲染的問題。


渲染頁面邏輯

首先我們創建默認的錯誤頁面模板文件 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>


因為牽涉到文件路徑的解析，我們需要引入 path 模塊。另外，還需要引入 nunjucks 工具來解析模板。path 是 node 模塊，我們只需從 npm 上安裝nunjucks 即可。


安裝 nunjucks 模塊來解析模板文件：

npm i nunjucks -S


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

// 引入 path nunjucks 模塊 
const Path = require(‘path‘) 
const nunjucks = require(‘nunjucks‘)

module.exports = () => {
  // 此處代碼省略，與之前一樣
}


為了支持自定義錯誤文件目錄，原來調用中間件的代碼需要修改一下。我們給中間件傳入一個配置對象，該對象中有一個字段 errorPageFolder，表示自定義錯誤文件目錄。

修改 middleware/index.js：

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

註意： 代碼中，我們指定了 /errorPage 為默認的模板文件目錄。


修改 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
    }
  }
}


路徑和參數準備好之後，我們需要做的事情就剩返回渲染的頁面了。


修改 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 那裏拿來稍作修改的）。


在代碼的最後，我們還有一個異常的拋出 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)
      }
    }
  }) 
}


下面，我們增加對應的錯誤渲染頁面：

創建 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>


創建 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>


創建 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>


創建 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>


errorPage 中的頁面展示內容，可以根據自己的項目信息修改，以上僅供參考。


至此，我們基本完成了用來處理『請求錯誤』的中間件。而這個中間件並不是固定的形態，大家在真實項目中，還需要多考慮自己的業務場景和需求，打造出適合自己項目的中間件。

下一節中，我們將學習下規範與部署——制定合適的團隊規範，提升開發效率。

技術分享圖片

上一篇：iKcamp新課程推出啦～～～～～iKcamp｜基於Koa2搭建Node.js實戰（含視頻）? 處理靜態資源

推薦： 翻譯項目Master的自述：

1. 幹貨｜人人都是翻譯項目的Master

2. iKcamp出品微信小程序教學共5章16小節匯總(含視頻)

iKcamp｜基於Koa2搭建Node.js實戰（含視頻）? 錯誤處理

相關推薦

iKcamp｜基於Koa2搭建Node.js實戰（含視頻）? 錯誤處理

響應 當前 錯誤頁面 內部 修改 搭建 lock htm ret 滬江CCtalk視頻地址：https://www.cctalk.com/v/15114923887518 處理錯誤請求 愛能遮掩一切過錯。 當我們在訪問一個站點的時候，如果訪問的地址不存在(404)，或

iKcamp｜基於Koa2搭建Node.js實戰（含視頻）? 代碼分層

如果 讓我 span module input 數據 listen else nod 視頻地址：https://www.cctalk.com/v/15114923889408 文章 在前面幾節中，我們已經實現了項目中的幾個常見操作：啟動服務器、路由中間件、Get 和 Po

iKcamp｜基於Koa2搭建Node.js實戰（含視訊）☞ 解析JSON

JSON 資料 我顛倒了整個世界，只為擺正你的倒影。 前面的文章中，我們已經完成了專案中常見的問題，比如 路由請求、結構分層、檢視渲染、靜態資源等。 那麼，JSON 呢？JSON 格式資料的傳輸，已經深入到了我們的碼裡行間，脫離了 JS

《Node.js實戰（第2季）》試讀感想

看到這本書的目錄 立刻讓我精神抖擻 ，特別是“開發OAuth2認證伺服器”這個章節 ，上面描述的實現大致章節標題 比如用到了目前流行的restful api，因為之前 我也搞過oauth2 ,不過是用  Apache Oltu 整合shiro實現的 java版本的 OAuth

egg.js-基於koa2的node.js進階（一）

一、路由進階Egg路由的路由重定向，路由分組 在router.js修改為如下格式require引用 module.exports = app => { const { router, controller } = app; require('./routers/admin')(app); re

用node.js 搭建的部落格程式心得(node.js實戰讀書筆記1)

學習node已經有一段時間了，之前把了不起的node.js看完了，基本算了解了一些node的基本的用法還有一些概念了，然後就開始看第二本node.js實戰，第一章就是搭建一個部落格程式。但是不得不吐槽一下node，發展得太塊了，很多庫已經和之前的用法不一樣了，就

快速搭建 Node.js 開發環境以及加速 npm

sta pre undo packages 快速 lis app.js nat 簡單 快速搭建 Node.js 開發環境以及加速 npm 如何快速搭建 node 開發環境 npm 超慢 github 無法打開的問題 於是我覺得應該寫一篇文章解答所有這些起步問題，讓新同學

Ubuntu 16.04 64位 搭建 node.js NodeJS 環境

命令 放心 模塊 code tails 4.4 包名 oca ase 我的系統環境： Ubuntu 16.04 64位 本文內容親測可用， 請放心食用 使用淘寶鏡像 淘寶鏡像官網是https://npm.taobao.org/ 使用淘寶鏡像前請自行安裝好 npm 和 nod

node js實戰：帶數據庫，加密的註冊登錄表單

settings else input 是否 rip dig code setting 個人 demo 註冊效果： 登陸效果： 數據庫截圖： 數據庫操作 db.js //這個模塊裏面封裝了所有對數據庫的常用操作 var MongoClient =

搭建Node.js Redis開發環境

() func ron 8.0 .com pan color 9.png mil 創建項目 初始化為node項目 $npm init ?安裝redis ?安裝@types/node, @types/redis, typescript ?

Oracle 搭建Node.js開發環境

pen pass .exe ons ror spec family nod tco ?先決條件 安裝oralce客戶端驅動。 安裝node.js。 ?創建項目 安裝oracledb模塊 $npm install oracledb 如果失敗了，你可能要爬墻

DevExtreme 搭建Node.js開發環境

開發環境 local str 簡介 temp width tle size ola 簡介 DevExtreme is a component suite for creating highly responsive web applications for touch d

基於OpenResty和Node.js的微服務架構實踐

復雜 直接 簡單 暴露 zookeep 投放 維護 升級 回滾 什麽是微服務？ 傳統的單體服務架構是單獨服務包，共享代碼與數據，開發成本較高，可維護性、伸縮性較差，技術轉型、跨語言配合相對困難。而微服務架構強調一個服務負責一項業務，服務可以單獨部署，獨立進行技術選型和開發，

.NET基於Eleasticsearch搭建日誌系統實戰演練(公開版)

問題： 動手 控制 arch 推送 平臺 記錄 插件 解決 一、需求背景介紹 1.1、需求描述 大家都知道C/S架構模式的客戶端應用程序(比如：WinForm桌面應用、WPF、移動App應用程序、控制臺應用程序、Windows服務等等)的日誌記錄都存儲在本地客戶端中

Windows下快速搭建Node.js本地伺服器

首先我們要到Node.js官網下載對應版本的安裝包。 nodejs.cn/download 注意：Linux上安裝Node.js需要安裝Python 2.6 或 2.7 ，不建議安裝Python 3.0以上版本。  接著就是安裝，和安裝普通軟體類似，直接

Node.js 實戰 第2版

內容簡介 本書是 Node.js 的實戰教程，涵蓋了為開發產品級 Node 應用程式所需要的一切特性、技巧以及相關理念。從搭建 Node 開發環境，到一些簡單的演示程式，到開發複雜應用程式所必不可少的非同步程式設計。D2 版介紹了全棧開發者所需的全部技術，包括前端構建系統、選擇 Web 框架、在

Windows環境安裝與搭建node.js環境

參考文章：https://www.cnblogs.com/zhouyu2017/p/6485265.html 一、下載node.js，直接下一步至安裝完成。https://nodejs.org/en/ 二、測試安裝是否成功 1.win+R開啟命令視窗 2.輸入node -v或者npm -v，如果顯示對

Vue+Koa2移動電商實戰 （一）前端環境搭建

mage 移動電商 src 檢測 等待 -c localhost 接口 簡單的 這是我的第一套實戰系列博客，希望有更多的小夥伴兒能看到，也給自己個動力寫完這個系列的博文，大家共同學習共同進步。 這套博文全面的講解了vue+koa的實戰項目。涉及的技術：vue+Router+

搭建node.js+vue環境/react native環境

1、看這個網址根據上面將node.js下載下來 http://www.runoob.com/nodejs/nodejs-install-setup.html 2、如果node --version出現如下 v8.12.0版本號說明安裝成功 3、如果node安裝成功，npm也會連帶著

基於hapi的Node.js後端開發

基於hapi的Node.js後端開發 1.背景今年下半年公司線上程式頻繁出現問題。不是記憶體跑滿，就是CPU跑滿就是程式自己掛掉了。嚴重影響了現有的小程式業務。目前線上主要架構是dubbo-x搭建的分散式。之前主要用來為app做資料服務。解決思路1：優化現有架構，找到問題（奈何本人雖然寫了不少java程式碼