https://sentry.io/answers/script-error/ 읽고 가공한 글입니다.
What is "Script Error"?
Learn what causes the inscrutable JavaScript “Script error”
sentry.io
Script error.
origin이 다른 곳에서 javascript file를 읽는 도중 에러가 발생했을 때 onerror callback을 보내는데, 그때 callback이 `Script error.` 문구를 노출한다. (여기서 origin이라면 다른 도메인, 다른 포트, 다른 프로토콜을 의미한다)
예제 html
<!DOCTYPE html>
<html>
<head>
<title>example.com/test</title>
</head>
<body>
<script src="http://another-domain.com/app.js"></script>
<script>
window.onerror = function(message, url, line, column, error) {
console.log(message, url, line, column, error);
};
foo(); // call function declared in app.js
</script>
</body>
</html>
app.js
// another-domain.com/app.js
function foo() {
bar(); // ReferenceError: bar is not a function
}
실행결과
아래처럼 응답이 너무 성의 없다. 어디서 에러가 났는지도 알 수 없고, 어떤 에러인지도 알 수 없다.
"Script error.", "", 0, 0, undefined
해결방법
2가지를 반드시 해야한다.
Cross Origin Anonymous
호출하는 JS file을 아무도 모르게 가져와야 한다고 브라우저에게 명령한다. 이렇게 하면 누가 가져갔는지 알 수 없다. 즉 쿠키나 HTTP credentials 정보가 넘어가지 않는다.
<script src="http://another-domain.com/app.js" crossorigin="anonymous"></script>
Cross Origin HTTP header
JS file serving 하는 서버는 아래의 헤더를 추가한다.
Access-Control-Allow-Origin: http://www.example.com, http://www.another-domain.com
위의 2가지를 설정하고 다시 해보면 에러 로깅이 풍부하다.
ReferenceError: bar is not defined", "http://another-domain.com/app.js", 2, 1, [Object Error]
'IT > web' 카테고리의 다른 글
| [web] 렌더링 차단 CSS (0) | 2024.10.23 |
|---|---|
| [web] 렌더링 트리 생성, 레이아웃 및 페인트 (0) | 2024.10.22 |
| [css] Animiation 만들 때 유용한 사이트 소개 (0) | 2024.06.19 |
| [html] dns-prefetch (0) | 2024.06.19 |
| [web] image lazy loading 기법 (0) | 2024.05.16 |
