JS 예외 처리에 대한 아이디어(sofish)_javascript 기술

아마도 네트워크, 브라우저 문제, 캐시 등으로 인해 js의 온라인 실행이 개발 환경과 다를 수 있으며 예외가 발생할 수 있습니다. Node.js 예외는 기본적으로 프런트엔드 개발 엔지니어의 일상입니다. 어떻게 기록하고 활용하는지에 대해 관심을 갖는 사람은 거의 없습니다. 저는 최근에 기본적으로 수집과 사용이라는 두 단계를 포함하는 아이디어에 대해 생각해 왔습니다.

1. 수집
오류 수집의 경우 각 브라우저에 window.onerror라는 인터페이스가 있으므로 매우 편리합니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

window.onerror = function(errorMessage, scriptURL, lineNumber) {
alert(errorMessage, scriptURL, lineNumber)
}

try/catch에서 e.stack과 같은 Stack Trace도 제공합니다(브라우저마다 다르므로 eriwen /javascript 사용 가능) -stacktrace 호환 라이브러리), 다음 코드를 사용해 보세요.

코드 복사 코드는 다음과 같습니다.

try {
fn()
} catch(e) {
alert(e.stack)
}

그래서 이것들을 수집하는 것이 더 편리합니다. 오류 예, 여기서 주의할 점은 window.addEventListener('error', callback, isBubble) 사용 시 콜백의 첫 번째 매개변수가 이벤트가 아니라 Error 객체라는 것입니다. 이 경우 편의상 window.onerror를 사용하는 것이 좋은 선택이지만 도트 연산자를 통해 모니터링되는 이벤트가 오버로드될 수 있으며 이 리스닝 스크립트는 이론적으로 모든 js의 앞에 배치되므로 위험을 고려해야 합니다.

2. 사용
이전에 Alipay를 사용할 때 온라인 js 오류 보고서가 이메일로 바뀌어 프론트엔드 개발팀에 전송되고 모두가 주장하고 해결했습니다. 그 자체. 실제로 이것은 좋은 선택이며 가장 기본적인 문제인 즉각적으로 대응하고 수리하는 문제도 해결합니다. 하지만 문제도 있습니다. 어떻게 같은 실수를 피할 수 있을까요? 내 초기 아이디어는 다음과 같습니다. URL을 하나의 단위로 사용하여 동일한 페이지에 오류를 기록합니다. 페이지 URL, 사용자 에이전트, 스크립트 URL, 오류 메시지 및 줄 번호를 포함하여 기록된 오류의 통합 해결을 용이하게 합니다. , 솔루션을 한곳에 작성할 수 있고, 이를 보는 사람들이 댓글을 달고 포인트를 추가할 수 있으며, 이는 결국 지식 베이스로 보관되며, 이러한 지식 베이스의 콘텐츠를 개발 중 및 개발 시 편리한 API를 통해 활용할 수 있습니다. 동일한 페이지 window.onerror가 발생합니다. 플러그인을 통해 오류 메시지를 분석하여 유형을 식별하고, URL을 판단하여 이전 개발자가 저지른 실수를 개발자는 지식 베이스에서 특정 태그를 구독할 수 있습니다. 자동으로 이메일을 수신합니다. (물론 더 나은 페어링을 위해 파일 주석, 매핑 등을 기반으로 할 수도 있습니다.) 왜 이렇게 합니까? 주로 다음과 같은 문제를 해결합니다. 개발자가 배울 수 있는 지식 기반을 형성합니다. 특히 효율성 향상을 보장하고 반복적인 오류와 반복적인 솔루션을 방지하기 위한 구독 보장 알림이 더욱 타겟팅됩니다.

3. 참고
1. 수집 시 POST를 사용하여 전송합니다. 때로는 오류 메시지가 길어질 수 있으며, 저장된 오류가 많지 않은 경우 GET을 사용하는 것도 고려해 볼 수 있습니다. 일반적으로 POST는 모든 데이터를 백그라운드로 보낼 수 있습니다. 2. 언제 데이터를 보낼 것인가? onerror가 발생했을 때 데이터를 보내는 것이 좋습니다. 처음 이 아이디어가 떠올랐을 때 onbeforeonload 중에 보내려고 했는데 POST 요청이 열리기 전에 브라우저에 의해 중단되었습니다. 3. 데이터베이스에 저장하는 것이 더 좋은 인덱스는 무엇입니까? 일반적으로 URL은 대부분의 웹사이트에 더 적합할 수 있습니다. 그러나 Baixing.com, Taobao 등 UGC가 많은 웹사이트는 URL을 기록하기 위해 수정해야 할 수도 있습니다. 결국, 다른 게시물과 다른 URL은 모두 동일한 코드 세트를 갖습니다. Error를 인덱스로 사용하는 것은 어떻습니까? 사실, 어떤 종류이든 자신의 필요에 따라 선택하세요. 4. 모든 오류를 기록할지 여부도 필요에 따라 더 적절합니다. Baidu.com에는 Baidu/Google에 대한 외부 광고 링크에서 발생할 수 있는 온갖 종류의 지저분한 오류 보고서가 있습니다.

4. 결론
현재 수집 도구(sofish/stacktrace.js)와 저장 방법이 초기에 구현되어 있으므로 계속할지 여부는 시간과 추가 고려가 필요합니다. 먼저 보내드리고, 벽돌을 던져서 옥을 유인하겠습니다.