Skip to content

fix: egovFetch 오류 처리 버그 수정 - #151

Closed
bluejick wants to merge 1 commit into
eGovFramework:mainfrom
bluejick:fix/egovFetch-error-handling
Closed

bluejick wants to merge 1 commit into
eGovFramework:mainfrom
bluejick:fix/egovFetch-error-handling

Conversation

@bluejick

@bluejick bluejick commented Sep 9, 2026

Copy link
Copy Markdown

수정 사유 Reason for modification

  • 버그수정 Bug fixes
  • 기능개선 Enhancements
  • 기능추가 Adding features
  • 기타 Others

수정된 소스 내용 Modified source

src/api/egovFetch.js 파일의 3가지 버그를 수정합니다.

1. TypeError 문자열 비교 버그 수정
네트워크 연결 실패 시 "서버와의 연결이 원활하지 않습니다" 알림이 표시되지 않는 버그를 수정합니다.

  • 원인: error === "TypeError: Failed to fetch" 는 Error 객체와 문자열을 비교하므로 항상 false
  • 수정: error instanceof TypeError 로 교체

2. HTTP 오류 응답(4xx/5xx) 미처리 수정
서버가 500 등 오류 응답을 반환해도 .catch()에 도달하지 않아 오류 처리가 되지 않는 문제를 수정합니다.

  • 원인: response.ok 체크 없이 .json() 호출
  • 수정: response.ok 검사 후 오류 시 throw 하여 .catch()로 전달

3. URL 파라미터 인코딩 누락 수정
한글, &, = 등 특수문자가 포함된 검색어가 올바르게 전달되지 않는 문제를 수정합니다.

  • 원인: Object.entries().map().join() 방식은 URL 인코딩 미적용
  • 수정: URLSearchParams 로 교체

JUnit 테스트 JUnit tests

  • JUnit 테스트 JUnit tests
  • 수동 테스트 Manual testing

테스트 브라우저 Test Browser

  • Chrome

테스트 스크린샷 또는 캡처 영상 Test screenshots or captured video

[케이스 1] HTTP 오류(500) 알림 테스트

  • 방법: 백엔드 서버를 중지한 상태에서 공지사항 목록 페이지 접속
    • Vite dev 서버의 프록시가 백엔드 연결 실패 시 500을 반환하는 점을 활용
  • 수정 전: 콘솔에 requestFetch error만 출력되고 사용자 알림 없음
  • 수정 후: "요청 처리 중 오류가 발생했습니다." 알림 표시 ✅
image

[케이스 2] 네트워크 연결 불가(TypeError) 알림 테스트

  • 방법: .env.developmentVITE_APP_API_BASE_URL=http://localhost:8080 설정하여
    Vite 프록시를 우회하고 브라우저가 백엔드에 직접 요청하도록 구성 후,
    백엔드 서버 중지 상태에서 공지사항 목록 페이지 접속
  • 수정 전: 콘솔에 requestFetch error만 출력되고 사용자 알림 없음
  • 수정 후: "서버와의 연결이 원활하지 않습니다. 서버를 확인하세요." 알림 표시 ✅
image

[케이스 3] 정상 동작 확인

  • 방법: 백엔드 서버 정상 구동 상태에서 공지사항 목록 페이지 접속
  • 결과: 기존 동작 그대로 정상 로딩 ✅

@bluejick

bluejick commented Sep 9, 2026

Copy link
Copy Markdown
Author

공지사항 목록(EgovNoticeList) 등 일부 페이지에서 빈 errorHandler(function() {})를
명시적으로 전달하고 있어, 해당 페이지에서는 오류 알림이 표시되지 않습니다.
이는 개발자가 의도적으로 오류를 조용히 처리하도록 설계한 것으로 판단하여 수정하지 않았습니다.
수동 테스트 시에는 errorHandler를 전달하지 않는 별도 호출 경로를 통해
오류 알림 동작을 확인하였습니다.

@eGovFrameSupport

eGovFrameSupport commented Sep 10, 2026

Copy link
Copy Markdown
Contributor

표준프레임워크에 대한 지속적인 참여에
대단히 감사드립니다. 검토 결과 공유 드립니다.

  1. instanceof TypeError 로 바꾼 것과 response.ok 검사를 추가한 방향은 합당하다고 판단됩니다.
  2. getQueryStringURLSearchParams 변경은 이미 main에 반영돼 있습니다. (동일한 수정이 fix(api): 목록 조회 쿼리스트링이 검색어를 인코딩하지 않아 조건이 잘리는 문제 수정 #145 에 반영)
  3. response.ok 검사 추가로 기존 egovFetch.test.js의 인증오류 테스트가 실패합니다. 해당 테스트의 fetch mock이 ok를 설정하지 않아, !response.ok(= !undefined = true) 에서 즉시 throw됩니다. 수정 바랍니다.

1. TypeError 문자열 비교 버그 수정
   - error === "TypeError: Failed to fetch" 는 항상 false (Error 객체와 문자열 비교)
   - error instanceof TypeError 로 수정하여 네트워크 오류 알림이 실제로 표시되도록 함

2. HTTP 오류 응답(4xx/5xx) 미처리 수정
   - response.ok 체크 없이 .json() 호출하여 500/404 응답을 정상 처리하던 문제 수정
   - response.ok 검사 후 오류 시 throw 하여 .catch()로 전달

3. URL 파라미터 인코딩 누락 수정
   - Object.entries().map().join() 방식은 한글, &, = 등 특수문자 미인코딩
   - URLSearchParams 로 교체하여 올바른 URL 인코딩 적용
@bluejick
bluejick force-pushed the fix/egovFetch-error-handling branch from 704b996 to d995e55 Compare September 14, 2026 02:07
@bluejick

Copy link
Copy Markdown
Author

리뷰 감사합니다. 피드백 반영하였습니다.

  • getQueryString URLSearchParams 변경: main #145에 이미 반영된 내용으로 확인됨 (현재 브랜치도 동일한 상태)
  • egovFetch.test.js fetch mock에 ok: true 추가
  • 동일한 패턴의 테스트 파일 2개도 함께 수정 (EgovAdminScheduleEdit.test.jsx, EgovGalleryDetail.test.jsx)
image

@eGovFrameSupport

Copy link
Copy Markdown
Contributor

표준프레임워크에 대한 지속적인 참여에
대단히 감사드립니다. 검토 결과 공유 드립니다.

현재 main(#152 병합 반영) 기준으로 이 PR을 얹어 전체 테스트를 돌리면 3개 파일 16건이 실패합니다.

  • src/pages/admin/EgovAdminEditBackToList.test.jsx
  • src/pages/inform/notice/EgovNoticeEdit.test.jsx
  • src/pages/mypage/EgovMemberIdCheck.test.jsx

공용 requestFetchif (!response.ok) throw 검사가 추가되면서, fetch 응답을 흉내내는 mock이 ok를 갖고 있지
않으면 response.ok가 undefined가 되어 throw 되는 것이 원인입니다.

다만 이 세 파일이 누락된 건 작성 시점 문제가 아니라 베이스 이후 상황이 바뀌었기 때문인데 이 PR의 브랜치는 #144 시점에서 출발했고, 그때는 위 세 파일이 아직 존재하지 않았습니다(각각 이후의 #146 , #147 , #152 에서 추가)

지금 깨지는 파일들은 그 뒤에 병합된 테스트들입니다. 최신 main으로 리베이스하신 뒤 위 세 파일의 성공 응답 mock에 ok를 반영해 주시면 됩니다.

이 PR처럼 공용 함수를 바꾸는 변경은 리뷰가 진행되는 동안에도 새 테스트가 ok 없는 mock이 계속 추가되면 같은 상황이 반복될 가능성도 있기 때문에 응답 mock 생성을 공통으로 빼는 방법도 고려 가능하므로 참고 부탁 드립니다.

@eGovFrameSupport

Copy link
Copy Markdown
Contributor

[2026년 전자정부 표준프레임워크 컨트리뷰션 기념품 발송 안내] ※응답기한 ~9월30일까지

@bluejick 님, 안녕하세요.
전자정부 표준프레임워크 센터입니다.
2026년 5월 18일부터 전자정부 서비스 개발 표준 기반인 "전자정부 표준프레임워크"에 민간 및 SW 개발자 등 실 수요자의 아이디어와 다양한 의견을 반영하기 위해 "2026 전자정부 표준프레임워크 컨트리뷰션"을 개최 하였습니다.
표준프레임워크 깃허브(github.com/egovframework)에 기여해주신 귀하의 의견에 감사드리며, 앞으로 전자정부 표준프레임워크 운영·개선 과정에서 유용하게 활용토록 하겠습니다.
본 설문을 작성해 주시면 감사장과 기념품을 발송 드릴 예정이오니, '26년 9월 30일까지 아래의 URL을 통해 설문지로 이동, 항목에 응답 부탁드립니다.(※ 감사장은 실물 배송 원하는 경우만 발송)

↓응답 작성하기(Google 설문지)↓
https://forms.gle/fVTu2GZg9BVqvNfL7

❒ 컨트리뷰션 종료 후, 시상 관련하여 연락 갈 예정이오니, 꼭 통화 가능한 본인 번호를 기재해 주시기 바랍니다.
❒ 귀하께서 답변해 주시는 내용은 컨트리뷰션 참가 확인 및 기념품 발송 목적으로만 활용되며, 제출된 개인정보는 기념품 발송 후 즉시 영구 삭제 처리 됩니다.
❒ 대학(원)생 참여의 경우 재학 중인 학교명 기재 필요.

감사합니다.

@eGovFrameSupport

Copy link
Copy Markdown
Contributor

테스트 수행 시 실패하는 파일에 ok를 반영해 정리하였습니다.
좋은 제안 감사합니다. 이에 본 PR은 close 합니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants