[NodeJS/Express] 미들웨어로 에러 처리

---

Intro.

서버 애플리케이션에서는 다양한 이유로 에러가 발생하게 된다.

만약 에러를 적절히 처리하지 못하면 애플리케이션은 죽어(?) 클라이언트에서의 요청을 처리하지 못한다. 

당연히 유저가 이러한 상황을 겪게되면 기분이 매우 좋지 않을 것이다.

극단적으로는 서비스 더이상 사용하지 않을 수도...

 

따라서, 서버에서 에러를 적절히 처리하도록(서버가 죽지 않도록) 설계하고 개발하는 것은 매우 중요하다!

---

What.

오늘은 미들웨어(Middleware)를 이용해 에러를 처리하는 방법에 대해서 알아볼 것이다.

개발언어와 프레임워크는 각각 node.js, express를 사용했다.

---

Description.

1. npm 프로젝트 시작하기

npm init 명령어를 입력해서 새로운 프로젝트를 생성한다!

// npm 프로젝트 생성
npm init

명령어를 입력하고 Enter를 계속 입력해주면

package.json 파일이 생성된다!

 

 

2. express 설치하기

npm install express 명령어를 입력해서 express를 설치한다.

// express 설치
npm install express

express가 설치되면

package.json dependencies에 express가 생성된다.

또한 package-lock.json 파일과 node_modules 폴더가 생성된다.

 

3. 서버 띄어보기 (Hello World 예제)

express를 설치했으면

express를 이용해서 서버를 띄어보자!

 

먼저 app.js 파일을 생성하자

 

그리고 express 공식문서에서

예제 코드를 복사 붙여넣기 해보자 → 📒공식문서 링크

 

현재 3000번 포트를 사용하고 있기 때문에

포트만 3333번으로 수정하자!

 

 

그럼 node app.js 명령어를 입력해서 서버를 띄어보자!

// app.js 실행
node app.js

터미널에 아래처럼 문구가 display 되면 성공이다!

// terminal
Example app listening on port 3333

 

터미널에 node app.js 명령어를 입력한 결과

 

마지막으로

웹 브라우저에

http://localhost:3333

을 입력해보자!

 

아래 캡처 화면처럼 나오면 성공적으로

서버 애플리케이션을 성공적으로 띄운 것이다!

브라우저에서 Hello World가 표시됨

4. 에러 발생시키기

자 이제 에러를 발생시켜보자

에러는 /error 엔드포인트에 요청을 보내면 발생하도록 해보자

 

이를 위해 app.js에 아래 코드를 9 ~ 11번째 줄에 추가해주자

// 에러 발생
app.get('/error', (req, res) => {
    throw new Error('에러가 발생되었습니다!')
})

 

 

그리고 다시 터미널에 node app.js 명령어를 입력해 서버를 띄우고

웹 브라우저에

http://localhost:3333/error

을 입력해보자!

 

그럼 아래와 같이 에러가 발생이 된 것을 확인할 수 있다!

에러가 발생했을 때 브라우저(위), 터미널 창(아래) 모습

 

5. 미들웨어로 에러 처리하기

이번에는 미들웨어를 작성하여 에러를 처리해보자.

이 미들웨어는 에러가 발생하면 status code, message 정보를 반환해주도록 구현해보자.

 

코드를 아래와 같이 수정한 후 

서버를 띄어보자 (node app.js 명령어 입력!)

 

status code를 확인하기 위해

웹 브라우저에서 F12를 눌러 Chrome 개발자 도구를 열고 Network 탭으로 이동하자.

 

준비되었으면 브라우저에 다시

http://localhost:3333/error

을 입력해보자!

const express = require('express')
const app = express()
const port = 3333

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.get('/error', (req, res, next) => {
    var error = new Error;
    error.message = "에러가 발생했습니다.";
    error.status = 400;
    next(error);
})

app.use(function(err, req, res, next) {
    console.error(err.stack);
    // err.status에 값이 없으면 500을 출력
    // err.message에 값이 없으면 'Something broke!'를 출력
    res.status(err.status || 500).send(err.message || 'Something broke!');
  });

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

브라우저에서 

'에러가 발생했습니다'

메시지가 출력된 걸 확인할 수 있다.

 

또한 Network 탭에서 Status Code가 400임을 확인할 수 있다!

브라우저에서 확인된 에러 메시지 및 status code

---

References. 

- express 공식 문서: https://expressjs.com/

Express - Node.js web application framework

 

- node.js + express 이미지 출처: https://velog.io/@gidong_e/Node.js-Express

[Node.js] Express