404에러와 500에러 핸들링

404 에러

요청에 해당하는 페이지를 찾을 수 없는 경우에 따로 뭔가를 해주지 않는다면 서버는 브라우저에 응답을 보내지 않고, 결국 시간 초과가 된다.

const restaurantId = req.params.id;
  for (restaurant of storedRestaurants) {
    if (restaurant.id === restaurantId) {
      return res.render("restaurants-detail", { restaurant: restaurant });
    }
  }

코드의 일부. 레스토랑에 uuid패키지로 고유의 id를 할당하고 id가 일치할 때 레스토랑의 정보를 렌더링하도록 하였다. id를 찾지 못하는 경우를 알고 싶으므로 if문 뒤에 else를 추가한다면 이는 좋은 방법이 아니다. 반복문에서 id를 찾을 수도 있고 없을 수도 있는데, else를 사용하면 찾지 못하자 마자 너무 일찍 오류가 났다고 알려주게 된다. 그러므로 for문이 끝날 때까지 기다린 후 모든 경우의 수를 보고 나서 오류가 났다고 알려줘야 한다.

이때 오류가 났다고 알려줄 때에는 여러 방법들이 있는데, 직접 페이지에 <% if~~~%>문을 사용하여 데이터가 없을 때 다른 데이터를 보여주거나 404페이지를 추가할 수 있다.

404 페이지를 출력하려면 단순하게 404페이지에 해당하는 ejs파일을 만들고, 이를 경우의 수를 모두 살펴본 부분 이후에 렌더링하면 된다.

    <main>
      <h1>page not found!</h1>
      <p>
        we weren't able to find this page..
      </p>
    </main>

404.ejs파일의 일부.

  const restaurantId = req.params.id;
  for (restaurant of storedRestaurants) {
    if (restaurant.id === restaurantId) {
      return res.render("restaurants-detail", { restaurant: restaurant });
    }
  }

  res.render('404');

render메서드로 404페이지를 응답으로 준다.

존재하지 않는 id를 입력하면 404페이지로 이동하고 있다.

혹은 사용자가 주소를 입력하다가 restaurants를 restaurant으로 입력하거나 아무튼 어떤 곳에서 어떠한 오타가 났다고 할 때의 404페이지를 추가하려면 이는 내가 설정한 경로가 아닌 다른 모든 곳에서의 요청을 포착할 필요가 있다.

이때는 함수를 따로 정의하여 미들웨어로 사용하면 된다

app.use(function(req, res){
  res.render('404');
})

기본적으로 모든 요청은 미들웨어 함수와 내가 설정한 라우트를 통해 들어오기 때문에 이렇게 미들웨어를 설정하면 들어오는 모든 요청을 살펴보게 된다. 그러므로 내가 설정한 라우트 이외의 요청이 들어왔을 때 404페이지를 응답으로 주어야 하므로 위의 코드는 설정한 라우트들보다 밑에 존재해야 한다.

이제 오타가 발생해도 404페이지를 응답으로 주게 된다.

500 에러

500에러는 서버 측에서 문제가 발생했을 때(파일을 불러오지 못하거나 사용자가 많아서 읽기와 쓰기 동작에서 충돌이 발생하는 경우 등) 일어난다.
이 또한 404에러와 마찬가지로 500에러에 해당하는 ejs파일을 만든 후에 미들웨어를 추가하면 된다.

app.use(function(error, req, res, next){
  res.render('500');
})

이때 미들웨어에는 반드시 네 개의 파라미터를 받도록 해주어야 한다. 그래야 express가 이 미들웨어를 기본 에러 핸들링 함수라고 인식하기 때문이다. error는 말 그대로 에러에 관한 것이고, next는 이후에 실행할 미들웨어를 지정하는 파라미터이다. 이제 express 애플리케이션에 어떤 부분에서 에러가 발생하면 이 미들웨어가 작동한다.

status code 추가

사실 지금까지의 에러 핸들링은 사실 엄밀히 따지면 진짜 핸들링이 아니었다. 개발자 도구를 열고 내가 추가한 404에러 페이지를 봐보면 오른쪽 밑에 status code가 404가 아니라 304로 표시되고 있다.

+원래 제대로 로드가 되었다면 200이 status code이나 이는 크롬 브라우저에서 이전의 응답을 캐싱하여 html파일을 내 컴퓨터에 로컬로 저장한 후, 후속 요청을 더 빠르게 처리하고 있기 때문이다. 위쪽의 Disable cache를 클릭하면 200으로 바뀐다. 아무튼 요청이 성공했다는 뜻이다. 404가 아니라.

이를 해결하기 위해서는 응답객체 res에 status메서드를 사용하여 사용자 정의 status code를 설정해주면 끝이다.

app.use(function(req, res){
  res.status(404).render('404');
})

app.use(function(error, req, res, next){
  res.status(500).render('500');
})

페이지는 아무런 변화가 없으나 적절한 status code가 나타나고 있다. 이렇게 해주지 않으면 일부 브라우저 최적화 과정에서 문제가 발생할 수 있다는데 아직 뭔지는 잘 모르겠다..

+express를 사용하니 정말 편리하긴 한데 개발자로서의 실력을 높이려면 이런거 없이도 해당 기능을 구현할 수 있어야 할 것 같다.