문제
JavaScript(JS) 오류 이벤트는 JS 오류 페이지 에서 컴파일됩니다. 기본적으로 오류 메시지별로 그룹화됩니다. 단일 오류 이벤트를 선택하면 해당 Error Instances 목록에 자세한 내용이 표시됩니다. 경우에 따라 하나 이상의 인스턴스에 스택 추적이 없을 수 있습니다.
팁
대신 "This error is likely coming from a third-party site and no stack trace is available " 메시지가 표시됩니다.
해결책
CORS(교차 출처 리소스 공유)를 활성화하면 이 문제를 제거할 수 있으며 JS 오류의 전체 세부 정보를 애플리케이션에 노출하고 오류의 스택 추적을 브라우저 에이전트에서 캡처할 수 있습니다.
CORS 활성화 및 설정에 대한 정보를 제공하는 온라인 리소스가 많이 있습니다. 이 MDN 문서에는 응답 헤더 구성 섹션과 CORS 설정 속성 에 대한 섹션을 포함하여 CORS에 대한 자세한 설명이 있습니다. Enable CORS 웹사이트에는 다양한 플랫폼에서 CORS를 활성화하는 방법에 대한 정보가 있습니다.
New Relic is not responsible for the accuracy of third-party websites.
주의
이 문서는 CORS 사용에 대한 일반적인 소개를 위한 것입니다. 가능한 보안 문제로 인해 애플리케이션 또는 리소스의 보안에 영향을 미치는 변경 사항을 구현하기 전에 조사하는 것이 좋습니다. 최적의 CORS 구현은 사용 중인 시스템과 보안 고려 사항에 따라 다릅니다.
다음은 CORS를 구현하는 방법에 대한 일반적인 지침입니다.
앱에 자바스크립트를 제공하는 모든 타사 자산의 응답 헤더에
Access-Control-Allow-Origin
코드를 추가합니다.Access-Control-Allow-Origin: YOUR_DOMAIN도메인 또는 여러 도메인을 설정하면 해당 특정 도메인에 오류 추적 세부 정보 및 기타 사용 가능한 리소스에 대한 액세스 권한이 부여됩니다. 이 MDN 문서에는 여러 도메인 추가 또는 도메인 대신 와일드카드 사용과 같은 응답 헤더 구성 에 대한 유용한 정보가 포함될 수 있습니다.
애플리케이션에서 브라우저가 CORS
crossorigin
속성을 사용하여 JavaScript 파일을 로드하도록 합니다.<script src="EXTERNAL_LOCATION/script.js" crossorigin></script>이 MDN 문서에는 CORS 설정 속성 에 대한 유용한 정보가 포함될 수 있습니다.
원인
스택 추적 누락 문제의 가장 일반적인 원인은 동일 출처 정책입니다. 이는 둘 다 동일한 출처를 가지지 않는 한 하나의 웹 리소스가 다른 리소스의 데이터에 액세스하는 것을 방지하는 보안 정책입니다. 이 컨텍스트에서 origin URI 체계, 호스트명 및 포트 번호의 조합입니다. 이 정책은 악성 코드가 다른 웹 리소스에 액세스하는 것을 방지합니다.
동일 출처 정책은 인터넷 보안에 중요하지만 웹 리소스가 함께 작동하는 것을 더 어렵게 만들 수 있습니다. 특히 CDN(콘텐츠 전송 네트워크) 또는 기타 외부 위치에서 호스팅되는 JS 스크립트가 있는 경우 문제가 발생할 수 있습니다. New Relic은 해당 스크립트에서 발생하는 오류를 볼 수 있지만 데이터에 액세스할 수 없습니다.