Nuxt SSR에서 axios error log 기록하기

개요

nuxt ssr에서 response를 못 받아오는 문제가 발생했는데 디버그 할 수 있는 방법이 서버를 띄운 상태에서의 콘솔로그를 보는 방법밖에 없어서 일단 외부 로그 파일로 기록을 남기는 걸 목표로 했던 과정을 기록

 

우선 Nuxt의 Programmatically에 대한 지식이 필요하다.

https://nuxtjs.org/docs/internals-glossary/nuxt/

Using Nuxt Programmatically

 

로그파일을 남기기 위해서는 서버를 사용해야 하는데 이를 위해 serverMiddleware로써 express를 두는 것이다.

쉽게 말하면 nuxt의 ssr을 nodejs 마련 되어 있는 환경에서 바로 실행하는게 아니라 그 사이에 express를 두는것..!

 

왜 쓰냐? 지금 상황과 같이 내부적으로 서버의 기능을 하는 친구가 필요할 때나 아니면 Serverless한 어플리케이션을 만들때도 유용하게 사용할 수 있다.

 

간략하게 개발내용에 대해 설명하자면 우선 내부에서 axios가 에러가 발생했을때 그걸 logger로 기록하게 하는게 제일 문제였다. 에러 발생한걸 express에서 catch하게 하는건 거의 불가능?해 보였고 (ssr과정에서 내부 node서버에서 외부 API Server에 request를 하는거지 express 자체에 request를 하는 형태가 아니다) logger 자체를 export해서 사용하는것도 아직까지 잘 몰라서 그런건지 잘 안되었었다. 최종적으로 선택한 방법은 axios 에러가 발생했을때 기록을 위한 request를 내부서버에 한번더 날려주는걸로 하였다.

server/index.js

const express = require('express')
const app = express()
const log4js = require('log4js')
const { systemLogger } = require('./logger')
app.use(log4js.connectLogger(systemLogger, { level: 'auto' }))

const { loadNuxt, build } = require('nuxt')
const isDev = process.env.NODE_ENV !== 'production'

async function start() {
  // Init Nuxt.js
  const nuxt = await loadNuxt(isDev ? 'dev' : 'start')

  const { host, port } = nuxt.options.server

  app.use(express.json()) // req.body에 json형식으로 저장하기 위해
  
  // 로깅하기
  app.post('/api/error', (req, res) => {
    systemLogger.error(req.body)
    res.json({ message: 'Success Error log' })
  })
  // Render every route with Nuxt
  app.use(nuxt.render)

  // Build only in dev mode with hot-reloading
  if (isDev) {
    build(nuxt)
  }
  // Listen the server
  app.listen(port, host)
  // Listen the server
  systemLogger.info(`Server listening on http://${host}:${port}`)
}

start()

 

server/logger.js

const log4js = require('log4js')

const d = new Date()

const directoryFormatted = `${d.getFullYear()}${(d.getMonth() + 1)
  .toString()
  .padStart(2, '0')}${d.getDate().toString().padStart(2, '0')}`.replace(
  /\n|\r/g,
  ''
)

const patternFormatted = `-${d.getFullYear()}-${(d.getMonth() + 1)
  .toString()
  .padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`.replace(
  /\n|\r/g,
  ''
)

log4js.configure({
  appenders: {
    system: {
      type: 'dateFile',
      filename: `logs/${directoryFormatted}/front_server.log${patternFormatted}`,
    },
  },
  categories: {
    default: {
      appenders: ['system'],
      level: 'ALL',
    },
  },
})

const systemLogger = log4js.getLogger('system')

module.exports = { systemLogger }

 

plugins/axios.js

export default ({ $axios }) => {
  $axios.onResponse((response) => {
    console.log(`[${response.status}] ${response.request.path}`)
  })

  $axios.onError(async (err) => {
    if (!process.browser) {
      // FIXME: 다른방식으로 baseURL을 바꾸자
      $axios.defaults.baseURL = 'http://localhost:5000'
      // axios error일시 다시한번 내부서버에서 로깅을 하기위해 request를 날린다.
      await $axios.post('/api/error', {
        message: `code: [${err.response && err.response.status}] path: ${
          err.response && err.response.request.path
        } message: ${
          err.response && err.response.data && err.response.data.message
        }`,
      })
    }
  })
}

 

 

결과

[2022-09-04T21:28:23.174] [ERROR] system - {
  message: 'code: [401] path: /api/admin/product message: unauthorized'
}
[2022-09-04T21:28:23.175] [INFO] system - 127.0.0.1 - - "POST /api/error HTTP/1.1" 200 31 "" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.195] [INFO] system - 127.0.0.1 - - "GET / HTTP/1.1" 200 2310 "" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.231] [WARN] system - 127.0.0.1 - - "GET /_nuxt/runtime.js HTTP/1.1" 304 - "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.255] [WARN] system - 127.0.0.1 - - "GET /_nuxt/commons/app.js HTTP/1.1" 304 - "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.259] [WARN] system - 127.0.0.1 - - "GET /_nuxt/vendors/app.js HTTP/1.1" 304 - "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.272] [WARN] system - 127.0.0.1 - - "GET /_nuxt/pages/index.js HTTP/1.1" 304 - "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.275] [WARN] system - 127.0.0.1 - - "GET /_nuxt/app.js HTTP/1.1" 304 - "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.280] [WARN] system - 127.0.0.1 - - "GET /_nuxt/commons/app.js HTTP/1.1" 304 - "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.281] [WARN] system - 127.0.0.1 - - "GET /_nuxt/runtime.js HTTP/1.1" 304 - "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.283] [ERROR] system - 127.0.0.1 - - "GET /favicon.ico HTTP/1.1" 404 - "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.286] [WARN] system - 127.0.0.1 - - "GET /_nuxt/vendors/app.js HTTP/1.1" 304 - "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.291] [WARN] system - 127.0.0.1 - - "GET /_nuxt/app.js HTTP/1.1" 304 - "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
[2022-09-04T21:28:23.292] [WARN] system - 127.0.0.1 - - "GET /_nuxt/pages/index.js HTTP/1.1" 304 - "http://localhost:5000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"