'스크립트 오류'는 무엇을 의미합니까?-JS 튜토리얼-php.cn

What the Heck Does

코어 포인트

브라우저는 JavaScript 파일이 다른 소스에서 나올 때 "스크립트 오류"메시지를

콜백 함수로 보냅니다. 이는 잠재적으로 민감한 정보의 우발적 인 누출을 방지하는 보안상의 이유입니다.

다른 소스의 파일에서 제공하는 JavaScript 오류에 대한 통찰력을 얻으려면 두 단계를 수행해야합니다. 스크립트 속성 추가 및 크로스 도메인 HTTP 헤더 추가. 이를 통해 모든 소스가 파일을 가져올 수 있으며 스크립트에 의해 트리거 된 오류는

로보고됩니다. onerror 스크립트의 HTTP 헤더를 조정할 수없는 경우

를 대안으로 사용할 수 있습니다. 타사 코드를

블록으로 래핑하면 크로스 도메인 스크립트가 던진 오류에 대한 통찰력을 얻을 수 있습니다. 그러나 가능한 경우 CORS 속성 및 헤더를 설정하는 것이 좋습니다. crossorigin="anonymous" window.onerror 이 기사는 sentry.io와 공동으로 만들어졌습니다. Sitepoint를 가능하게 한 파트너를 지원해 주셔서 감사합니다.

이전에

이벤트를 사용한 경우 다음 상황에 직면했을 수 있습니다. try/catch <..> 스크립트 오류. try/catch

오류가 다른 소스 (다른 도메인 이름, 포트 또는 프로토콜)의 JavaScript 파일에서 발생하면 브라우저는

콜백 함수로 "스크립트 오류"를 보냅니다. 오류가 발생하더라도 오류가 무엇인지 알지 못하거나 오류가 발생하는 코드가 무엇인지 모르기 때문에 이것은 고통 스럽습니다. 그리고 의 전체 목적은 응용 프로그램에서 매치되지 않은 오류에 대한 통찰력을 얻는 것입니다.

이유 : 크로스 도메인 스크립트 무슨 일이 일어나고 있는지 더 잘 이해하려면 다음 예제 HTML 문서를 고려하십시오. 이것은

의 내용입니다. 그것은

라는 단일 함수를 선언합니다. onerror

이 문서가로드되고 브라우저에서 javaScript가 실행되면 다음은 콘솔에 출력됩니다 (

콜백 함수를 통해 기록) :
.
"스크립트 오류.", "", ",", 0, 0, 정의되지 않은

이것은 JavaScript 오류가 아닙니다. 브라우저는 보안상의 이유로 다른 소스의 스크립트 파일을 의도적으로 숨 깁니다. 이는 스크립트가 실수로 잠재적으로 민감한 정보를 제어 할 수없는 콜백 함수로 유출하는 것을 방지하기위한 것입니다. 따라서 브라우저를 사용하면

가 동일한 도메인에서 유래 한 오류에 대한 통찰력을 얻을 수 있습니다. 우리가 아는 것은 다른 것을 알지 못하는 오류가 발생했다는 것입니다! onerror window.onerror 나는 정말 나쁜 사람이 아닙니다!

브라우저는 좋은 의도에 있지만 다른 소스의 스크립트로 던져진 오류에 대해 깊이 파고 들기를 원하며 몇 가지 좋은 이유가 있습니다.

응용 프로그램 javaScript 파일은 다른 호스트 이름 (예 :

)에서 나옵니다. static.sentry.io/app.js 귀하는 CDNJS 또는 Google 호스팅 라이브러리와 같은 커뮤니티 CDN에서 제공 한 라이브러리를 사용하고 있습니다.

당신은 외부 서버에서만 사용할 수있는 상업용 타사 JavaScript 라이브러리를 사용하고 있습니다.

하지만 걱정하지 마세요! 이 파일에서 제공하는 JavaScript 오류에 대한 더 깊은 이해에는 간단한 조정이 필요합니다.

솔루션 : Cors 속성 및 헤더

다른 소스의 스크립트가 던진 JavaScript 예외를 이해하려면 두 가지 작업을 수행해야합니다.

> 1. add 스크립트 속성

이것은 브라우저에 대상 파일을 "익명으로"검색해야한다는 것을 알려줍니다. 즉,이 파일을 요청할 때 브라우저는 쿠키 또는 HTTP 자격 증명과 같은 잠재적 인 사용자 식별 정보를 서버로 전송하지 않습니다.

> 2. 크로스 도메인 HTTP 헤더 를 추가하십시오 CORS는 크로스 도메인 자원 공유의 약어이며, 파일이 도메인에 걸쳐 다운로드 및 제공되는 방법을 지정하는 API 세트 (주로 HTTP 헤더)입니다.

를 설정하여

를 설정하면 서버는 브라우저에 모든 소스 가이 파일을 얻을 수 있음을 나타냅니다. 또는 제어하는 알려진 소스로 제한 할 수 있습니다.

이 두 단계가 완료되면이 스크립트에 의해 트리거 된 오류는 일반 동일한 도메인 스크립트와 마찬가지로 `crossorigin="anonymous"`로보고됩니다. 따라서 예제는 더 이상 "스크립트 오류"가 아니라 대신 : 입니다.

그게 다야! "스크립트 오류"는 더 이상 당신과 당신의 팀을 귀찮게하지 않습니다.

<!DOCTYPE html>
<html>
<head>
  <title>example.com/test</title>
</head>
<body>
  <🎜>
  <🎜>
</body>
</html>

로그인 후 복사

<<> 대안 : try/catch

<🎜 🎜> 때로는 웹 애플리케이션이 사용하는 스크립트의 HTTP 헤더를 조정할 수 없습니다. 이 경우 대안이 있습니다.

이번에는 원래 예제를 다시 고려하십시오.

미래 세대를 위해 다시 다음과 같이 다시 한 번 :

// another-domain.com/app.js
function foo() {
  bar(); // ReferenceError: bar 不是函数
}

로그인 후 복사

예제 html을 실행합니다. html은 다음 두 항목을 콘솔에 출력합니다 : <🎜 🎜>.

에서 <🎜 🎜>에서 첫 번째 콘솔 명령문은 파일 이름 및 줄 번호를 포함하여 유형, 메시지 및 스택 추적이 포함 된 오류 객체를 얻을 수있었습니다. <🎜 🎜>의 두 번째 콘솔 문은 다시 "스크립트 오류"만 출력 할 수 있습니다.

이제, 이것은 모든 코드를 캡처해야한다는 것을 의미합니까? 아마. HTML을 쉽게 변경하고 CDN에서 CORS 헤더를 지정할 수 있다면이 작업을 수행하고 <🎜 🎜>를 고수하는 것이 좋습니다. Access-Control-Allow-Origin: * 그러나 이러한 리소스를 제어하지 않으면

를 사용하여 타사 코드를 래핑하는 것은 크로스 도메인 스크립트가 던진 오류에 대한 더 깊은 이해를 얻을 수있는 신뢰할 수있는 (지루하지만) 신뢰할 수있는 방법입니다.

<🎜>

로그인 후 복사

참고 : 기본적으로 Sentry의 JavaScript SDK Raven.js는 내장 된 메소드를 조심스럽게 감지하여 코드를

블록으로 자동 랩핑하려고 시도합니다. 이것은 오류 메시지가 어디에서 왔는지에 관계없이 모든 스크립트의 오류 메시지와 스택 추적을 캡처하려고 시도합니다. 가능하면 여전히 CORS 속성 및 헤더를 설정하는 것이 좋습니다. try/catch 물론, 모든 무거운 리프팅을 수행 할 수있는 상업용 및 오픈 소스 도구가 많이 있습니다. (SHH : Sentry와 함께 JavaScript를 디버깅 해보고 싶을 수도 있습니다.)

그게 다야! 행복한 오류 모니터링.

스크립트 오류 faq

(FAQ 부분은 여기에서 생략되어 기사가 너무 길고 기사의 주제와 약한 상관 관계가 있기 때문에 필요에 따라 FAQ를 직접 추가하거나 수정할 수 있습니다.

위 내용은 '스크립트 오류'는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!