모바일 웹에서 주제 페이지가 흰 화면으로 표시되고 관리자 콘솔에 TypeError 발생

[thedavidprice (David Price)]

iOS vs13.3.1
모바일 Chrome v80.0.3987.95

저희 포럼의 특정 토픽을 방문했을 때 헤더만 로드되었습니다(한 경우에서는 두 번, 아래 오류 출력 후 스크린샷 참조) – 사실상 빈 페이지였습니다. 당시 저는 로그아웃 상태였습니다. 새로고침, 새 페이지 열기 및 다시 로드, 그리고 앱을 닫고 다시 로드하는 모든 시도가 문제를 해결하지 못했습니다. 모바일에서는 진단하기가 매우 어렵습니다.

데스크톱에서는 문제를 재현할 수 없었습니다.

관리자 오류 로그에서 동일한 시간대에 발생한 두 가지 오류를 상관관계로 분석할 수 있었습니다:

# 첫 번째 오류 8:09pm

TypeError: undefined is not a function (near '...l.replace...') Url: https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js Line: 1 Col

https://community.redwoodjs.com/assets/pretty-text-bundle-b028b1d5eed228f191f4f25757a12c99d1209f6a9ce91f98c6d378dd3589df7d.js:1:88120
https://community.redwoodjs.com/assets/application-c72a723208a0a310c886f34a1d7e6157d4a403f74e04829c4d23643ffea3593c.js:1:1218167
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:112413
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:419530
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:409113
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:422544
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:422239
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:415154
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:449567
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:449160
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:449067
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:474873
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:142193
V@https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:187610
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:145561
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:145879
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:145269
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:144382
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:144109
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:490070
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:489056
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:491075
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:496504
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:493039
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:497040
e@https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:29468
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:29788

# 두 번째 오류 8:51pm

TypeError: undefined is not an object (evaluating 'e.position().top') Url: https://community.redwoodjs.com/assets/application-c72a723208a0a310c886f34a1d7e6157d4a403f74e04829c4d23643ffea3593c.js Line:

l@https://community.redwoodjs.com/assets/application-c72a723208a0a310c886f34a1d7e6157d4a403f74e04829c4d23643ffea3593c.js:1:208270
t@https://community.redwoodjs.com/assets/application-c72a723208a0a310c886f34a1d7e6157d4a403f74e04829c4d23643ffea3593c.js:1:208295
scrolled@https://community.redwoodjs.com/assets/application-c72a723208a0a310c886f34a1d7e6157d4a403f74e04829c4d23643ffea3593c.js:1:1095126
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:490059
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:489056
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:491075
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:496504
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:493039
https://community.redwoodjs.com/assets/ember_jquery-3ed0ac532033dfeecf1ec0676df6716cd7076530930c656754ccf103d35b3e23.js:1:497862
[native code]

추가로 제공할 수 있는 정보나 평가를 돕기 위한 단계가 있다면 알려주세요.

[Stephen]

일단 다른 사이트에서 재현 단계를 찾을 때까지 이 문제를 Support 채널로 옮기겠습니다. 이 사이트나 try.discourse.org에서 재현할 수 있다면 #contribute:bug로 처리할 수 있습니다. 제 모바일에서 해당 사이트의 문제 있는 토픽을 확인해 보았지만, 빈 화면 현상을 전혀 재현할 수 없었습니다.

가장 먼저 확인해야 할 사항은 안전 모드에서 작동하는지 여부입니다: RedwoodJS Community

작동한다면 사이트 커스터마이징 문제일 가능성이 높습니다. 다만, 만약 그렇다면 저 역시 동일한 문제를 겪었을 것으로 예상됩니다.

[thedavidprice (David Price)]

@Stephen 감사합니다. 세이프 모드와 세이프 모드 밖에서 모두 에러를 재현해 보았지만, 불행히도 재현하지 못했습니다. 사용자가 로그아웃된 상태에서만 발생하는 것 같습니다. 로그인했을 때 캐시 등이 리셋되어 에러가 "해결"된 것일 수도 있습니다.

에러가 처음 발생한 경로를 말씀드리지 못했는데, 다음과 같습니다:

1. Slack 앱에서 Discourse 통합을 사용합니다. 통합 봇에서 토픽 링크를 클릭했는데, 모바일 Chrome 브라우저에서 열립니다.
2. Chrome 브라우저에는 로그인되어 있지 않았습니다. 위에서 언급한 빈 페이지가 표시되었습니다.

휴대전화에는 Discourse Hub 앱이 설치되어 있습니다. 보통 이 앱을 통해 직접 포럼과 토픽에 접속합니다.

[thedavidprice (David Price)]

게스트로 사이트를 방문하는 다양한 주제에서 이 문제가 발생한다는 보고가 점점 늘고 있습니다. 관리자의 오류 로그를 살펴본 결과, pretty-text-bundle 또는 ember_jquery 에셋(원래 게시물의 오류와 동일)에 대해 TypeError: X is not a function의 변형된 오류들이 기록되어 있는 것으로 보입니다.

→ 방금 2.5.0.beta3로 업그레이드했으며, 문제가 해결되는지 확인 후 다시 보고하겠습니다.

재현 방법

Safe Mode를 사용하여 이 오류를 재현할 수 없었습니다. Safe Mode를 켜면 오류가 사라졌습니다. 하지만 Safe Mode를 “끄면” 다시 오류를 재현할 수 없었습니다.

이 주제는 한동안 웹 브라우저에서 게스트 접근을 통해 오류를 재현했습니다:
RWJS v0.6.0 is Now Available

한 사용자는 https://community.redwoodjs.com/logs/report_js_error 에서 다음 출력이 표시되었다고 보고했습니다:
Rate Limited

저는 Mac에서 Safari로 게스트로 접속하여 이 오류와 그에 따른 Rate Limited 메시지를 재현할 수 있었습니다. 하지만 같은 주제는 Firefox(다시 게스트로)에서는 정상적으로 로드되었습니다.

사이트 설정/호스팅

저희 사이트는 두 가지 플러그인을 사용합니다:

• discourse-chat-integration
• docker_manager

Digitalocean에 호스팅되며, 제공된 설치 지침과 매우 유사한 구성을 사용하고 있습니다.

[codinghorror (Jeff Atwood)]

안전 모드에서 문제가 사라진다면, 테마 쪽에 원인이 있을 가능성이 높습니다?

[thedavidprice (David Price)]

가능은 하지만, 내용은 꽤 평범해 보이는데…

계속 시도해 볼게요. 재현 가능한 예시를 찾은 것 같을 때마다 문제가 해결되어 버리거든요.

캐싱 문제일까요? 어떻게 확인해 볼 수 있을까요?

[codinghorror (Jeff Atwood)]

여기서 재현할 수 없다면, 어쨌든 100% 설정 문제입니다.

[thedavidprice (David Price)]

알겠습니다. 그리고 사실 저는 3월에 사이트를 설정할 때 meta.discourse.org에서 이 문제를 직접 경험해 본 적이 있습니다. Slack 연동 설정에 대한 정보를 Google에서 검색하다가 토픽 링크를 클릭했는데, 제목 헤더가 여러 번 반복된 거의 빈 화면이 표시되었습니다(원래 게시물의 두 번째 스크린샷 참조). 당시에는 Google 검색 캐시 버전을 통해 우회해서 해결했고, 그 이후로는 다시 경험해 보지 못했습니다. 다른 토픽이나 홈 페이지는 정상적으로 방문할 수 있었습니다.

정말 이상하네요.

이 문제를 계속 파헤쳐 보고, 반드시 결과를 공유하겠습니다. 운이 좋으면 beta3 업데이트로 인해 어떻게든 해결되었기를 바랍니다.

마지막으로, 우리는 Discourse에 정말로 매우 만족하고 있으며, 불과 6주 만에 커뮤니티가 빠르게 형성되고 있는 모습을 보며 큰 감동을 받고 있습니다. RedwoodJS가 조금 더 성장할 시간을 가질 수 있다면, 언젠가 사람들이 우리와 같은 말을 할 수 있기를 꿈꾸고 있습니다.

감사합니다.

[codinghorror (Jeff Atwood)]

프록시나 기타 비정상적인 설정을 사용 중이신가요?

[thedavidprice (David Price)]

업데이트
베타3로 업그레이드한 결과, 문제를 보고했던 대부분의 사용자들에게 해당 문제가 사라진 것으로 보입니다. 좋은 일이길 바랍니다!

프록시/설정 관련
네트워크 DNS에는 Cloudflare 1.1.1.1을 사용하고 있으며, 그 외에는 특별한 커스텀 설정은 없습니다.

애드 블로커 때문일 수도 있겠다는 생각이 들었습니다. 예를 들어, 크롬의 시크릿 모드에서는 정상적으로 작동하지만, 시크릿 모드가 아닌 환경에서는 작동하지 않는다고 보고한 사람들이 있었거든요.

아직 원인을 찾지 못해 고민 중입니다…