JS-Error 오류 처리 상세 정보

오류 처리

   오류 처리는 웹 응용 프로그램 개발에 매우 중요하다. 발생할 수 있는 오류를 미리 예측할 수 없고 복구 전략을 미리 채택할 수 없기 때문에 비교적 나쁜 사용자 체험을 초래할 수 있다.
Error 객체
  try-catch를 통해 처리되지 않은 오류는 윈도우 대상의 error 이벤트를 촉발합니다.

// ， try-catch 
try{
    t;
}catch(ex){
    console.log(ex.message);// message 
    console.log(ex.name);// name 
}

오류 이벤트
  try-catch를 통해 처리되지 않은 오류는 윈도우 대상의 error 이벤트를 촉발합니다.error 이벤트는 오류 메시지, 오류가 있는 URL, 줄 번호 등 세 가지 인자를 수신할 수 있습니다.대부분의 경우 오류 메시지만 유용합니다. URL은 문서의 위치만 표시하고 줄 번호가 가리키는 코드 줄은 삽입된 JS 코드에서 나올 수도 있고 외부 파일에서 나올 수도 있습니다.

//DOM0 
window.onerror = function(message,url,line){
    alert(message);
}
//DOM2 
window.addEventListener("error",function(message,url,line){
    alert(message);
});

   브라우저에서 표준 오류 메시지를 표시할지 여부는 onerror의 반환 값에 달려 있습니다.반환값이false이면 컨트롤러에 오류 메시지가 표시됩니다.반환 값이true이면 표시되지 않습니다.

// 
window.onerror = function(message,url,line){
    alert(message);
    return false;
}
a;

// 
window.onerror = function(message,url,line){
    alert(message);
    return true;
}
a;

이 이벤트 처리 프로그램은 브라우저가 오류를 보고하지 않도록 하는 마지막 방어선입니다.이상적인 상황에서 가능하다면 그것을 사용해서는 안 된다.try-catch 문장을 적절하게 사용할 수 있다면 브라우저에 오류가 없고 error 이벤트가 발생하지 않습니다.이미지도 error 이벤트를 지원합니다.이미지의 src 특성 중의 URL이 식별할 수 있는 이미지 형식으로 되돌아오지 못하면error 이벤트를 촉발합니다.이 때 error 이벤트는 DOM 형식을 따라 이미지를 대상으로 하는 이벤트 대상을 되돌려줍니다.이미지를 로드하지 못했을 때 경고 상자가 표시됩니다.error 이벤트가 발생했을 때 이미지 다운로드 과정이 끝났습니다. 다시 다운로드할 수 없습니다.

var image = new Image();
image.src = 'smilex.gif';
image.onerror = function(e){
    console.log(e);
}

throw 문장과 오류 던지기
오류를 던지는 데 쓰인다.오류가 발생했을 때,throw 문장에 값을 지정해야 합니다. 이 값이 어떤 형식인지, 요구가 없습니다.[주의] 오류를 던지는 과정은 막히고 후속 코드는 실행되지 않습니다.

throw 12345;
throw 'hello world';
throw true;
throw {name: 'javascript'};

throw new Error('something bad happened');

throw new SyntaxError('I don\'t like your syntax.');
throw new TypeError('what type of variable do you take me for?');
throw new RangeError('sorry,you just don\'t have the range.');
throw new EvalError('That doesn\'t evaluate.');
throw new URIError('URI, is that you?');
throw new ReferenceError('you didn\'t cite your references properly');

   브라우저는 Error에서 상속된 사용자 정의 오류 형식을 다른 오류 형식과 같이 처리합니다.자신이 던진 오류를 포착하고 브라우저 오류와 구별하려면 사용자 정의 오류를 만드는 것이 유용합니다.

function CustomError(message){
    this.name = 'CustomError';
    this.message = message;
}
CustomError.prototype = new Error();
throw new CustomError('my message');

  는throw 문장을 만났을 때 코드가 즉시 실행을 중지합니다.try-catch 문장이 던져진 값을 포착할 때만 코드가 계속 실행됩니다.
finally
비록finally 자구는try-catch 문장에서 선택할 수 있지만,finally 자구가 사용되면 코드는 어떻게든 실행됩니다.코드에finally 자구가 포함되면try나catch 문장 블록에 어떤 코드가 포함되어 있든지, 심지어return 문장이든,finally 자구의 실행을 막지 않습니다.

// catch ， 。 finally ， 
function cleansUp() {
  try {
    throw new Error(' ……');
    console.log(' ');
  } finally {
    console.log(' ');
  }
}
cleansUp();
//  
// Error:  ……

function f() {
  try {
    console.log(0);
    throw "bug";
  } catch(e) {
    console.log(1);
    return true; //  finally 
    console.log(2); //  
  } finally {
    console.log(3);
    return false; //  return
    console.log(4); //  
  }
  console.log(5); //  
}
var result = f();

블록 레벨 역할 영역
  try-catch 문장의 흔한 용도는 블록급 작용역을 만드는 것이다. 그 중에서 성명된 변수는catch 내부에서만 유효하다.

try{
    throw new Error();// 
}catch(e){
    console.log(e);//Error(…)
}
console.log(e);//Uncaught ReferenceError: e is not defined

   ES6는 let 키워드를 도입하여 설명된 변수에 블록급 작용역을 만듭니다.그러나 현재 ES3와 ES5의 경우try-catch 문구를 사용하여 유사한 효과를 실현한다.