Collecting Browser Errors

문서 > 오류 추적 > Frontend Error Tracking > Collecting Browser Errors

이 페이지는 아직 영어로 제공되지 않습니다. 번역 작업 중입니다.
현재 번역 프로젝트에 대한 질문이나 피드백이 있으신 경우 언제든지 연락주시기 바랍니다.

개요

프론트엔드 오류는 브라우저 SDK을 사용하여 수집됩니다. 사용 가능한 경우 오류 메시지와 스택 트레이스가 포함됩니다.

오류 소스

프런트엔드 오류는 다음과 같은 여러 원인으로 인해 발생합니다.

에이전트: SDK 실행 시
콘솔: console.error() API 호출 시
커스텀: [addError API]와 함께 전송 시(#collect-errors-manually)
보고: ReportingObserver API에서
소스: 소스 코드에서 처리되지 않은 예외 또는 처리되지 않은 약속 거부 발생 시

오류 속성

모든 이벤트 유형의 기본 속성에 대한 내용은 수집된 데이터를 참조하세요. 샘플링 또는 글로벌 컨텍스트 설정에 대한 내용은 데이터 및 콘텍스트 수정하기를 참조하세요.

속성	유형	설명
`error.source`	문자열	오류가 발생한 곳 (예:`console`).
`error.type`	문자열	오류 유형(또는 경우에 따라 오류 코드).
`error.message`	문자열	이벤트를 설명하는 간결하고 사람이 읽을 수 있는 한 줄 메시지.
`error.stack`	문자열	스택 트레이스 또는 오류에 대한 보완 정보.
`error.causes`	어레이	추가 컨텍스트를 제공하는 선택 사항 목록입니다. 이 속성은 별도로 오류를 표시하기 위해 사용되고 서식을 향상합니다. 자세한 정보는 MDN 설명서를 참고하세요.

소스 오류

소스 오류에는 오류에 대한 코드 레벨 정보가 포함됩니다. 다양한 오류 유형에 대한 자세한 내용은 MDN 문서에서 확인할 수 있습니다.

속성	유형	설명
`error.type`	문자열	오류 유형(또는 경우에 따라 오류 코드).

수동으로 오류 수집

처리된 예외, 처리된 프라미스 거부 및 Browser SDK에서 자동으로 추적되지 않는 기타 오류를 addError() API로 모니터링하세요.

addError(
    error: unknown,
    context?: Context
);

참고: 오류 추적은 custom, source 또는 report, 또는 console로 설정된 소스를 전송하는 오류 및 스택 트레이스가 포함된 오류를 처리합니다. 오류 추적은 다른 소스(예: network) 또는 브라우저 확장 프로그램으로 전송된 오류는 처리하지 않습니다.

import { datadogRum } from '@datadog/browser-rum';

// 컨텍스트와 함께 커스텀 오류 전송
const error = new Error('Something wrong occurred.');

datadogRum.addError(error, {
    pageStatus: 'beta',
});

// 네트워크 오류 전송
fetch('<SOME_URL>').catch(function(error) {
    datadogRum.addError(error);
})

// 처리된 예외 오류 전송
try {
    // 일부 코드 로직
} catch (error) {
    datadogRum.addError(error);
}

// 컨텍스트와 함께 커스텀 오류 전송
const error = new Error('Something wrong occurred.');

window.DD_RUM.onReady(function() {
    window.DD_RUM.addError(error, {
        pageStatus: 'beta',
    });
});

// 네트워크 오류 전송
fetch('<SOME_URL>').catch(function(error) {
    window.DD_RUM.onReady(function() {
        window.DD_RUM.addError(error);
    });
})

// 처리된 예외 오류 전송
try {
    //Some code logic
} catch (error) {
    window.DD_RUM.onReady(function() {
        window.DD_RUM.addError(error);
    })
}

// 컨텍스트와 함께 커스텀 오류 전송
const error = new Error('Something wrong occurred.');

window.DD_RUM && window.DD_RUM.addError(error, {
    pageStatus: 'beta',
});

// 네트워크 오류 전송
fetch('<SOME_URL>').catch(function(error) {
    window.DD_RUM && window.DD_RUM.addError(error);
})

// 처리된 예외 오류 전송
try {
    // 일부 코드 로직
} catch (error) {
    window.DD_RUM && window.DD_RUM.addError(error);
}

React 오류 경계 계측

RUM Browser SDK addError() API를 사용하여 React 오류 경계를 계측함으로써 React 렌더링 오류를 모니터링할 수 있습니다.

수집된 렌더링 오류에는 컴포넌트 스택이 포함되며, 이 스택은 소스맵 업로드 후 다른 오류 스택 추적과 마찬가지로 축소되지 않습니다.

모니터링을 위해 React 오류 경계를 계측하려면 다음을 사용하세요:

import { datadogRum } from '@datadog/browser-rum';

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

    datadogRum.addError(renderingError);
  }

  ...
}

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

    DD_RUM.onReady(function() {
       DD_RUM.addError(renderingError);
    });
  }

  ...
}

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

     window.DD_RUM &&
       window.DD_RUM.addError(renderingError);

  }

  ...
}

트러블슈팅

스크립트 오류

보안상의 이유로 브라우저는 크로스 오리진 스크립트에 의해 트리거된 오류의 세부 정보를 숨깁니다. 이 경우 Error Details 탭에 “Script error"라는 최소한의 메시지와 함께 오류가 표시됩니다.

크로스 오리진 스크립트 및 세부 정보가 숨겨지는 이유에 대한 자세한 내용은 CORS 및 글로벌 이벤트 핸들러에 대한 이 참고 사항을 참조하세요. 이 오류의 원인은 다음과 같습니다:

JavaScript 파일은 다른 호스트 이름(예: example.com은 static.example.com의 어셋 포함)에서 호스팅됩니다.
귀하의 웹사이트에는 CDN에서 호스팅되는 JavaScript 라이브러리가 포함되어 있습니다.
귀하의 웹사이트에는 공급자의 서버에서 호스팅되는 타사 JavaScript 라이브러리가 포함되어 있습니다.

다음 두 단계를 수행하여 크로스 오리진 스크립트에 대한 가시성을 확보하세요:

crossorigin="anonymous"로 JavaScript 라이브러리를 호출하세요.
crossorigin="anonymous"를 사용하면 스크립트 가져오기 요청은 안전하게 수행됩니다. 쿠키나 HTTP 인증을 통해 민감한 데이터가 전달되지 않습니다.
Access-Control-Allow-Origin HTTP 응답 헤더를 설정하세요.
- Access-Control-Allow-Origin: *은 모든 출처에서 리소스를 가져올 수 있도록 허용합니다.
- Access-Control-Allow-Origin: example.com는 하나의 허용된 오리진을 지정합니다. 서버가 여러 오리진 클라이언트를 지원하는 경우 요청하는 특정 클라이언트의 오리진을 반환해야 합니다.