User Notes 플러그인이 사이트를 망가뜨립니다

제가 관리하는 두 사이트를 방금 업데이트했는데, 두 사이트 모두에서 문제가 발생하여 사용자 노트 플러그인에 대해 알게 되었습니다.

어제 제 사이트 중 하나에서는 "화이트 스크린 오브 데스(화면이 하얗게 뜨는 현상)"가 발생했습니다. 안전 모드 외에는 사이트가 전혀 보이지 않았습니다. app.yml에서 해당 플러그ンを 주석 처리하고 다시 빌드했더니 사이트가 다시 복구되었습니다.

다른 사이트에서는 로고와 햄버거 메뉴 등이 포함된 상단 내비게이션만 사라지고 콘솔에 오류가 발생했습니다. 아래를 참조하세요. 관리자 대시보드에서 플러그인을 비활성화하자 다시 복구되었습니다.

vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:12 Uncaught (in promise) Error: Could not find module `discourse/plugins/discourse-user-notes/discourse-user-notes/connectors/user-profile-controls/show-notes-on-profile` imported from `discourse/plugins/discourse-staff-notes/discourse-user-notes/connectors/admin-user-controls-after/add-user-notes-button`
    at vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:12:31
    at c (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:12:96)
    at s.findDeps (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:24:158)
    at c (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:12:152)
    at requireModule (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:6:60)
    at discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:4420:78
    at discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:4420:1
    at Array.forEach (<anonymous>)
    at a (discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:4417:32)
    at u (discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:4420:39)
    at discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:4424:261
    at discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:4420:1
    at Array.forEach (<anonymous>)
    at a (discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:4417:32)
    at c (discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:4424:64)
    at e.renderedConnectorsFor (discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:4414:65)
    at e.init (discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:1196:50)
    at e.r [as init] (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:2090:9)
    at g (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:2007:98)
    at e.create (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:2015:108)
    at g.create (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:604:93)
    at ye.create (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:747:9)
    at Object.evaluate (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3299:9)
    at Object.evaluate (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3134:13)
    at Dt.evaluateSyscall (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3435:61)
    at Dt.evaluateInner (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3429:138)
    at Dt.evaluateOuter (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3429:59)
    at Wt.next (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3490:26)
    at Wt._execute (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3489:25)
    at Wt.execute (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3488:298)
    at Yt.sync (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3492:86)
    at Er.render (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:1061:546)
    at vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:1087:31
    at It (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3425:5)
    at Rr._renderRoots (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:1086:34)
    at Rr._renderRootsTransaction (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:1091:10)
    at Rr._renderRoot (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:1085:50)
    at Rr._appendDefinition (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:1080:6)
    at Rr.appendOutletView (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:1078:6)
    at invoke (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3834:139)
    at p.flush (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3826:74)
    at h.flush (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3839:207)
    at q._end (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3896:9)
    at _boundAutorunEnd (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3848:605)
discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:5224 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'addEventListener')
    at discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:5224:291
    at Array.forEach (<anonymous>)
    at e.didInsertElement (discourse-aebc0fdc441730b0e5f42bf52a5341cffca664e9a40a015a846b1b64f61dd773.js:5224:253)
    at e.r [as didInsertElement] (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:2090:9)
    at e.trigger (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:2233:34)
    at e.r [as trigger] (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:2090:9)
    at ye.didCreate (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:761:32)
    at Nt.commit (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3414:3)
    at Mt.commit (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3423:17)
    at It (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3425:19)
    at Rr._renderRoots (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:1086:34)
    at Rr._renderRootsTransaction (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:1091:10)
    at Rr._revalidate (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:1091:490)
    at invoke (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3834:129)
    at p.flush (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3826:74)
    at h.flush (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3839:207)
    at q._end (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3896:9)
    at _boundAutorunEnd (vendor-fded770671ed964514369b968313e4ab522dc911c142420bcc24ae31cf85252f.js:3848:605)

메타에도 설치되어 있는 거 아닌가요? 재현 가능한가요?

테스트 사이트에 적용해서 업데이트해 보면 어떤 일이 일어나는지 알려드릴게요…

수정: 업그레이드 전에 사용자 노트를 몇 개 추가해 봤는데, 이로 인해 문제가 생기는지 확인하려고 했습니다. 하지만 아무 문제도 없었습니다. 완벽하게 잘 작동했습니다.

테스트 사이트에도 해당 플러그인을 설치해 두었고(80fce67150) 여기 메타 사이트에도 설치되어 있는데, 모든 기능이 정상적으로 작동하는 것 같습니다.

사실 잘 생각해 보니, ‘사용자 노트 추가’ 버튼이 일부 사용자 카드에서만 표시되고 다른 곳에서는 표시되지 않네요.

제 생각에는 과거에 사용자 노트가 첨부된 적 있는 사용자들에 대해서만 버튼이 표시되는 것 같습니다. 노트가 한 번도 첨부된 적 없는 사용자의 경우 버튼이 생성되지 않는 것으로 보입니다.

@tobiaseigen 두 사이트 중 어디에서든 사용자 노트를 사용해 보셨나요?

정말 미스터리네요. 제 사이트에서 작동하지 않아서 지금은 비활성화해 두었고, 확인도 할 수 없습니다. 흰 화면 오류(화면이 하얗게 보이는 현상)가 발생했던 사이트에서는 과거에 이 기능을 사용했던 기억이 있지만, 어떤 사용자들에게 사용했는지 기억나지 않습니다. 헤더가 사라지는 문제가 있던 사이트에서는 이 기능을 사용한 적이 없습니다.

아마도 노트가 하나도 없어서, 이를 따를 선례가 없어 무언가를 파악하는 데 어려움을 겪은 것일 수 있다고 생각했습니다:


`Uncaught (in promise) Error: Could not find module `discourse/plugins/discourse-user-notes/discourse-user-notes/connectors/user-profile-controls/show-notes-on-profile` imported from `discourse/plugins/discourse-staff-notes/discourse-user-notes/connectors/admin-user-controls-after/add-user-notes-button`
    

그리고 두 번째 오류인

Cannot read properties of null

에 관해서는, :memo: 아이콘이 보통 모든 사용자의 사용자 카드(usercard)에 표시되므로, 여기에서도 뭔가 약간 꼬여 있는 것 같습니다.

음.. 화이트 스크린 오브 데스 사이트에서 커스텀 테마 컴포넌트의 설정에서 이 메시지가 표시됩니다. 다음 단계로 이 테마 컴포넌트를 비활성화한 뒤 사용자 노트를 다시 활성화해 보는 것이 좋겠습니다.

죄송합니다 – ember 또는 .ember-view CSS 선택자는 런타임에 동적으로 생성되며 시간이 지나면 변경되어 결국 CSS가 깨지는 결과를 초래하므로 사용할 수 없습니다. 다른 선택자를 사용해 보세요.

제가 의도를 잘못 이해한 게 아니라면… 이 말은 맞지 않는 것 같습니다. 저는 특정 사용자에게 사용자 노트가 생성된 경우에만 :memo: 아이콘을 본 적이 있습니다. 플러그인이 활성화된 상태에서는 모든 사용자에게 해당 아이콘이 적용되는 모습을 본 적이 없거든요.

게시물에 있는 사용자 이름 옆의 것은 노트가 있을 때만 표시됩니다. 하지만 사용자 카드에 있는 것은 쉽게 추가할 수 있는 방법인 줄 알았어요.

아마 제가 잘못 기억하고 있는 것일 수도 있겠네요. :slightly_smiling_face:

아… 네, 우리는 UI에 대해 서로 다른 두 부분을 이야기하고 있는 것 같습니다: 사용자 프로필에서는 플러그인이 활성화된 경우 버튼이 항상 존재해야 합니다. 즉, 다음과 같이요:

2022-08-26_jammy_user_notes

하지만 주제(topic) 안에서 이름 옆에 표시되는 것은 사용자가 노트를 작성한 경우에만 그래야 합니다:

그리고 문장에서 "thusly"라는 단어를 쓰는 사람은 누구죠? 바로 이 사람입니다.

실수했어요. 스크린샷도 함께 첨부했어야 했는데요. :slight_smile: 유저카드에 있는 :memo: 아이콘을 말씀드린 거예요:

어떤 사람들에게는 표시되고 어떤 사람들에게는 표시되지 않는데, 예전에는 모두에게 표시되던 줄 알았거든요.

아… 조금 더 가까워지는 것 같네요. :wink:

지금까지 사용자에 메모가 연결되어 있을 때만 거기에 표시되는 걸 본 적이 있어요. 그게 당연하다고 생각했지만, 그게 의도된 동작인지 확인하려면 코드를 살펴봐야 할 것 같아요.

Docker 이미지를 다시 빌드한 이후로 동일한 문제가 발생하고 있습니다.

사이트의 홈 페이지에서 Chrome 개발자 콘솔에 다음 오류가 반복적으로 표시됩니다:

Uncaught (in promise) Error: Could not find module `discourse/plugins/discourse-user-notes/discourse-user-notes/connectors/user-profile-controls/show-notes-on-profile` imported from `discourse/plugins/discourse-staff-notes/discourse-user-notes/connectors/admin-user-controls-after/add-user-notes-button`
    at loader.js:247:1
    at c (loader.js:258:1)
    at s.findDeps (loader.js:168:1)
    at c (loader.js:262:1)
    at requireModule (loader.js:24:1)
    at plugin-connectors.js:65:1
    at plugin-connectors.js:51:1
    at Array.forEach (<anonymous>)
    at a (plugin-connectors.js:46:1)
    at u (plugin-connectors.js:64:1)
    at plugin-connectors.js:93:1
    at plugin-connectors.js:51:1
    at Array.forEach (<anonymous>)
    at a (plugin-connectors.js:46:1)
    at c (plugin-connectors.js:84:1)
    at e.renderedConnectorsFor (plugin-connectors.js:107:1)
    at e.init (plugin-outlet.js:53:1)
    at e.r [as init] (index.js:449:1)
    at g (core_object.js:149:1)
    at e.create (core_object.js:685:1)
    at g.create (index.js:551:1)
    at ye.create (index.js:1054:1)
    at Object.evaluate (runtime.js:3301:1)
    at Object.evaluate (runtime.js:1312:1)
    at Dt.evaluateSyscall (runtime.js:5232:1)
    at Dt.evaluateInner (runtime.js:5188:1)
    at Dt.evaluateOuter (runtime.js:5180:1)
    at Wt.next (runtime.js:6191:1)
    at Wt._execute (runtime.js:6175:1)
    at Wt.execute (runtime.js:6166:1)
    at Yt.sync (runtime.js:6250:1)
    at Er.render (index.js:7576:1)
    at index.js:7896:1
    at It (runtime.js:5074:1)
    at Rr._renderRoots (index.js:7876:1)
    at Rr._renderRootsTransaction (index.js:7928:1)
    at Rr._renderRoot (index.js:7863:1)
    at Rr._appendDefinition (index.js:7770:1)
    at Rr.appendOutletView (index.js:7752:1)
    at invoke (backburner.js:353:1)
    at p.flush (backburner.js:241:1)
    at h.flush (backburner.js:447:1)
    at B._end (backburner.js:999:1)
    at B._boundAutorunEnd (backburner.js:648:1)

관리자 화면 → 플러그인에서 해당 플러그인을 비활성화하면 오류는 사라지지만, 이제 노트가 표시되지 않습니다 :frowning:

discourse-staff-notes를 실행 중이고 discourse-user-notes를 실행하지 않고 있기 때문에 발생하는 문제일까요?

제가 아는 한, user notes는 staff notes의 새로운 이름이며, 둘은 같은 것입니다. https://github.com/discourse/discourse-staff-notes에 접속하면 다음 주소로 리다이렉트됩니다:

app.yml이 기존 경로를 참조하고 있다면, 이를 수정하는 것이 나쁠 일은 분명하지 않습니다.

참고로, 오늘 토비아스와 동일한 오류를 겪었습니다.

동일한 오류, 모바일에서는 흰 화면, 데스크톱에서는 상단 내비게이션이 사라집니다.
홈 페이지에서 발생했습니다(다른 페이지에서도 발생할 수 있지만, 확인은 하지 않았습니다).

긴 이야기 :sleeping: 짧게, 정답은 여기에 있습니다

두 플러그인이 동일한 저장소를 참조하더라도, 플러그인 디렉터리 이름이 discourse-user-notes가 아니면 플러그인이 깨집니다.

그래서 토비아스, 당신은 올드 스쿨 스타일이라 아직도 discourse-staff-notes라고 이름 붙여 놓은 거죠, 맞나요?

물론이죠! 이 사이트를 2015년에 만들었으니 꽤 올드스쿨입니다. 방금 이름을 변경하고 재구축 중이라 어떤 결과가 나올지 지켜보겠습니다. 팁을 주셔서 감사합니다!

방금 이름 변경 후 재빌드하고 활성화했는데, 다시 정상적으로 돌아왔습니다!

@RGJ 님, 감사합니다!

우리도 2015년이에요!

전환은 업데이트와 비슷합니다. 그냥 해야 한다는 걸 잊지 않으면 됩니다.