Sentry를 이용한 에러 추적기, React의 선언적 에러 처리 / if(kakao)2022
if kakao 카카오 · YouTube
AI 핵심 요약
웹뷰에서 PDF 버튼이 반응하지 않는 문제를 조사하는 데 시간이 오래 걸리고, 다양한 사용자 환경에서 재현하기도 어려웠습니다. 이를 개선하기 위해 Sentry에 태그·레벨·컨텍스트와 API 정보를 기록하고, 오류 유형에 따라 알림과 수집 기준을 조정해 장애 탐지와 원인 분석에 활용했습니다. 화면 처리에서는 Axios 인터셉터의 명령형 오류 처리를 줄이고, React 에러 바운더리와 React Query를 이용해 오류별 폴백 UI와 복구 동작을 분리했습니다. 그 결과 사용자 환경에서 발생한 오류를 더 잘 파악하고 대응할 수 있었으며, 오류 처리의 관심사를 나누면 사용자 경험과 개발자 경험을 함께 개선할 수 있다는 점을 확인했습니다.
- Sentry의 태그는 검색과 알림 조건에 활용하고, 컨텍스트는 검색이 필요하지 않은 상세 정보를 기록하는 데 적합합니다.
- 모든 오류를 수집하기보다 사용자 대응이나 서비스 개선에 도움이 되는 오류를 선별하고, 디버깅에 필요한 정보를 함께 남기세요.
- Axios 인터셉터에는 공통적인 최소 처리만 두고, 오류 화면과 복구 동작은 에러 바운더리의 폴백 UI에 맡길 수 있습니다.
- React 에러 바운더리는 이벤트 핸들러의 오류를 포착하지 않으므로, React Query의 `useErrorBoundary` 같은 연동 방식을 고려해야 합니다.
- 중첩 에러 바운더리를 사용할 때는 오류를 어느 범위에서 처리할지 정하고, 상위로 전파해야 하는 오류도 구분해야 합니다.
소개
카카오페이 프론트엔드에서 선언적 에러처리를 통한 사용자경험과 개발자경험 증대 및 Sentry를 통한 웹뷰환경에서의 에러 추적, 장애 대응, 사용자 경험 개선기 (axios interceptor와 에러바운더리를 이용해 에러핸들링을 개선해 나가고, sentry를 통해 에러데이터를 쌓아 사용자 경험을 개선해나간 스토리로 풀어볼 예정입니다.) #React #Sentry #선언적에러처리 사용자 경험을 소중하게 생각하는 카카오페이 FE개발팀의 클로이, 나나입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-84 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
비슷한 학습 자료
컨퍼런스 if kakao
React to PDF: 좌충우돌 PDF 생성 기능 개발기 / if(kakaoAI)2024
컨퍼런스 if kakao
리액트 컴포넌트를 PDF 파일로 생성할 수 있게 하는 기능을 개발했습니다. 파일 생성 시 페이지 단위로 픽셀을 맞추기 위해 다양한 스타일링 기술을 활용했으며, 그 과정에서 겪은 어려움과 해결 방법을 소개합니다. #frontend 카카오헬스케어에서 파스타 서비스의 프론트엔드 개발을 담당하고 있는 Zero입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-42 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
웹 개발 프론트엔드
컨퍼런스 if kakao
접근성 작업을 도와주는 ESLint plugin 개발기 / if(kakaoAI)2024
컨퍼런스 if kakao
팀의 접근성 개선 작업 중, “Unit test나 Storybook 없이 접근성 위반을 바로 확인할 수는 없을까?“라는 고민이 들었습니다. 이를 해결하기 위해 접근성 위반 사항을 자동으로 알려주는 ESLint 플러그인을 개발한 경험을 공유합니다. 모빌리티에서 셔틀과 버스대절 서비스를 개발하고 있는 Eddie입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-39 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
프론트엔드 소프트웨어 테스트
컨퍼런스 if kakao
광고 웹 SDK 개편기 with Preact / if(kakao)2022
컨퍼런스 if kakao
광고 웹 SDK(AdFit Web SDK)는 AdFit 플랫폼을 이용하여 광고를 게재하고 수익을 창출하기 위해 웹사이트 등에서 사용하는 라이브러리입니다. 기존 프로젝트의 문제점을 분석하고 개선하고자 개편을 진행하였고 그 과정에서 얻은 소중한 경험들을 공유하려 합니다. 그리고 React의 이웃사촌, Preact를 소개하고 광고 SDK에 어떻게 도입하고 활용했는지도 이야기하고자 합니다. #리팩토링 #Preact 카카오 FE플랫폼팀의 비즈FE파트에서 광고 SDK를 개발하고 있는 제이크 입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-78 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
프론트엔드
컨퍼런스 if kakao
카카오페이의 프론트엔드 서비스가 제공되는 환경에 대해 이야기 하고, 프론트엔드 서비스가 제공되는 환경의 관점에서 개발자 경험과 사용자 경험을 개선하기 위한 카카오페이 프론트엔드 팀의 작업을 사례를 통해 이야기합니다. #UX 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-83 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
웹 개발 프론트엔드
컨퍼런스 if kakao
카카오페이 iOS 웹뷰 소개 및 리팩토링 이야기 / if(kakao)2022
컨퍼런스 if kakao
카카오페이는 네이티브와 웹뷰를 적절히 사용하여 높은 수준의 사용자 경험을 주고자 노력하고 있습니다. 네이티브와 웹뷰의 데이터 전달부터 풀스크린 웹뷰, 바텀시트형 웹뷰, 네비게이션 영역 핸들링이 가능한 웹뷰 등 다양한 방식의 웹뷰를 사용하고 있습니다. 본 세션에서는 다양한 시도를 통해 현재 사용중인 웹뷰로 발전하게 된 과정을 소개합니다. 여러 타입의 웹뷰를 핸들링하는 방법과 리팩토링 스토리를 포함하여 페이 서비스의 특성상 카카오페이앱 및 카카오톡앱 2개의 앱을 개발 해야하는 환경에서 어떻게 코드를 관리하는지에 대해 알아봅니다. #iOS #WebView #리팩토링 #WKWebView 카카오페이 사용자에게 더 나은 경험을 주고싶은 iOS 개발자 joey입니다. 카카오톡 내의 카카오페이 서비스와 카카오페이 앱을 개발하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-89 if(kakao)2022에 대한 자세한 정보는 👉 h...
웹 개발 모바일 앱 개발
컨퍼런스 if kakao
Preview Frontend @if(kakao)2022
컨퍼런스 if kakao
if(kakao)2022 컨퍼런스에서 Frontend 관련 기술 발표 트랙을 소개합니다. 01:28 1. MFA, 누구냐 너: 공통 플랫폼개발 파트의 MFA도입기 by 어호선(sun.kist) 카카오 공통플랫폼개발파트에서 프론트앤드 개발을 담당하고 있는 썬입니다. 01:58 2. 마이크로프론트엔드. 실무에 쓸만할까? by 김수찬(tony.chan) 카카오워크의 관리자 서비스를 개발하고 있습니다. 02:17 3. 웹 반응성 개선하기: Lighthouse Userflow를 사용한 웹 반응성 개선기 by 박은우(ethan.eunwu) 카카오 FE플랫폼팀에서 FE개발자를 위한 개발을 하는 에단입니다. 02:35 4. 카카오페이 프론트엔드 개발팀의 Client Side Rendering 환경 고도화 by 박병현(eric.dev) 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 02:56 5. 광고 웹 ...
프론트엔드