프론트 엔드 오류는 실제 사용자 모니터링(RUM)을 사용하여 수집됩니다. 오류 메시지와 스택 트레이스는 사용 가능한 경우 포함됩니다.
프론트 엔드 오류는 error.origin에 따라 네 가지 카테고리로 분류됩니다.
console.error()API 호출.addErrorAPI와 함께 전송된 오류.모든 RUM 이벤트 유형의 기본 속성에 대한 내용은 수집된 데이터를 참조하세요. 샘플링 또는 글로벌 컨텍스트 구성에 대한 내용은 RUM 데이터 및 콘텍스트 수정하기를 참조하세요.
| 속성 | 유형 | 설명 |
|---|---|---|
error.source | 문자열 | 오류가 발생한 곳 (예:console). |
error.type | 문자열 | 오류 유형(또는 경우에 따라 오류 코드). |
error.message | 문자열 | 이벤트를 설명하는 간결하고 사람이 읽을 수 있는 한 줄 메시지입니다. |
error.stack | 문자열 | 스택 트레이스 또는 오류에 대한 보완 정보입니다. |
소스 오류에는 오류에 대한 코드 레벨 정보가 포함됩니다. 다양한 오류 유형에 대한 자세한 내용은 MDN 문서에서 확인할 수 있습니다.
| 속성 | 유형 | 설명 |
|---|---|---|
error.type | 문자열 | 오류 유형(또는 경우에 따라 오류 코드). |
처리된 예외, 처리된 약속 거부 및 RUM Browser SDK에서 자동으로 추적되지 않는 기타 오류를 addError()API를 통해 모니터링하세요:
addError(
error: unknown,
context?: Context
);참고: 오류 추적 기능은 소스가 custom 또는 source로 설정되어 있고 스택 트레이스가 포함되어 전송된 오류를 처리합니다. 다른 소스(예: console)로 전송된 오류는 오류 추적에서 처리되지 않습니다.
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);
}
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 및 글로벌 이벤트 핸들러에 대한 이 참고 사항을 참조하세요. 이 오류의 원인은 다음과 같습니다:
example.com은 static.example.com의 어셋 포함)에서 호스팅됩니다.다음 두 단계를 수행하여 교차 출처 스크립트에 대한 가시성을 확보하세요:
crossorigin="anonymous"로 JavaScript 라이브러리를 호출하세요.
crossorigin="anonymous"를 사용하면 스크립트 가져오기 요청은 안전하게 수행됩니다. 쿠키나 HTTP 인증을 통해 민감한 데이터가 전달되지 않습니다.
Access-Control-Allow-Origin HTTP 응답 헤더를 설정하세요.
Access-Control-Allow-Origin: *은 모든 출처에서 리소스를 가져올 수 있도록 허용합니다.Access-Control-Allow-Origin: example.com는 하나의 허용된 오리진을 지정합니다. 서버가 여러 오리진 클라이언트를 지원하는 경우 요청하는 특정 클라이언트의 오리진을 반환해야 합니다.Additional helpful documentation, links, and articles:
