Rails 애플리케이션에서 esbuild 오류 처리 개선: 브라우저에 직접 오류 표시

Enhancing Esbuild Error Handling in a Rails App

작성자
DotRuby
발행일
2025년 01월 30일
원문 보기
www.dotruby.com

핵심 요약

  • 1 Rails 개발 환경에서 esbuild 빌드 오류가 터미널에만 표시되는 문제를 해결하기 위해 브라우저에 직접 오류를 렌더링하는 시스템을 구현했습니다.
  • 2 .gitignore, ApplicationController concern, 사용자 정의 esbuild 플러그인을 활용하여 빌드 오류를 파일로 기록하고, Rails before_action을 통해 이를 읽어 브라우저에 표시합니다.
  • 3 이 솔루션은 개발자가 터미널과 브라우저를 오가는 번거로움을 줄여 디버깅 효율성을 크게 향상시키며, Rails 앱 템플릿을 통해 쉽게 적용할 수 있습니다.

도입

Rails 애플리케이션 개발 시 esbuild를 사용하여 자산을 번들링할 때, 빌드 오류가 터미널에만 표시되어 개발자가 문제를 즉시 인지하고 디버깅하기 어려운 경우가 많습니다. 특히 `bin/dev`와 같이 `--watch` 옵션으로 esbuild를 실행할 경우, 오류가 발생해도 애플리케이션은 이전에 빌드된 파일을 제공하여 문제가 간과될 수 있습니다. 본 문서에서는 이러한 개발 경험을 개선하기 위해 esbuild 오류를 개발 중인 브라우저에 직접 표시하는 자동 오류 렌더링 시스템의 구현 방법을 상세히 설명합니다.

문제점 및 해결책 개요

Rails 앱 개발 시 esbuild 빌드 오류는 터미널에만 표시되어 개발자가 문제를 놓치기 쉽습니다. 이를 해결하기 위해 오류를 파일에 기록하고, Rails before_action을 통해 브라우저에 직접 렌더링하는 시스템을 구축했습니다.

구현 단계

  1. .gitignore 설정: esbuild_error_*.txt 파일을 Git 추적에서 제외합니다.
  2. ApplicationController 수정: 개발 환경에서만 EsbuildErrorRendering concern을 포함하도록 설정합니다. ruby class ApplicationController < ActionController::Base include EsbuildErrorRendering if Rails.env.development?
  3. EsbuildErrorRendering concern 생성:
    • ESBUILD_ERROR 상수로 오류 파일 경로를 정의합니다.
    • before_action :render_esbuild_error를 등록하여 오류 파일이 존재하고 비어있지 않을 경우(조건 render_esbuild_error?) 브라우저에 오류를 HTML 형식으로 렌더링합니다.
  4. esbuild 오류 로깅 설정 (esbuild.config.mjs):
    • 사용자 정의 onEndPlugin을 추가합니다.
    • 빌드 완료 시 오류가 발생하면, 해당 오류를 포맷하여 esbuild_error_${RAILS_ENV}.txt 파일에 기록합니다.
    • 오류가 없으면 기존 오류 파일을 비웁니다.
  5. package.json 업데이트: build 스크립트를 node esbuild.config.mjs로 변경하여 사용자 정의 설정을 사용하도록 합니다.

이러한 과정을 통해 esbuild 오류가 발생하면 브라우저에 즉시 표시되어 디버깅 효율성을 크게 높일 수 있습니다. 또한, Rails 앱 템플릿을 통해 이 기능을 손쉽게 적용할 수 있습니다.

결론

본 시스템은 Rails 애플리케이션 개발 시 esbuild 빌드 오류를 브라우저에 직접 표시함으로써 개발 경험을 크게 개선합니다. 터미널과 브라우저를 번갈아 확인하는 번거로움을 없애고, 오류 발생 시 즉각적인 시각적 피드백을 제공하여 디버깅 효율성을 극대화합니다. 이 접근 방식은 Rails의 개발 환경과 원활하게 통합되며, 책임 분리 원칙을 준수합니다. 제공된 Rails 앱 템플릿을 활용하면 이러한 고급 오류 처리 기능을 최소한의 노력으로 기존 프로젝트에 적용할 수 있어, 개발 생산성 향상에 기여할 것입니다.

관련 글들

Rails 7의 Error Reporter API 활용: 효율적인 오류 관리를 위한 표준화된 접근 방식

Rails 7에서 도입된 Error Reporter API는 애플리케이션 내 예외를 추적, 보고, 대응하는 표준화된 방법을 제공합니다.

07/02 읽어보기 →

Stimulus를 활용한 클라이언트 측 유효성 검사 메시지 개선

네이티브 HTML `pattern` 및 `title` 속성을 활용하여 클라이언트 측 유효성 검사를 효율적으로 구현합니다.

08/20 읽어보기 →

Action View의 진화: Herb를 통한 Rails 뷰 레이어 개선

Herb는 HTML ERB 파일을 위한 새로운 파서, 포매터, 린터, 언어 서버 등 통합 도구 생태계로, Rails 뷰 레이어의 개발 경험을 혁신합니다.

07/24 읽어보기 →

Rails 프런트엔드 자산 관리 전략의 진화

Rails의 프런트엔드 자산 관리 방식은 시간이 지남에 따라 크게 변화했으며, 이는 레거시 앱 유지보수 시 혼란을 야기합니다.

06/17 읽어보기 →

댓글 0

댓글 작성

0/1000
정중하고 건설적인 댓글을 작성해 주세요.

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!