너무 길어서 읽을 수가 없어요.

사용자 정의 오류, 명명 함수, Bugfender를 조합하면 자바스크립트 프로그램의 결함을 즉시 식별할 수 있는 튼튼한 오류 처리 과정을 만들 수 있습니다.

JavaScript에서 오류를 처리해야 하는 이유는 무엇입니까?

처리되지 않은 JavaScript 오류는 스크립트의 실행을 중지하여 응용 프로그램을 의외의 상태로 만들고, 심지어는 알 수 없는 상태로 만들 수 있습니다.따라서 응용 프로그램에서 알 수 없는 오류가 발생하지 않도록 안정적인 오류 처리 과정이 필요하다.
그런데 왜 실수를 했을까?응용 프로그램이 결국 중단되기를 바라는 사람은 아무도 없다.만약 자바스크립트 오류가 아예 던져지지 않았다면, 이것은 쉽지 않겠는가?

무엇이 처리되지 않은 이상 오류를 초래합니까?

JavaScript가 실행될 때 환경에서 오류가 발생하여 개발자에게 문제가 있음을 알립니다.일반적인 오류 예는 다음과 같습니다.

잘못된 원본 코드를 작성할 때 문법 오류가 발생했습니다.

매개 변수가 예상 형식이 아닐 때 형식 오류가 발생했습니다.

JavaScript 엔진을 계속 실행할 수 없는 경우 내부 오류(예: 너무 많은 반복 오류)가 발생합니다.

일반적으로 오류를 복구하고 제품을 개선할 수 있는 기회로 간주해야 합니다.
개발자의 측면에서 볼 때, 응용 프로그램이 정확하게 실행되는 일부 조건이 일치하지 않을 때, 고의로 오류를 던지는 것은 심지어 좋은 방법이다.

function div(x, y) {
    if (y <= 0) {
        throw "0 is not allowed";
    }

    return x / y;
}

console.log(div(2, 3));
console.log(div(3, 0));

오류 처리

앞에서 말한 바와 같이 필요에 따라 자주 실수를 하는 것은 좋은 방법이다.그러나 이러한 오류가 사용자에게 도착하기 전에 이 오류를 포착하고 제어해야 한다.이것이 바로 우리가 좋은 오류 처리 전략을 필요로 하는 이유다.
오류 처리는 개발자가 오류가 발생한 후에 흐름을 제어하고 응용 프로그램의 흐름을 새로운 안정 상태로 되돌릴 수 있도록 합니다.이 새로운 상태는 사용자가 눈치채지 못한 상황에서 사용자를 다른 받아들일 수 있는 상태로 조용히 리셋하고, 사용자에게 오류가 발생했음을 알리며, 안전하게 오류를 기록하여 디버깅을 하거나, 모든 것을 함께 기록하는 것을 포함할 수 있다.

JavaScript 오류 기록은 어디에 있습니까?

오류는 일반적으로 콘솔에 기록됩니다.응용 프로그램이 웹 사이트라면, 검사 도구에서 브라우저 컨트롤러를 열어 모든 로그를 시각화할 수 있습니다.
node.js 환경이면 터미널에서 로그를 볼 수 있습니다.

특히 사이트에 대해 이것은 개발 기간에만 유용하다. 왜냐하면 사용자의 컴퓨터에서 브라우저 컨트롤러를 볼 수 없기 때문이다.그러나 Bugfender 같은 외부 로그 도구를 사용하여 최종 사용자 환경에서 발생하는 오류를 감시할 수 있습니다.

try/catch 블록을 사용하여 JavaScript의 오류를 캡처합니다.이상 처리.

다른 많은 언어와 마찬가지로 위험한 자바스크립트 코드를 try/catch/finally 블록에 봉인할 수 있습니다.오류가 발생했을 때, 프로그램은 catch 블록으로 되돌아갑니다.catch 문장에서 던지는 모든 운행 시 오류를 조작하고 필요할 때 시정 조치를 취할 수 있습니다.finally 블록은 try 블록이 오류로 끝나든 안 끝나든 추가할 수 있는 선택적 블록입니다.
다른 프로그래밍 언어와 달리 JavaScript에서는 오류 유형 스냅 오류를 허용하지 않습니다.반대로, 조건catch 블록을 사용해야 합니다.

try {
  myroutine(); // may throw three types of exceptions
} catch (e) {
  if (e instanceof TypeError) {
    // statements to handle TypeError exceptions
  } else if (e instanceof RangeError) {
    // statements to handle RangeError exceptions
  } else if (e instanceof EvalError) {
    // statements to handle EvalError exceptions
  } else {
    // statements to handle any unspecified exceptions
    logMyErrors(e); // pass exception object to error handler
  }
}

// Source : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch

사용자 정의 이상 발생

JavaScript는 사용자 정의 이상을 생성하는 방법을 제공합니다.사용자 정의 JavaScript 예외를 생성하려면 throw 문을 사용합니다.사실 이 문장을 사용하고 숫자나 문자열을 표지부호나 상태 코드로 하는 것은 흔히 볼 수 있는 방법이다.

function getRectArea(width, height) {
    if (isNaN(width) || isNaN(height)) {
        throw 'Parameter is not a number!';
    }
}

응용 프로그램에 특정한 오류가 발생했을 때, 더욱 효과적인 대체 방법은 범용 클래스를 확장하고 사용자 정의 이상을 만드는 것이다.사용자 정의 오류 대상을 통해 자신의 오류 코드와 오류 메시지를 만들 수 있습니다.여기에는 사용자 정의 오류를 만드는 방법에 대한 매우 기본적인 예가 있습니다.

function MyError(message) {
  const error = new Error(message);
  return error;
}

MyError.prototype = Object.create(Error.prototype);

throw MyError("this is my error");

사용자 정의 예외 및 오류 객체는 다음과 같습니다.

응용 프로그램 특정 오류: 응용 프로그램 상하문에서만 의미 있는 오류입니다.예를 들어 시장의 ProductNotFoundError 메시지입니다.응용 프로그램별 오류는 응용 프로그램의 결함을 신속하게 발견하는 데 도움을 줄 수 있습니다.

범용 클래스를 확장하고 상세한 정보를 제공합니다. 예를 들어 사용자 정의 속성을 사용합니다.사용자 정의 HttpNotFoundError 에는 이 오류의 원인을 찾을 수 있는 사용자 정의 필드가 포함될 수 있습니다.이러한 특정 상황에서 찾을 수 없는 URL과 디버깅 날짜를 저장하는 것이 유용할 수 있습니다.

전반적으로 말하면 더욱 분명하다.사용자 정의 이상을 만드는 데는 어떤 방식으로 응용 프로그램에 존재할 수 있는 오류를 식별하고 분류하는 것이 포함됩니다.그것은 당신이 자신의 약점을 더욱 잘 이해하고 소프트웨어 개발을 가속화하는 데 도움을 줄 것이다.

다음 코드 예제에서는 다음과 같은 고급 사용자 정의 오류 생성을 볼 수 있습니다.

class MyNotFoundError extends Error {
    constructor(message = '', url = '', ...params) {
    super(...params)

    this.name = 'MyNotFoundError'
    // Custom error data
    this.message = message;
    this.url = url;
    this.date = new Date()
  }
}

try {
  throw new MyNotFoundError('Page not found', 'http://mynotfoundurl.com');
} catch (e)
{
  console.log(e.name);
  console.log(e.message);
  console.log(e.url);
  console.log(e.date);
}

이전 예에서 보듯이 사용자 정의 오류 대상을 만들고 적당한 오류 처리 프로그램을 추가하면 오류와 관련된 모든 정보를 얻을 수 있으며, 나중에 오류가 발생할 때 쉽게 복구할 수 있도록 컨트롤러에 자신의 오류 메시지를 출력할 수 있습니다.만약 응용 프로그램에 Bugfender 같은 로그 수집기 도구가 있다면, 이것은 매우 유용할 것입니다. 그러면 모든 사용자의 오류를 한 곳에서 볼 수 있습니다.

스택 추적 이해

스택 추적은 자바스크립트가 실행될 때 특정 점 이전에 실행되는 코드의 경로입니다.이 점은 오류, 브레이크 또는 console.trace 명령일 수 있습니다.
주의: 단점의 개념에 익숙하지 않으면 안드로이드와 iOS에서 설명을 빠르게 읽을 수 있지만 기본 개념을 얻는 데 도움을 줄 수 있습니다.
그러나 창고 추적에 들어가기 전에 명명 함수와 익명 함수 사이의 차이를 기억해 봅시다.

익명 함수와 명명 함수

익명 함수는 네가 상상하는 것과 차이가 많지 않다. 이름이 없는 함수다.

var x = function (a, b) {return a * b};

그것들은 방문이 더욱 광범위한 범위와 내연 성명 같은 장점이 있다.예를 들어, 호출된 정확한 위치를 리셋할 때, 코드의 선명도를 증가시킵니다.
다른 한편, 명명 함수는 다음과 같다.

function myFunction(a, b) {
  return a * b;
}

주요 장점은 myFunction 이름이 창고 추적 기록과 포획될 수 있다는 것이다.
이전에 사용자 정의 오류를 내보낸 예에서 JavaScript의 스택 추적이 어떻게 되는지 볼 수 있습니다.

보시다시피 이름 함수를 사용하면 오류가 발생할 때까지 코드의 실행을 추적하기 쉽습니다.

JavaScript 오류 모니터링 도구 사용

만약 이름 함수를 사용하여 프로그램을 구축하고 사용자 정의 오류를 던진다면, 프로그램에 대한 루팡 제어를 유지하는 마지막 단계만 필요합니다. 오류가 발생했을 때 이 오류를 포착하고 위치를 정하는 것입니다.
Bugfender는 이 문제를 해결할 수 있는 도구입니다.만약 Bugfender를 응용 프로그램에 통합한다면, 나중에 무슨 일이 일어났는지 정확하게 식별하기 위해 당신이 필요로 할 수 있는 모든 것을 기록할 수 있습니다.처리되지 않은 JavaScript 오류에 대한 모든 정보도 얻을 수 있습니다.
사용자 보고서를 받은 후 Bugfender 콘솔로 이동하여 발생한 상황과 잘못된 상하문을 정확하게 찾으십시오.

만약 당신들이 아직 Bugfender 계정이 없다면, 웹 응용 프로그램에서 우리의 게시물을 클릭하거나, 무료 계정 right here 만 얻을 수 있습니다.
요컨대, 개발 과정에서 사용자 정의 오류와 명명 함수를 결합시켜 Bugfender에 기록하는 데 추가 시간이 필요하다.당신은 쉽게 디버깅하고 복구할 수 있는 튼튼한 프로그램을 구축할 수 있을 것이다.
오류를 찾는 시간이 짧을수록 새로운 기능을 구축하는 시간이 많다는 것을 기억하십시오.
디버깅 즐거워요!