iKcamp｜基于Koa2搭建Node.js實戰(zhàn)（含視頻）? 錯誤處理

leeon 發(fā)布于2019-08-26 11:35 / 1081人閱讀

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

處理錯誤請求

愛能遮掩一切過錯。

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

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

第一步：確認(rèn)需求

第二步：整理思路

第三步：代碼實現(xiàn)

確認(rèn)需求

打造一個事物前，需要先確認(rèn)它具有什么特性，這就是需求。

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

在頁面請求出現(xiàn) 400 、 500 類錯誤碼的時候，引導(dǎo)用戶至錯誤頁面；

提供默認(rèn)錯誤頁面；

允許使用者自定義錯誤頁面。

整理思路

現(xiàn)在，從一個請求進(jìn)入 Koa 開始說起：

一個請求訪問 Koa，出現(xiàn)了錯誤；

該錯誤會被 http-error 中間件捕捉到；

錯誤會被中間件的錯誤處理邏輯捕捉到，并進(jìn)行處理；

錯誤處理邏輯根據(jù)錯誤碼狀態(tài)，調(diào)用渲染頁面邏輯；

渲染頁面邏輯渲染出對應(yīng)的錯誤頁面。

可以看到，關(guān)鍵點(diǎn)就是捕捉錯誤，以及實現(xiàn)錯誤處理邏輯和渲染頁面邏輯。

代碼實現(xiàn) 建立文件

基于教程目錄結(jié)構(gòu)，我們創(chuàng)建 middleware/mi-http-error/index.js 文件，存放中間件的邏輯代碼。初始目錄結(jié)構(gòu)如下:

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

注意： 目錄結(jié)構(gòu)不存在，需要自己創(chuàng)建。

捕捉錯誤

該中間件第一項需要實現(xiàn)的功能是捕捉到所有的 http 錯誤。根據(jù)中間件的洋蔥模型，需要做幾件事：

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) => {
  // 應(yīng)用請求錯誤中間件
  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，在中間件內(nèi)部對內(nèi)層的其它中間件進(jìn)行錯誤監(jiān)聽，并對捕獲 catch 到的錯誤進(jìn)行處理

module.exports = () => {
  return async (ctx, next) => {
    try {
       await next();
       /**
        * 如果沒有更改過 response 的 status，則 koa 默認(rèn)的 status 是 404 
        */
       if (ctx.response.status === 404 && !ctx.response.body) ctx.throw(404);
    } catch (e) {
      /*此處進(jìn)行錯誤處理，下面會講解具體實現(xiàn)*/
    }
  }
}

上面的準(zhǔn)備工作做完，下面實現(xiàn)兩個關(guān)鍵邏輯。

錯誤處理邏輯

錯誤處理邏輯其實很簡單，就是對錯誤碼進(jìn)行判斷，并指定要渲染的文件名。這段代碼運(yùn)行在錯誤 catch 中。

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

module.exports = () => {
  let fileName = "other"
  return async (ctx, next) => {
    try {
       await next();
       /**
        * 如果沒有更改過 response 的 status，則 koa 默認(rèn)的 status 是 404 
        */
       if (ctx.response.status === 404 && !ctx.response.body) ctx.throw(404);
    } catch (e) {
      let status = parseInt(e.status)
      // 默認(rèn)錯誤信息為 error 對象上攜帶的 message
      const message = e.message

      // 對 status 進(jìn)行處理，指定錯誤頁面文件名 
      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

這幾個頁面文件我們會在后面創(chuàng)建，接下來我們開始講述下頁面渲染的問題。

渲染頁面邏輯

首先我們創(chuàng)建默認(rèn)的錯誤頁面模板文件 mi-http-error/error.html，這里采用 nunjucks 語法。




  Error - {{ status }}


  
    Error - {{ status }}
    Looks like something broke!
    {% if (env === "development") %}
    Message:
          
        {{ error }}
      
    
    Stack:
          
        {{ stack }}
      
     
    {% endif %}

因為牽涉到文件路徑的解析，我們需要引入 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 = () => {
  // 此處代碼省略，與之前一樣
}

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

修改 middleware/index.js：

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

注意： 代碼中，我們指定了 /errorPage 為默認(rèn)的模板文件目錄。

修改 mi-http-error/index.js，處理接收到的參數(shù)：

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

module.exports = (opts = {}) => {
  // 400.html 404.html other.html 的存放位置
  const folder = opts.errorPageFolder
  // 指定默認(rèn)模板文件
  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{// 其它情況，統(tǒng)一返回為 500
        status = 500
        fileName = status
      }
      // 確定最終的 filePath 路徑
      const filePath = folder ? Path.join(folder, `${fileName}.html`) : templatePath
    }
  }
}

路徑和參數(shù)準(zhǔn)備好之后，我們需要做的事情就剩返回渲染的頁面了。

修改 mi-http-error/index.js，對捕捉到的不同錯誤返回相應(yīng)的視圖頁面：

const Path = require("path") 
const nunjucks = require("nunjucks")
module.exports = (opts = {}) => {
  // 增加環(huán)境變量，用來傳入到視圖中，方便調(diào)試
  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
      
      // 渲染對應(yīng)錯誤類型的視圖，并傳入?yún)?shù)對象
      try{
        // 指定視圖目錄
        nunjucks.configure( folder ? folder : __dirname )
        const data = await nunjucks.render(filePath, {
          env: env, // 指定當(dāng)前環(huán)境參數(shù)
          status: e.status || e.message, // 如果錯誤信息中沒有 status，就顯示為 message
          error: e.message, // 錯誤信息
          stack: e.stack // 錯誤的堆棧信息
        })
        // 賦值給響應(yīng)體
        ctx.status = status
        ctx.body = data
      }catch(e){
        // 如果中間件存在錯誤異常，直接拋出信息，由其他中間件處理
        ctx.throw(500, `錯誤頁渲染失敗:${e.message}`)
      }
    }
  }
}

上面所做的是使用渲染引擎對模板文件進(jìn)行渲染，并將生成的內(nèi)容放到 Http 的 Response 中，展示在用戶面前。感興趣的同學(xué)可以去中間件源碼中查看 error.html 查看模板內(nèi)容（其實是從 koa-error 那里拿來稍作修改的）。

在代碼的最后，我們還有一個異常的拋出 ctx.throw()，也就是說，中間件處理時候也會存在異常，所以我們需要在最外層做一個錯誤監(jiān)聽處理。

修改 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())

  // 增加錯誤的監(jiān)聽處理
  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)
      }
    }
  }) 
}

下面，我們增加對應(yīng)的錯誤渲染頁面：

創(chuàng)建 errorPage/400.html：




  400


  
    Error - {{ status }}
    錯誤碼 400 的描述信息
    {% if (env === "development") %}
    Message:
          
        {{ error }}
      
    
    Stack:
          
        {{ stack }}
      
     
    {% endif %}

創(chuàng)建 errorPage/404.html：




  404


  
    Error - {{ status }}
    錯誤碼 404 的描述信息
    {% if (env === "development") %}
    Message:
          
        {{ error }}
      
    
    Stack:
          
        {{ stack }}
      
     
    {% endif %}

創(chuàng)建 errorPage/500.html：




  500


  
    Error - {{ status }}
    錯誤碼 500 的描述信息
    {% if (env === "development") %}
    Message:
          
        {{ error }}
      
    
    Stack:
          
        {{ stack }}
      
     
    {% endif %}

創(chuàng)建 errorPage/other.html：




  未知異常


  
    Error - {{ status }}
    未知異常
    {% if (env === "development") %}
    Message:
          
        {{ error }}
      
    
    Stack:
          
        {{ stack }}
      
     
    {% endif %}

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

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

下一節(jié)中，我們將學(xué)習(xí)下規(guī)范與部署——制定合適的團(tuán)隊規(guī)范，提升開發(fā)效率。

上一篇：iKcamp新課程推出啦～～～～～iKcamp｜基于Koa2搭建Node.js實戰(zhàn)（含視頻）? 處理靜態(tài)資源

推薦：翻譯項目Master的自述： 1. 干貨｜人人都是翻譯項目的Master 2. iKcamp出品微信小程序教學(xué)共5章16小節(jié)匯總(含視頻)

GPU云服務(wù)器云服務(wù)器搭建 node.js 云主機(jī) 搭建 node.js 云vps webrtc node.js服務(wù)搭建搭建 node.js 云服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/107179.html

發(fā)表評論

登陸后可評論

0條評論

leeon

男|高級講師

我要關(guān)注我要私信

TA的文章

【Python從入門到精通】五萬六千字對Python基礎(chǔ)知識做一個了結(jié)吧?。ǘ耍局档檬詹亍?/a>

閱讀 862·2021-10-14 09:43

Python爬蟲--高性能的異步爬蟲（五）

閱讀 2189·2021-09-30 09:48
蘋果秋季發(fā)布會官宣 9 月 15 日，全新 iPhone 13/Pro 系列即將到來

閱讀 3534·2021-09-08 09:45
25k成功入職京東：拿到京東軟件測試崗位offer經(jīng)驗分享

閱讀 1170·2021-09-02 15:41
creanova：creanova介紹，自營機(jī)房，芬蘭VPS 10.00 EUR/月，芬蘭服務(wù)器月付

閱讀 1956·2021-08-26 14:15
CloudPowerall：洛杉磯Cera機(jī)房便宜VPS/1核1G/8 G存儲/100Mbps AS

閱讀 853·2021-08-03 14:04
讓一排圖片水平居中對齊

閱讀 3043·2019-08-30 15:56
帶標(biāo)簽的長標(biāo)題省略展示的實現(xiàn)

閱讀 3132·2019-08-30 15:52

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

iKcamp｜基于Koa2搭建Node.js實戰(zhàn)（含視頻）? 錯誤處理

Error - {{ status }}

Message:

Stack:

Error - {{ status }}

Message:

Stack:

Error - {{ status }}

Message:

Stack:

Error - {{ status }}

Message:

Stack:

Error - {{ status }}

Message:

Stack:

相關(guān)文章

**開始連載啦～每周２更共11堂iKcamp課｜基于Koa2搭建Node.js實戰(zhàn)項目教學(xué)（含視頻）|**

**【完結(jié)匯總】iKcamp出品基于Koa2搭建Node.js實戰(zhàn)共十一堂課(含視頻)**

iKcamp｜基于Koa2搭建Node.js實戰(zhàn)（含視頻）? 代碼分層

iKcamp｜基于Koa2搭建Node.js實戰(zhàn)（含視頻）? HTTP請求

iKcamp｜基于Koa2搭建Node.js實戰(zhàn)（含視頻）? 解析JSON

發(fā)表評論

0條評論

leeon

男|高級講師

TA的文章

【Python從入門到精通】五萬六千字對Python基礎(chǔ)知識做一個了結(jié)吧?。ǘ耍局档檬詹亍?/a>

Python爬蟲--高性能的異步爬蟲（五）

蘋果秋季發(fā)布會官宣 9 月 15 日，全新 iPhone 13/Pro 系列即將到來

25k成功入職京東：拿到京東軟件測試崗位offer經(jīng)驗分享

creanova：creanova介紹，自營機(jī)房，芬蘭VPS 10.00 EUR/月，芬蘭服務(wù)器月付

CloudPowerall：洛杉磯Cera機(jī)房便宜VPS/1核1G/8 G存儲/100Mbps AS

讓一排圖片水平居中對齊

帶標(biāo)簽的長標(biāo)題省略展示的實現(xiàn)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

iKcamp｜基于Koa2搭建Node.js實戰(zhàn)（含視頻）? 錯誤處理

Error - {{ status }}

Message:

Stack:

Error - {{ status }}

Message:

Stack:

Error - {{ status }}

Message:

Stack:

Error - {{ status }}

Message:

Stack:

Error - {{ status }}

Message:

Stack:

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！