홈페이지>프로그래밍 관련>자바 소스 코드
다운로드

JavaScript 오류 핸드북

이 README에는 JavaScript 오류 처리, 서버에 보고, 이 모든 것을 정말 어렵게 만들 수 있는 많은 버그 탐색에 대해 수년 동안 배운 정보가 포함되어 있습니다. 브라우저는 이 영역에서 개선되었지만 모든 애플리케이션이 발생하는 모든 오류를 분별 있고 건전하게 처리할 수 있도록 개선할 여지가 여전히 남아 있습니다.

이 가이드에 있는 콘텐츠에 대한 테스트 사례는 https://mknichel.github.io/javascript-errors/에서 확인할 수 있습니다.

목차

  • 소개

  • JavaScript 오류 분석

    • JavaScript 오류 생성

    • 오류 메시지

    • 스택 추적 형식

  • JavaScript 오류 잡기

    • window.onerror

    • 시도/잡기

    • 보호된 진입점

    • 약속

    • 웹 작업자

    • 크롬 확장 프로그램

소개

오류 포착, 보고 및 수정은 애플리케이션의 상태와 안정성을 보장하기 위한 모든 애플리케이션의 중요한 부분입니다. JavaScript 코드는 클라이언트 및 다양한 브라우저 환경에서도 실행되므로 애플리케이션에서 JS 오류를 파악하는 것도 어려울 수 있습니다. 각 브라우저의 구현에 차이를 일으키는 JS 오류를 보고하는 방법에 대한 공식적인 웹 사양은 없습니다. 또한 브라우저의 JavaScript 오류 구현에도 많은 버그가 있어 이를 더욱 어렵게 만들었습니다. 이 페이지에서는 미래의 개발자가 오류를 더 잘 처리할 수 있고 브라우저가 표준화된 솔루션에 수렴할 수 있도록 JS 오류의 이러한 측면을 탐색합니다.

JavaScript 오류 분석

JavaScript 오류는 오류 메시지 와 스택 추적이라는 두 가지 주요 부분으로 구성됩니다. 오류 메시지는 무엇이 잘못되었는지 설명하는 문자열이고, 스택 추적은 코드에서 오류가 발생한 위치를 설명합니다. JS 오류는 브라우저 자체에서 생성되거나 애플리케이션 코드에서 발생할 수 있습니다.

JavaScript 오류 생성

JS 오류는 코드 조각이 제대로 실행되지 않을 때 브라우저에서 발생하거나 코드에서 직접 발생할 수 있습니다.

예를 들어:

 var a = 3;a();

이 예에서는 실제로 숫자인 변수를 함수로 호출할 수 없습니다. 브라우저는 TypeError: a is not a function .

개발자는 특정 전제 조건이 충족되지 않으면 코드 조각에 오류가 발생하기를 원할 수도 있습니다. 예를 들어

 if (!checkPrecondition()) {
  throw new Error("전제조건을 충족하지 않습니다!");}

이 경우 오류는 Error: Doesn't meet precondition! . 이 오류에는 해당 라인을 가리키는 스택 추적도 포함됩니다. 브라우저와 애플리케이션 코드에서 발생하는 오류는 동일하게 처리될 수 있습니다.

개발자가 JavaScript에서 오류를 발생시킬 수 있는 방법은 여러 가지가 있습니다.

  • throw new Error('Problem description.')

  • throw Error('Problem description.') <-- 첫 번째 것과 동일

  • throw 'Problem description.' <-- 나쁘다

  • throw null <-- 심지어 더 나쁘다

문자열이나 null을 던지는 것은 브라우저가 해당 오류에 스택 추적을 첨부하지 않아 코드에서 해당 오류가 발생한 위치에 대한 컨텍스트를 잃기 때문에 실제로 권장되지 않습니다. 오류 메시지와 오류가 발생한 올바른 코드 줄을 가리키는 스택 추적이 포함된 실제 Error 객체를 던지는 것이 가장 좋습니다.

오류 메시지

각 브라우저에는 위의 비함수 호출 시도 예시와 같이 내장된 예외에 사용하는 고유한 메시지 세트가 있습니다. 브라우저는 동일한 메시지를 사용하려고 시도하지만 사양이 없으므로 보장되지 않습니다. 예를 들어 Chrome과 Firefox에서는 모두 위 예의 {0} is not a function 사용하지만 IE11은 Function expected 보고합니다(특히 어떤 변수가 호출되려고 시도했는지 보고하지 않음).

그러나 브라우저도 자주 갈라지는 경향이 있습니다. switch 문에 여러 개의 기본 문이 있는 경우 Chrome은 "More than one default clause in switch statement" 표시하고 Firefox는 "more than one switch default" 보고합니다. 웹에 새로운 기능이 추가되면 이러한 오류 메시지도 업데이트되어야 합니다. 이러한 차이점은 나중에 난독화된 코드에서 보고된 오류를 처리하려고 할 때 적용될 수 있습니다.

브라우저가 오류 메시지에 사용하는 템플릿은 다음에서 찾을 수 있습니다.

  • 파이어폭스 - http://mxr.mozilla.org/mozilla1.9.1/source/js/src/js.msg

  • 크롬 - https://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/messages.js

  • 인터넷 익스플로러 - https://github.com/Microsoft/ChakraCore/blob/4e4d4f00f11b2ded23d1885e85fc26fcc96555da/lib/Parser/rterrors.h

브라우저는 일부 예외에 대해 다른 오류 메시지를 생성합니다.

스택 추적 형식

스택 추적은 코드에서 오류가 발생한 위치에 대한 설명입니다. 이는 일련의 프레임으로 구성되며, 각 프레임은 코드의 특정 행을 설명합니다. 최상위 프레임은 오류가 발생한 위치이고, 후속 프레임은 함수 호출 스택 또는 오류가 발생한 지점에 도달하기 위해 코드가 실행된 방법입니다. JavaScript는 일반적으로 연결되고 축소되므로 주어진 줄에 여러 개의 문이 있을 때 정확한 문을 찾을 수 있도록 열 번호를 갖는 것도 중요합니다.

Chrome의 기본 스택 추적은 다음과 같습니다. 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

각 스택 프레임은 함수 이름(해당되는 경우 코드가 전역 범위에서 실행되지 않은 경우), 함수의 원본 스크립트, 코드의 줄 및 열 번호로 구성됩니다.

안타깝게도 스택 추적 형식에 대한 표준이 없으므로 이는 브라우저마다 다릅니다.

Microsoft Edge 및 IE 11의 스택 추적은 전역 코드를 명시적으로 나열한다는 점을 제외하면 Chrome의 스택 추적과 유사합니다. 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:3)
  at Global code (http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3)

Firefox의 스택 추적은 다음과 같습니다. 

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9
  @http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

Safari의 형식은 Firefox의 형식과 유사하지만 약간 다릅니다. 

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:18
  global code@http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:13

동일한 기본 정보가 있지만 형식이 다릅니다.

또한 Safari 예에서는 형식이 Chrome과 다른 점을 제외하고 열 번호가 Chrome 및 Firefox와 다릅니다. 또한 열 번호는 다양한 오류 상황에서 더 많이 벗어날 수 있습니다. 예를 들어 코드에서 (function namedFunction() { throwError(); })(); , Chrome은 throwError() 함수 호출에 대한 열을 보고하는 반면 IE11은 열 번호를 문자열의 시작으로 보고합니다. 이러한 차이점은 나중에 서버가 보고된 오류에 대한 스택 추적을 구문 분석하고 난독화된 스택 추적을 해독해야 할 때 다시 나타납니다.

오류의 스택 속성에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack을 참조하세요. Error.stack 속성에 액세스할 때 Chrome은 오류 메시지를 스택의 일부로 포함하지만 Safari 10+는 포함하지 않습니다.

스택 추적의 형식은 사용되는 형식과 열 번호가 브라우저마다 다릅니다.

더 자세히 살펴보면 아래 섹션에서 설명하는 스택 추적 형식에 대한 많은 미묘한 차이가 있습니다.

익명 함수 이름 지정

기본적으로 익명 함수에는 이름이 없으며 스택 추적의 함수 이름에 빈 문자열 또는 "익명 함수"로 표시됩니다(브라우저에 따라 다름). 디버깅을 개선하려면 모든 함수에 이름을 추가하여 스택 프레임에 표시되도록 해야 합니다. 이를 수행하는 가장 쉬운 방법은 해당 이름이 다른 곳에서는 사용되지 않더라도 익명 함수에 이름을 지정하는 것입니다. 예를 들어:

 setTimeout(함수 nameOfTheAnonymousFunction() { ... }, 0);

그러면 스택 추적이 다음에서 시작됩니다. 

at http://mknichel.github.io/javascript-errors/javascript-errors.js:125:17

에게 

at nameOfTheAnonymousFunction (http://mknichel.github.io/javascript-errors/javascript-errors.js:121:31)

Safari에서는 다음과 같이 진행됩니다. 

https://mknichel.github.io/javascript-errors/javascript-errors.js:175:27

에게 

nameOfTheAnonymousFunction@https://mknichel.github.io/javascript-errors/javascript-errors.js:171:41

이 방법을 사용하면 해당 함수 내부의 모든 코드에 대해 프레임에 nameOfTheAnonymousFunction 나타나므로 디버깅이 훨씬 쉬워집니다. 자세한 내용은 http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/#toc-debugging-tips를 참조하세요.

변수에 함수 할당

브라우저는 함수 자체에 이름이 없는 경우 함수가 할당된 변수나 속성의 이름도 사용합니다. 예를 들어,

 var fnVariableName = function() { ... };

브라우저는 스택 추적에서 함수 이름으로 fnVariableName 사용합니다. 

    at throwError (http://mknichel.github.io/javascript-errors/javascript-errors.js:27:9)
    at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

그보다 더 미묘한 점은 이 변수가 다른 함수 내에서 정의된 경우 모든 브라우저는 스택 추적에서 변수 이름만 함수 이름으로 사용한다는 것입니다. Firefox는 제외하고 이름을 연결하는 다른 형식을 사용합니다. 내부 변수의 이름을 가진 외부 함수. 예:

 함수 throwErrorFromInnerFunctionAssignedToVariable() {
  var fnVariableName = function() { throw new Error("foo"); };
  fn변수이름();}

Firefox에서는 다음이 생성됩니다. 

throwErrorFromInnerFunctionAssignedToVariable/fnVariableName@http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37

다른 브라우저에서는 다음과 같습니다. 

at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

Firefox는 다른 함수 내에 정의된 함수에 대해 다른 스택 프레임 텍스트를 사용합니다.

displayName 속성

함수의 표시 이름은 IE11을 제외한 모든 주요 브라우저의 displayName 속성으로 설정할 수도 있습니다. 이러한 브라우저에서는 displayName이 devtools 디버거에 표시되지만 Safari를 제외한 모든 브라우저에서는 오류 스택 추적에 사용되지 않습니다 (Safari는 오류와 관련된 스택 추적에서 displayName을 사용한다는 점에서 나머지 브라우저와 다릅니다).

 var someFunction = function() {};someFunction.displayName = " # 함수에 대한 자세한 설명입니다.";

displayName 속성에 대한 공식 사양은 없지만 모든 주요 브라우저에서 지원됩니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName 및 http://www.alertdebugging.com/2009/04/29/building-a-better를 참조하세요. -javascript-profiler-with-webkit/: displayName에 대한 자세한 내용을 확인하세요.

IE11은 displayName 속성을 지원하지 않습니다.

Safari는 오류 스택 추적에서 기호 이름으로 displayName 속성을 사용합니다.

프로그래밍 방식으로 스택 추적 캡처

스택 추적 없이 오류가 보고되면(이런 일이 발생하는 경우에 대한 자세한 내용은 아래 참조) 프로그래밍 방식으로 스택 추적을 캡처할 수 있습니다.

Chrome에서는 Error.captureStackTrace API를 사용하면 이 작업을 정말 쉽게 수행할 수 있습니다. 이 API 사용에 대한 자세한 내용은 https://github.com/v8/v8/wiki/Stack%20Trace%20API를 참조하세요.

예를 들어:

 함수 무시ThisFunctionInStackTrace() {
  var err = 새로운 오류();
  Error.captureStackTrace(err,ignoreThisFunctionInStackTrace);
  err.stack을 반환합니다.}

다른 브라우저에서는 새 오류를 생성하고 해당 객체의 stack 속성에 액세스하여 스택 추적을 수집할 수도 있습니다.

 var err = new Error('');return err.stack;

그러나 IE10은 실제로 오류가 발생한 경우에만 스택 추적을 채웁니다.

 노력하다 {
  throw new Error('');} catch (e) {
  e.스택을 반환합니다.}

이러한 접근 방식 중 어느 것도 작동하지 않으면 arguments.callee.caller 객체를 반복하여 줄 번호나 열 없이 대략적인 스택 추적을 생성할 수 있습니다. 하지만 이는 ES5 Strict 모드에서는 작동하지 않으며 권장되는 접근 방식도 아닙니다.

비동기 스택 추적

코드에서 setTimeout 사용하거나 Promises를 사용하는 경우와 같이 비동기 지점이 JavaScript 코드에 삽입되는 것은 매우 일반적입니다. 이러한 비동기 진입점은 새로운 실행 컨텍스트를 형성하고 스택 추적이 처음부터 다시 시작되므로 스택 추적에 문제를 일으킬 수 있습니다.

Chrome DevTools는 비동기 스택 추적을 지원합니다. 즉, 오류의 스택 추적에 비동기 지점이 도입되기 전에 발생한 프레임도 표시되는지 확인합니다. setTimeout을 사용하면 누가 setTimeout 함수를 호출하여 결국 오류가 발생했는지 캡처합니다. 자세한 내용은 http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/을 참조하세요.

비동기 스택 추적은 다음과 같습니다. 

  throwError	@	throw-error.js:2
  setTimeout (async)		
  throwErrorAsync	@	throw-error.js:10
  (anonymous function)	@	throw-error-basic.html:14

비동기 스택 추적은 현재 Chrome DevTools에서만 지원되며 DevTools가 열려 있을 때 발생하는 예외에 대해서만 지원됩니다. 코드의 Error 개체에서 액세스되는 스택 추적에는 비동기 스택 추적이 포함되지 않습니다 .

경우에 따라 비동기 스택 추적을 폴리필하는 것이 가능하지만 스택 추적을 캡처하는 비용이 저렴하지 않기 때문에 애플리케이션에 상당한 성능 저하가 발생할 수 있습니다.

Chrome DevTools만 기본적으로 비동기 스택 추적을 지원합니다.

인라인 스크립트 및 평가판 이름 지정

HTML 페이지에 평가되거나 인라인된 코드에 대한 스택 추적은 실행된 코드에 대해 페이지의 URL과 줄/열 번호를 사용합니다.

예를 들어: 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

이러한 스크립트가 실제로 최적화 이유로 인라인된 스크립트에서 나온 경우 URL, 줄 및 열 번호가 잘못됩니다. 이 문제를 해결하기 위해 Chrome 및 Firefox는 //# sourceURL= 주석을 지원합니다(Safari, Edge 및 IE는 지원하지 않음). 이 주석에 지정된 URL은 모든 스택 추적의 URL로 사용되며 행과 열 번호는 HTML 문서 대신