224. (TWOK/WORK) [개발 요청] 웹 브라우저 기능 동작 중 web crash 크래시 발생 시 버그 리포트 bug report 전송 기능 개발 요청

---

[제 목]

​

주제 : 투케이2K 업무 정리

​

타이틀 : 투케이 / 2k / 업무 정리

​

제목 : [개발 요청] 웹 브라우저 기능 동작 중 web crash 크래시 발생 시 버그 리포트 bug report 전송 기능 개발 요청

​

 

---

[내 용]

​

------------------------------------------------------------------------------
[개발 및 테스트 환경]
------------------------------------------------------------------------------

- 제 목 : [개발 요청] 웹 브라우저 기능 동작 중 crash 크래시 발생 시 버그 리포트 bug report 전송 기능 개발 요청


- 테스트 환경 : Chrome / JavaScript


- 사전) 👉 window.onerror 간단 설명 : 

  >> window.onerror 는 웹 페이지에서 발생하는 처리되지 않은 (Uncaught) JavaScript 오류를 전역 (Global) 으로 감지할 수 있는 이벤트 핸들러입니다.
          
  >> 개발자가 try-catch로 처리하지 않은 예외가 발생하면 브라우저가 자동으로 window.onerror를 호출합니다.

------------------------------------------------------------------------------





------------------------------------------------------------------------------
[이슈 사항]
------------------------------------------------------------------------------

1. 🟥 웹 브라우저 기능 사용 중 console.error , crash , unhandledrejection 에러가 발생한 경우 서버로 버그 리포트 전송 기능 개발 요청 


2. 🟥 기능 구현 요청 내용 정리 : 

  >> JS Runtime Error 에러 발생 시 버그 리포트 전송 요청

  >> Promise Error 에러 발생 시 버그 리포트 전송 요청

  >> console.error 수집 후 버그 리포트 전송 요청

------------------------------------------------------------------------------





------------------------------------------------------------------------------
[원인 파악 및 증상 재현]
------------------------------------------------------------------------------

1. 🟥 현재 웹 브라우저에서는 기본 try catch 블럭 예외 처리는 되어 있지만 JS Runtime Error 감지 , Promise Error 감지 , console.error 감지에 대한 이벤트 구독 처리는 되어 있지 않은 상태


2. 🟥 웹 브라우저에서 JS Runtime Error 에러 발생 , Promise Error 에러 발생 , console.error 로그가 표시 되더라도 서버로 버그 리포트를 전송하지 않는 것 확인

------------------------------------------------------------------------------






------------------------------------------------------------------------------
[조치 내용]
------------------------------------------------------------------------------

1. 🟦 자바스크립트에서 JS Runtime Error 감지 , Promise Error 감지 , console.error 감지 이벤트 리스너를 등록해 해당 이벤트가 발생한 경우 서버로 버그 리포트를 전송하도록 기능 구현


2. 🟦 개발 요청한 기능에 추가로 주요한 function try catch 구문에서 에러가 발생한 경우 서버로 버그 리포트를 전송할 수 있게 추가 기능 구현


3. 🟦 자바스크립트 소스 코드 예시 :

  // -----------------------------------------------
  // ✅ Chrome, Safari, Android WebView, iOS WKWebView 까지 고려해 에러 발생 감지 이벤트 등록
  // -----------------------------------------------

  // ✅ JS Runtime Error
  window.addEventListener("error", function(event) {
    console.log("window.addEventListener error : ", event.message);
  });

  // ✅ Promise Error
  window.addEventListener("unhandledrejection", function(event) {
    console.log("window.addEventListener unhandledrejection : ", event.reason);
  });

  // ✅ console.error 수집 (선택)
  const originalError = console.error;
  console.error = function (...args) {
    console.log("console.error 감지 : ", args);
  };


  // -----------------------------------------------
  // ✅ 에러 발생 코드 작성
  // -----------------------------------------------          
  /*
  const obj = null; // TypeError 감지 : try catch 가 없을 경우
  obj.test();
  // */

  throw new Error("에러"); // console.error 수집 감지 : 로그 감지

------------------------------------------------------------------------------





------------------------------------------------------------------------------
[참고 사이트]
------------------------------------------------------------------------------

▶️ [간단 소스] 자바스크립트 실무 에러 발생 및 크래시 감지 이벤트 리스너 등록 - error , unhandledrejection , console

https://kkh0977.tistory.com/8915

https://blog.naver.com/kkh0977/224315712832


▶️ [Web] 자바스크립트 Proxy 사용해 운영 환경 인 경우 콘솔 로그 출력 히든 숨김 처리 로직 - console log, warn, error

https://kkh0977.tistory.com/8883

https://blog.naver.com/kkh0977/224306041602?trackingCode=blog_bloghome_searchlist


▶️ [var , let , const 변수 사용해 데이터 삽입 및 console log (콘솔 로그) 결과 출력 실시]

https://kkh0977.tistory.com/792

https://blog.naver.com/kkh0977/222380882942?trackingCode=blog_bloghome_searchlist


▶️ [Xcode 내에서 Web JavaScript 웹 자바스크립트 console.log 확인 실시]

https://kkh0977.tistory.com/4798

https://blog.naver.com/kkh0977/223247240530?trackingCode=blog_bloghome_searchlist

------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8915

553. (javaScript) [간단 소스] 자바스크립트 실무 에러 발생 및 크래시 감지 이벤트 리스너 등록 - erro

---