투케이2K

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

JavaScript

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

투케이2K 2026. 6. 14. 20:28
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / window.onerror


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

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

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





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      } 

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    


      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

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


          // -----------------------------------------------
          // ✅ 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 수집 감지 : 로그 감지

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

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





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

▶️ [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

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

555. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 Certificate , PrivateKey 인증성 생성 수행  (0) 2026.06.16
554. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 인증서 Certificate , PrivateKey 키 쌍 일치 여부 확인  (0) 2026.06.15
552. (javaScript) [간단 소스] 자바스크립트 window.screen 사용해 브라우저 화면 가로 , 세로 모드 확인 및 change 화면 회전 감지 이벤트 확인  (0) 2026.06.14
551. (javaScript) [간단 소스] 자바스크립트 navigator.userAgentData 사용해 상향 된 User-Agent Client 정보 확인 수행  (0) 2026.06.13
550. (javaScript) [간단 소스] 자바스크립트 window.visualViewport.resize 사용해 사용자 눈에 실제 보이는 영역 화면 변경 이벤트 감지 수행  (0) 2026.06.10
'JavaScript' Related Articles more
Comments