자바스크립트 오류 보고 도구 개발

머리말

프런트 엔드 개발에서 오류 보고는 일반적이고 중요한 문제입니다. 사용자에게 오류가 발생하면 오류 정보를 수집하여 서버나 타사 플랫폼에 보고해야 합니다. 오류 보고가 없으면 문제를 찾아 적시에 수리할 수 없습니다.

이 글에서는 개발 과정에서 문제를 빠르게 찾아 해결할 수 있도록 JavaScript 기반 오류 보고 도구를 개발하는 방법에 대해 설명합니다.

1단계: 오류 정보 수집

프런트 엔드 오류에는 일반적으로 JavaScript 오류와 리소스 오류라는 두 가지 유형이 있습니다. JavaScript 오류는 일반적으로 구문 오류 또는 런타임 오류를 나타냅니다. 리소스 오류에는 로딩 실패, 네트워크 요청 실패 등이 포함됩니다.

1. JavaScript 오류 수집

JavaScript 오류를 수집하려면 window 개체에 오류 이벤트를 바인딩하고 오류 정보를 수집해야 합니다. 오류 이벤트에는 일반적으로 message, filename 및 lineno의 세 가지 속성이 있습니다.

window.onerror = function(message, source, lineno, colno, error) {
  console.log('Error:', message, source, lineno, colno, error);
  // 上报错误信息
}

이 이벤트는 페이지의 JavaScript가 포착되지 않은 예외를 발생시킬 때 트리거됩니다. 이 이벤트 핸들러에서는 오류 메시지에 대한 정보를 콘솔에 인쇄하고 이를 서버나 타사 플랫폼에 보고할 수 있습니다.

2. 리소스 오류 수집

리소스 오류를 수집하려면 윈도우 객체에 오류 이벤트를 바인딩하고 리소스 정보를 수집해야 합니다. 일반적으로 리소스 오류가 발생하면 로드 실패 이벤트가 수신됩니다. 이 이벤트는 창 개체에 오류 이벤트를 바인딩하여 캡처할 수 있습니다.

window.addEventListener('error', function(event) {
  var target = event.target || event.srcElement;
  console.log('Load error:', target.tagName, target.src, event.message);
  // 上报错误信息
}, true);

이 이벤트 핸들러는 페이지의 리소스가 로드되지 않을 때 트리거됩니다. 이 이벤트 핸들러에서는 오류 정보를 콘솔에 인쇄하고 이를 서버나 타사 플랫폼에 보고할 수 있습니다.

2단계: 오류 정보 보고

오류 정보를 수집할 때 다음 단계는 이를 서버나 타사 플랫폼에 보고하는 것입니다. Ajax 요청, 이미지 객체 또는 타사 라이브러리를 사용하여 이를 달성할 수 있습니다. 이 글에서는 이를 달성하기 위해 Ajax 요청을 제출하는 방법을 사용할 것입니다.

1. Ajax 요청 보고

jQuery 라이브러리를 사용한다고 가정하면 다음 코드를 사용하여 서버에 보고 요청을 보낼 수 있습니다.

$.ajax({
  url: '/api/report-error',
  method: 'POST',
  data: {
    message: message,
    source: source,
    lineno: lineno,
    colno: colno,
    error: error && error.stack
  }
});

POST 요청을 보내면 다음과 같은 형식으로 오류 정보를 보낼 수 있습니다. 서버에 데이터. 백그라운드에서 요청 본문을 구문 분석하여 오류를 찾아 복구함으로써 이 정보를 얻을 수 있습니다.

2. 이미지 개체 보고

Ajax 요청이나 jQuery 라이브러리를 사용하지 않으려면 이미지 개체를 사용하여 서버에 GET 요청을 보낼 수 있습니다.

var img = new Image();
img.src = '/api/report-error?message=' + encodeURIComponent(message)
  + '&source=' + encodeURIComponent(source)
  + '&lineno=' + encodeURIComponent(lineno)
  + '&colno=' + encodeURIComponent(colno)
  + '&error=' + encodeURIComponent(error && error.stack);

이 방법의 단점은 오류 정보를 쿼리 문자열에 연결해야 하므로 URL이 너무 길어질 수 있습니다.

3. 타사 라이브러리 보고

오류 보고 도구를 직접 개발하는 것 외에도 일부 타사 라이브러리를 사용하여 이 작업을 완료할 수도 있습니다. 그중 가장 널리 사용되는 오류 보고 라이브러리는 다음과 같습니다.

• Sentry: 오류 그룹화, 웹 인터페이스, API, SDK 및 기타 기능을 제공하는 오픈 소스 오류 보고 서비스
• Bugsnag: 실시간 오류 모니터링 및 오류를 자동으로 감지하고 오류 추적, 오류 분석 등 다양한 기능을 제공할 수 있는 보고 도구
• New Relic: 실시간 오류 보고, 분석 및 오류 위치 기능을 제공하는 애플리케이션 성능 모니터링 도구입니다.

이러한 라이브러리의 사용 방법은 유사하므로 해당 문서 지침에 따라 구성하기만 하면 됩니다.

3단계: 성능 최적화

오류 보고 도구 개발을 완료한 후에는 도구가 웹 사이트 성능에 미치는 영향을 최소화하기 위해 일부 성능 최적화를 수행해야 합니다.

1. 오류 정보 병합

페이지에 여러 JavaScript 스크립트가 있는 경우 스크립트에 오류가 발생하면 오류 정보를 서버에 보고해야 합니다. 모든 스크립트에서 오류 이벤트를 바인딩하면 여러 요청을 보냅니다. 요청 수를 줄이기 위해 여러 오류 메시지를 하나의 요청으로 결합하고 캐싱에 버퍼를 사용할 수 있습니다.

2. 샘플링 보고

페이지 트래픽이 많으면 잘못 보고되는 데이터의 양이 엄청날 수 있습니다. 서버에 과도한 부담을 주지 않기 위해 샘플링 보고 메커니즘을 도입하고 오류 정보 중 일부만 보고할 수 있습니다. 예를 들어 오류 보고 비율을 설정하고, 오류 보고 비율에 비례하여 오류 정보만 서버에 보낼 수 있습니다.

3. 네트워크 환경에 따른 보고

저속 네트워크 환경에서 오류 보고는 성능에 큰 영향을 미치며 페이지 충돌을 일으킬 수도 있습니다. 이러한 상황이 발생하지 않도록 현재 네트워크 환경 조건에 따라 오류 보고 비율을 자동으로 조정할 수 있습니다. 예를 들어 4G에서는 오류 보고율을 100%(즉, 모두 보고)로 설정할 수 있고, 2G에서는 오류 보고율을 20%로 낮출 수 있습니다.

결론

JavaScript 오류 보고 도구를 개발하는 것은 프런트엔드 개발자에게 매우 중요합니다. 이는 문제를 신속하게 찾아 해결하고 사용자 경험을 개선하는 데 도움이 될 수 있습니다. 이 글에서는 오류 정보 수집, 오류 정보 보고, 성능 최적화 등의 측면을 설명합니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 자바스크립트 오류 보고 도구 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!