누군가는 이 오류를 빠르게 해결할 수 있기를 바라며 글을 적습니다.. ㅠㅠ
📝오류 내용
예기치 않은 응용 프로그램 오류!
'Node'에서 'insertBefore'를 실행하지 못했습니다.새 노드가 삽입되기 전에 노드가 이 노드의 자식이 아닙니다.
🧐문제 상황
내가 배포한 서비스 "고냥이타운 생성기"에서 오류가 발생했다는 보고를 받았다.
저희는 다 정상이거든요? 근데 저분만 저래요
색닉생성기 - 색깔 클릭시 (저분만)저런데요..!
라는 내용과 함께 위의 스크린숏을 받았다.
"고냥이타운 생성기"의 주소는 다음과 같다.
색상 추가하기 버튼을 클릭해서 색상을 리스트에 추가할 수 있다.
하지만 어떤 한명의 사용자는 색상 추가하기 버튼을 눌렀을 때 오류가 발생한다고 했다.
🏃해결 과정
해당 사용자는 크롬을 사용하고 있었다.
크롬 브라우저는 자동 업데이트가 되기 때문에, 오래된 브라우저라서 발생하는 문제는 아닐 것 같았다.
나는 vite를 통해 프로젝트를 빌드했었다.
vite는 오래된 브라우저를 지원하지 않을 수 있다고 한다. 혹시 몰라서 일단은 @vitejs/plugin-legacy 플러그인을 이용해 오래된 브라우저도 지원할 수 있도록 업데이트 하긴 했다.
오류 내용을 구글에 검색해보니 오류 내용이 한글이라서 직접적인 해결방법을 찾을 수는 없었다.
바로 해결할 수 있는 문제는 아닌 것 같았다.
오류 내용을 보아하니 기존의 컨텐츠에 변형이 일어나서 생기는 문제같다는 직감이 오기는 했다.
사용자가 설치한 확장 프로그램 때문인가? 라는 생각이 들었지만 스크린숏을 보아하니 해당 사용자의 브라우저에는 확장프로그램이 별로 설치되어 있지 않은 것 같았다.
저도 아직은 정확한 원인을 모르겠네요ㅠ-ㅠ 일단은 다른 브라우저 사용(링크 복사해서 핸드폰으로 접속, Edge 브라우저 사용 등...)으로 시도해보라고 안내해드리는게 가장 빠를 것 같습니다.
영어로도 검색 해 보았다.
영어 원문 오류 문구가 무엇인지 몰라서 여러 검색어를 시도해보았다.
그러던 중 다음과 같은 Stack overflow 답변을 찾을 수 있었다.
Sometimes it happens when users use Google Translate, it mutates text nodes, and React breaks on the next render. More info and how to fix it: https://github.com/facebook/react/issues/11538#issuecomment-390386520
You can also add the next properties to the HTML tag to disable Google Translate and fix this problem: <html class="notranslate" translate="no">
사용자가 Google Translate를 사용할 때 텍스트 노드가 변형되고 다음 렌더에서 React가 중단되는 경우가 있습니다. 자세한 정보 및 해결 방법: https://github.com/facebook/react/issues/11538#issuecomment-390386520
또한 HTML 태그에 다음 속성을 추가하여 Google 번역을 비활성화하고 이 문제를 해결할 수 있습니다. <http class="notranslate" translate="no">
재빨리 오류 스크린숏을 다시 확인 해 보았다.
주소창에 번역 아이콘이 나타나 있었다. 이게 맞는 것 같았다.
크롬 브라우저로 들어가 번역 버튼을 눌러보았다. 오류가 재현되었다. 찾았다. 만세!
오류 원인을 알고 나니 한국어로 된 문서도 찾을 수 있었다.
💡오류 원인
브라우저 번역기를 사용하면, 번역기가 텍스트를 <font> 태그로 감싼다.
하지만 리액트에서 변경된 내용을 감지하지 못한다.
DOM 트리에서 사라진 객체를 참조하려고 해서 문제가 발생한다.
✅내가 선택한 해결 방법
내가 만든 서비스는 한국어 사용자만을 대상으로 한다.
따라서 html 태그에 <html class="notranslate" translate="no">를 적용하고 끝내는 편이 효율적인 것 같았다.
➕다른 방법
- 해당 텍스트 노드를
<span>으로 감싸서 내용이<font>태그로 대체되더라도 React에서 참조하는 노드가 DOM 트리에 유지되도록 하는 방법 - i18n을 사용하는 방법
다음에도 이런 일이 일어난다면?
Sentry를 사용해볼까?
사용자가 보내준 스크린숏에 있는 한국어 에러만 확인할 수 있어서 원인 파악에 시간이 더 걸렸다.
또한 난독화된 소스코드이기 때문에 정확히 어디에서 에러가 발생한건지 알기 어려웠다.
오류가 발생한 다음날이 되어서야 원인을 파악하고 수정할 수 있었다.
문제를 해결하고나서도 계속 고민이 되었다. 다음에도 이런 문제가 생기면 어떻게 해결해야 할지...
잠에 들기 전에 여러 검색을 하다가 Sentry라는 것을 알아냈다.
다른 이슈 트래커들도 있지만 Sentry의 점유율이 87.8%였다.
Sentry란?
모니터링 툴이다. 프론트엔드에서도 사용할 수 있다.
Wappalyzer 라는 브라우저 확장앱으로 확인해 보았을 때, Tistory에서도 Sentry를 사용한다는 것을 알 수 있었다.
오류가 발생하면 개발자에게 알림을 보내준다.
오류를 빠르게 탐지하고 정확하게 원인을 파악하여 빠르게 대응할 수 있도록 돕는다.
Sentry 관련 글 추천
https://engineering.linecorp.com/ko/blog/log-collection-system-sentry-on-premise/
Sentry로 사내 에러 로그 수집 시스템 구축하기
LINE DEVELOPER DAY 2020에서 복다훈 님이 발표하신 Story that built Sentry as an On-Premise 세션 내용을 옮긴 글입니다. 안녕하세요. LINE Plus UIT 팀 복다훈입니다. 이...
engineering.linecorp.com
https://tech.kakaopay.com/post/frontend-sentry-monitoring/
Sentry로 우아하게 프론트엔드 에러 추적하기 | 카카오페이 기술 블로그
Sentry를 통해 프론트엔드에서 발생하는 오류를 신속하게 탐지하고 정확한 원인을 파악하여 빠르게 대응하는 방법을 알아봅니다.
tech.kakaopay.com
