vite 기반 React 에서 console.log 기반 디버그 모드 구현하기

상용배포를 하게 되면 에러가 발생시에 상용서버에서 디버깅을 하기가 쉽지가 않다.

보통 build 를 하게 될 때, 불필요한 주석, 디버거, 콘솔을 없애고 minify 하게 되는데, 상용에서 에러가 난 경우에 개발용으로 만들었던 로그가 찍히지 않다보니 에러 발생시 개발서버를 이용해서 확인해야 되는 이슈가 발생하였음.

특히 프론트엔드에서는 직접 로그를 만들지 않으면, 로그 관리가 어렵다는 점이 발생함.

 

그래서! 상용서버에서 확인할 수 있도록, console.log 기반의 디버그 모드를 구현하기로 함.

1. 디버그 모드 함수 모듈화

const startDebugMode = () => {
  if (process.env.NODE_ENV === 'development') return
  window.setDebugMode = setDebugMode // window 에서 사용할 수 있도록 
}

export default startDebugMode

2. console.log 오버라이딩 작업

const setDegubMode = () => {
  const orgDebug = console.log
  startDebugModeMessage('DEBUG MODE START!!')
    
  console.log = (...args) => {
    if (window.__DEBUG_MODE__) {
       originalDebug.apply(console, args)
    }
  }
}

3. 디버그 시작용 메시지

const startDebugModeMessage = (message: string) => {
    if (window.__DEBUG_MODE__) {
        console.log('%cDEBUG: %s', 'color: white; background-color: red; font-size: 24px; font-weight: bold; padding: 10px; border-radius: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);', message);
    }
}

// 함수 호출 예시
startDebugModeMessage('This is a debug message.');

 

자 이제 준비는 완료 되었습니다. 아래 처럼 붙여서 사용합시다!

디버그 메시지 실행

 

vite 셋팅!

vite 기반의 프로젝트에서 build 시 console.log 를 지우고 싶으면, 아래와 같이 셋팅해줍니다.

대부분 vite가 5.x 버전이라 아래와 같이 하면 됨.

아래 플러그인을 하나 설치해줍시다!

yarn add @rollup/plugin-terser

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import terser from "@rollup/plugin-terser";

export default defineConfig({
  plugins: [react()],
  build: {
    target: "esnext",
    minify: false,
    rollupOptions: {
      plugins: [
        terser({
          compress: {
          	// 순수 함수 제거
            pure_funcs: [
              "console.info",
              "console.warn",
              "console.error",
              "console.debug",
            ],
            // drop_console: true,
            drop_debugger: true,
          },
        }),
      ],
    },
  },
});

 

추가적으로 console.log 를 다양하게 오버라이딩 해보자

(() => {
  const originalConsoleLog = console.log;

  console.log = (message, style = 'default', ...optionalParams) => {
    let styleString;

    switch (style) {
      case 'error':
        styleString = 'color: red; font-weight: bold;';
        break;
      case 'info':
        styleString = 'color: blue; font-weight: bold;';
        break;
      case 'warn':
        styleString = 'color: orange; font-weight: bold;';
        break;
      default:
        styleString = 'color: black;';
    }

    const styledMessage = `%c${message}`;
    originalConsoleLog.apply(console, [styledMessage, styleString, ...optionalParams]);
  };
})();