재현 안 되는 엣지 케이스 잡기 — 입력 먹통의 범인은 user-select였다

채팅 상세가 스켈레톤만 보임

압력 관련 영역들이 입력이 동작 하지 않는 현상

실제 서비스 개발을 하면서 가장 어려운 상황은

기능개발 리팩토링 도 아닌 특정 유저 또는 특정 케이스 상황에서만 발생하는 이슈 버그를 잡는것이라고 생각합니다 이번에 찾기 어려웠던 엣지 케이스를 해결하면서 이러한 특정 케이스 에서 확인해 볼수 있는 내용들을 정리해 보려고 합니다

우선 일반적인 상황에서 재현이 되지 않는경우 확인해 봐야 할것들

1번같은 경우는 사실 찾기 쉽습니다 센트리나 앰플리튜드같은 도구를 사용하고 있다면 재현이 되지않아도 에러메세지 확인이 가능 합니다

2번 특정 유저 케이스인가로 확인 또는 추측이 된다면 해당 유저와 같은 조건을 가진 계정으로 확인해 볼 수 있습니다 해당 케이스인지만 명확하다면 역시 쉽게 해결할 수 있습니다

이번에 제가 겪은 케이스는

특정 유저도 잘못된 사용으로도 특정 os인지도 확인이 어려운 상태였습니다

재현도 저를 포함 다른 동료들도 안되는 상태였고 로깅을 확인해봐도 별다른 특이점은 없었습니다

그중에 제가 갖고 있던 구형 아이폰으로 테스트를 했고 재현이 되는걸 확인 문제가 있는 엘리먼트만 순수하게 만들어서 테스트를 해봐도 해결이 안됨

입출력 로직엔 문제 없음 그렇다면 전체 다른 사용자 에게도 문제가 있어야 함

스크립트문제도 다른 로직에 의한 문제도 아니었고

css 쪽이 의심되었고 최근에 추가했던 user-select 를 의심하고 제거 해결완료

해당 속성은 입출력과 관계가 없는데 왜 그런가 싶었더니 웹킷의 이전 버전의 이슈 ….

입력과 관계된 엘리먼트에는 user-select auto 적용

전혀 관계 없어 보이는 속성이 갖는 특정 버전에서의 이슈