초대 페이지 오류 - "undefined의 속성을 읽을 수 없습니다('slice')"

최신 안정판에서 /u/user_name/invited/pending 페이지의 “초대 링크 생성” 버튼을 클릭하면 JavaScript 오류가 발생합니다.

콘솔에는 다음과 같은 내용이 표시됩니다:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘slice’)
at h.shortKey (chunk.f105ceace2ad381ddb2f.d41d8cd9.js:241:61588)

초대 객체가 서버에서 invite_key가 채워지기 전에 렌더링되면 invite_key가 undefined 상태가 되어, 아무것도 없는 값에 .slice()를 사용하려고 할 때 크래시가 발생합니다.

invite.js의 shortKey 함수는 초대 키를 줄이는 작업을 수행합니다:

shortKey(key) {
return key.slice(0, 4) + “…”;
}

메타 서버에서는 재현할 수 없으므로, 제 서버나 네트워크 속도가 느리기 때문일 수도 있습니다. 하지만 사용 전에 키가 존재하는지 확인하는 것이 문제를 해결하는 것 같습니다:

return key ? key.slice(0, 4) + “…” : “”;

간단한 수정인 경우, 여기에 게시하는 것이 나은지, 아니면 PR을 여는 것이 나은가요?

초대 키는 null이 될 수 없습니다:

그리고 여기서는 model.invites를 반복하고 있습니다:

코드를 살펴봤는데, 네트워크에 400ms 지연을 추가해도 재현할 수 없어 부분적으로 채워진 데이터가 어디서 오는지 확실하지 않습니다.

패치를 적용하기 전에 재현 방법이 필요합니다. 이 패치를 적용하면 사람들이 깨진 초대 링크를 복사하게 될 수 있습니다.

확인해 주시고 지적해 주셔서 감사합니다.

지연을 before_create 앞에 배치하면 문제가 드러나야 합니다.

다음과 같이 업데이트했습니다:

{{else}}
  {{icon "link"}}
+ {{#if invite.invite_key}}
    {{i18n
      "user.invited.invited_via_link"
      key=invite.shortKey
      count=invite.redemption_count
      max=invite.max_redemptions_allowed
    }}
+ {{else}}
+   <em>링크 생성 중...</em>
+ {{/if}}
{{/if}}

로컬라이제이션이 적용된다면 이 PR은 괜찮을 것 같습니다.

Invite를 절반만 채워진 객체로 설정하는 부분이 어디인지 여전히 약간 혼란스럽지만, 실패하는 것보다는 나을 것 같고 제 생각에는 맞는 것 같습니다.

latest 버전에서 수정되었을 수도 있겠다는 생각이 듭니다. 그렇다면 해당 오류를 수정한 커밋을 찾아 안정 버전으로 백포트하면 됩니다.

초대는 save() 직후 목록에 추가되지만, 서버에서 invite_key가 채워지기 전입니다. 여전히 latest에 존재하므로 PR #35679를 열었습니다.

1개의 좋아요