React useEffect 버그로 햅틱 피드백 발생, 유지율 35%→18% 하락

문제: 사용자들이 신고한 무작위 진동

한 개발자가 4개월 동안 여러 사용자로부터 앱이 "무작위로 진동한다" 또는 "이유 없이 계속 진동한다"는 이메일을 받았습니다. 처음에는 사용자의 혼란으로 치부되었지만, 이 신고들은 정확한 버그 신고로 밝혀졌습니다. 이 문제는 상당한 유지율 문제를 일으켰습니다: 7일 유지율이 카테고리 벤치마크 35%에 비해 18%로 떨어졌습니다.

디버깅의 어려움

햅틱 피드백이 기기마다 다르게 느껴지기 때문에 이 버그는 재현하기 어려웠습니다. Pixel과 같은 플래그십 폰에서는 모터가 정밀하고 미묘한 반면, Moto G 시리즈와 Redmi Note와 같은 중급 기기에서는 모터가 더 강하고 더 눈에 띄었습니다. 개발자는 테스트 중 자신의 Pixel 기기에서는 아무것도 느끼지 못했습니다.

사용된 디버깅 도구:

Reactotron으로 리렌더링을 추적하고 문제가 있는 컴포넌트 범위를 좁힘
원격 기기 테스트를 위한 BrowserStack (그러나 햅틱 피드백은 라이브 세션을 통해 전송되지 않음)
Drizz, 실제 물리적 기기에서 앱을 실행하고 리얼타임으로 햅틱 트리거 발동과 함께 리렌더링 빈도를 보여줌

근본 원인

문제는 React useEffect 훅 안에 햅틱 호출이 있었기 때문입니다. 의존성 배열에 메모이제이션되지 않고 모든 렌더링에서 재생성되는 객체 참조가 있었습니다. 이로 인해 지속적으로 리렌더링되는 화면에서 모든 단일 리렌더링이 햅틱 피드백을 발동시켰습니다.

해결책: 객체를 useMemo로 감싸 리렌더링을 줄이고 햅틱 루프를 멈췄습니다.

영향과 회복

이 버그는 4개월 동안 사용자들에게 조용히 영향을 미쳤습니다. 문제를 수정한 후, 7일 유지율은 이후 6주 동안 18%에서 29%로 회복되었습니다.

핵심 통찰

Mixpanel, Amplitude 및 사용자 정의 이벤트 추적이 설정되어 있었음에도 불구하고, 가장 정확한 버그 신고는 사용자들의 일반 텍스트 이메일에서 나왔습니다. 개발자는 다음과 같이 언급했습니다: "스택 추적 없음. 기기 정보 없음. 재현 단계 없음. 그저 '당신의 앱이 무작위로 진동합니다'라는 말뿐이었고, 그들이 제 전체 분석 스택이 4개월 동안 알려준 어떤 것보다 더 정확했습니다."

📖 전체 출처 읽기: r/openclaw