공부를 위해 접속한 게더타운에서 이런 오류가 생겼다. 브라우져 렌더링을 공부하는 입장에서는 단순히 넘길 수는 없는 일... 개발자 도구를 통해, 에러 메시지를 읽어보고 공부를 해보려고 온갖 검색 수단을 동원했다.
⚠️ 403 Error
Failed to load resource: the server responded with a status of 403 ()
bam.nr-data.net/jserrors/1/NRJS-5c3e5dbb627552c5b58?a=1385902829&sa=1&v=1216.487a282&t=Unnamed%20Transaction&rst=4648934&ck=1&ref=https://app.gather.town/app:1 Failed to load resource: net::ERR_CONNECTION_TIMED_OUT
bam.nr-data.net/events/1/NRJS-5c3e5dbb627552c5b58?a=1385902829&sa=1&v=1216.487a282&t=Unnamed%20Transaction&rst=4648937&ck=1&ref=https://app.gather.town/app:1 Failed to load resource: net::ERR_CONNECTION_TIMED_OUT
cdn.gather.town/storage.googleapis.com/gather-town.appspot.com/internal-dashboard/sounds/BuHpL3aHEyvdbC9bhxsAA#.mp3:1 Failed to load resource: the server responded with a status of 403 ()
cdn.gather.town/storage.googleapis.com/gather-town.appspot.com/internal-dashboard/sounds/BuHpL3aHEyvdbC9bhxsAA#.mp3:1 Failed to load resource: the server responded with a status of 403 ()Failed to load resource: the server responded with a status of 403 ()이 오류 메시지는 서버가 요청에 대해 "Forbidden" 상태 코드인 403를 반환하여 리소스를 제공하지 않는다는 것을 알린다. 해당 리소스에 대한 액세스 권한이 없거나 인증이 실패했을 가능성.
Failed to load resource: net::ERR_CONNECTION_TIMED_OUT서버와의 연결 시도 시간 초과되었다는 의미. 서버가 응답하지 않거나 연결에 문제가 있는 경우 발생. 네트워크 연결 상태를 확인하고, 서버의 상태를 체크해야 함.
Failed to load resource: the server responded with a status of 403 () 앞서 언급한 것과 동일한 오류 메시지로, 다른 리소스에 대한 액세스 권한이 없거나 인증이 실패했을 가능성...
⚠️ Texture.frame missing
Texture.frame missing: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAYElEQVR42mNggIL/dAYMyAAkcOzaty30xHBHDITlKI4YdcCoA0YdMOqAIesA9LKdrg7AVcHQ3QG4+HRPAwPmgAFLA5T6fPiUAwMeAqNRMOqAUQeMOmB4OGDAO6cD3T0HAP/GVbrBsicTAAAAAElFTkSuQmCC
get @ bundle.bd2c9c8d2835fc0541df.js:2이미지 데이터가 base64 인코딩된 형태로 제공되고 있다. 이 오류는 웹 페이지나 앱에서 이미지 리소스를 로딩하려 할 때 해당 이미지의 프레임 정보가 누락되어 발생할 수 있다. 프레임 정보는 이미지의 크기와 위치를 나타내는데 사용.
function(t, e, i) {
var n = i(33)
, s = i(0)
, r = i(109)
, o = i(424)
, a = "Texture.frame missing: "
, h = new s({
initialize: function(t, e, i, n, s) {
Array.isArray(i) || (i = [i]),
this.manager = t,
this.key = e,
this.source = [],
this.dataSource = [],
this.frames = {},
this.customData = {},
this.firstFrame = "__BASE",
this.frameTotal = 0;
for (var r = 0; r < i.length; r++)
this.source.push(new o(this,i[r],n,s))
},
add: function(t, e, i, n, s, o) {
if (this.has(t))
return null;
var a = new r(this,t,e,i,n,s,o);
return this.frames[t] = a,
"__BASE" === this.firstFrame && (this.firstFrame = t),
this.frameTotal++,
a
},
remove: function(t) {
return !!this.has(t) && (this.get(t).destroy(),
delete this.frames[t],
!0)
},
has: function(t) {
return this.frames[t]
},
get: function(t) {
t || (t = this.firstFrame);
var e = this.frames[t];
return e || (console.warn(a + t), // 에러 메시지가 출력되는 라인
e = this.frames[this.firstFrame]),
e
},에러 메시지가 나오는 코드 라인과 그가 포함된 함수를 발췌 해봤다. 프레임이나 리소스에 관련된 함수인 것 같고, 처음보는 문법 구조라, 이게 어떤 프레임워크 기반인지는 알 수 없지만 get에서 문제가 일어나고 있다는 점을 이해할 수 있다.
⚠️ ChatGPT의 솔루션
- 각 리소스에 대한 액세스 권한을 확인하고 필요한 권한을 설정합니다.
- 네트워크 연결 상태를 점검하고, 서버가 정상적으로 응답하는지 확인합니다. 필요한 경우 인증 토큰이나 인증 정보를 올바르게 제공하여 리소스 요청을 처리합니다.
- 이미지 데이터 확인, 리소스 경로 확인 : 인코딩 불가불 여부.
- 프레임 정보 추가 : 프레임 정보에는 이미지의 위치와 크기 등의 데이터가 포함 되어있고, 부적절하면 렌더링에 실패.
Frontend Engineer