JavaScript 예외 처리에 대한 아이디어

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

1. 수집

각 브라우저에는 인터페이스가 있으므로 오류를 수집하는 것이 매우 편리합니다. window.onerror:

window.onerror = function(errorMessage, scriptURL, lineNumber) {
　 Alert(errorMessage, scriptURL, lineNumber)
} Stack Trace도 제공합니다. 예를 들어 try/catch에서는 e.stack도 제공됩니다(브라우저마다 다르므로 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를 이용하여 전송

가끔 오류 메시지가 길어질 수 있고, 브라우저의 URL 길이가 제한되어 있는 경우도 있습니다. GET을 사용하여 전송하는 것을 고려할 수 있지만 일반적으로 POST는 모든 데이터를 백그라운드로 보낼 수 있습니다.

　2. 데이터 전송 시기

　 onerror가 발생했을 때 데이터 전송을 권장합니다. 처음 이 아이디어가 떠올랐을 때 onbeforeonload 중에 보내려고 했는데 POST 요청이 열리기 전에 브라우저에 의해 중단되었습니다.

　3. 데이터베이스에 저장하는 것이 더 좋은 인덱스는 무엇입니까?

일반적으로 대부분의 웹사이트에는 URL이 더 적합할 수 있습니다. 그러나 Baixing.com, Taobao 등 UGC가 많은 웹사이트는 URL을 기록하기 위해 수정해야 할 수도 있습니다. 결국, 다른 게시물과 다른 URL은 모두 동일한 코드 세트를 갖습니다.

Error를 인덱스로 활용하면 어떨까요? 사실, 어떤 종류이든 자신의 필요에 따라 선택하세요.

　4. 모든 오류를 기록할지 여부

　이 역시 필요에 따라 더 적절합니다. Baidu.com에는 Baidu/Google에 대한 외부 광고 링크에서 발생할 수 있는 온갖 종류의 지저분한 오류 보고서가 있습니다.

4. 결론

현재 수집 도구(sofish/stacktrace.js)와 저장 방법(URL을 인덱스로 포함)이 초기에 구현되었으므로 계속할지 여부는 시간이 걸립니다. 그리고 더 많은 고려를 먼저 하고, 그것을 출발점으로 활용하세요.

　5. 부록
$url = new Url();
$page = $url->post('page');
if(!$page ) return;
class ErrorTrace 확장 MongoData {
// MongoData에서 찾을 수 없음, 차이
public function findOne($obj) {
return $this->connection->findOne($obj ) ;
　}
};
$store = new ErrorTrace();
$fields = array(
　'url' => $url->post('url') ,
'메시지' => $url->post('message'),
'line' => $url->post('line'),
'ua' = > ; $url->post('ua'),
);
$index = array('page' => $page);
$hash = md5(json_encode($fields) ) ;
//오류를 반복적으로 기록하지 마십시오. 모든 오류는 동일한 URL에 기록됩니다.
if($field = $store->findOne($index)) {
　if(isset($ field[ $hash])) return;
return $store->setAttr(new Query('page', $page), $hash, $fields);
}
$store-> page = $page;
$store->$hash = $fields;
$store->save();
?> GitHub에서 제공하는 요지입니다.