자바스크립트 fetch API를 사용한 웹 사이트 모니터링 및 로그 분석

10 Sep 2023

javascript

웹 사이트의 모니터링과 로그 분석은 웹 개발자에게 매우 중요한 작업입니다. 가장 일반적인 방법은 서버 측 로그 파일을 확인하는 것입니다. 하지만 자바스크립트 fetch API를 사용하면 클라이언트 측에서도 웹 사이트의 모니터링과 로그 분석을 수행할 수 있습니다.

fetch API란?

fetch API는 웹 브라우저에서 제공하는 내장 API로, 네트워크 요청을 보내고 응답을 받아오는 기능을 제공합니다. 이 API를 사용하여 웹 요청을 보내고, 응답을 처리하고, 로그를 분석하는 등 웹 사이트 모니터링에 활용할 수 있습니다.

웹 사이트 모니터링 예시

아래는 fetch API를 사용하여 웹 사이트의 모니터링을 수행하는 예시 코드입니다. 이 코드는 주기적으로 웹 페이지의 상태를 확인하고, 로그를 기록하는 기능을 가지고 있습니다.

function monitorWebsite(url) {
   setInterval(() => {
      fetch(url)
         .then(response => {
            if (response.ok) {
               console.log(`웹 사이트 (${url})가 정상 작동 중입니다.`);
            } else {
               console.log(`웹 사이트 (${url})에 오류가 발생했습니다. 상태 코드: ${response.status}`);
            }
         })
         .catch(error => {
            console.log(`웹 사이트 (${url})에 접근할 수 없습니다. 오류: ${error}`);
         });
   }, 5000); // 5초마다 요청 보내기
}

monitorWebsite('https://example.com');

위 코드에서는 5초마다 fetch 함수를 사용하여 주어진 URL에 웹 요청을 보냅니다. 응답이 성공적으로 도착하면 “웹 사이트가 정상 작동 중입니다.” 메시지를, 오류가 발생하면 “웹 사이트에 오류가 발생했습니다.” 메시지를 출력합니다. 접근할 수 없는 경우에는 “웹 사이트에 접근할 수 없습니다.” 메시지를 출력합니다.

로그 분석 예시

fetch API를 사용하여 로그를 분석하는 예시 코드입니다. 이 코드는 서버로부터 받은 응답을 분석하여 로그를 작성합니다. 아래 코드는 JSON 형식으로 응답을 받으면 로그에 내용을 추가하는 예시입니다.

function analyzeResponse(response) {
   // 응답 분석 및 로그 작성
   response.json()
      .then(data => {
         console.log('응답 분석 결과:', data);
         // 로그 작성 코드 작성하기
      })
      .catch(error => {
         console.log('응답을 JSON 형식으로 파싱할 수 없습니다.', error);
      });
}

function makeRequest(url) {
   fetch(url)
      .then(response => {
         if (response.ok) {
            analyzeResponse(response);
         } else {
            console.log(`오류 발생. 상태 코드: ${response.status}`);
         }
      })
      .catch(error => {
         console.log(`요청을 보낼 수 없거나, 응답을 받을 수 없습니다. 오류: ${error}`);
      });
}

makeRequest('https://example.com/api/data');

위 코드에서는 fetch 함수를 사용하여 주어진 URL에 웹 요청을 보낸 후, 응답을 분석합니다. 응답이 성공적으로 도착하면 analyzeResponse 함수를 호출하여 분석 결과를 출력합니다. 분석 결과를 이용하여 로그 작성 코드를 추가하면 됩니다.

마무리

자바스크립트 fetch API를 사용하면 클라이언트 측에서도 웹 사이트 모니터링과 로그 분석을 수행할 수 있습니다. 이를 통해 서버 측 로그 파일 확인을 기다리지 않고도 웹 사이트의 상태를 실시간으로 모니터링할 수 있습니다. 이는 웹 개발자에게 편의를 제공하며, 웹 사이트의 성능과 안정성을 검사하는 데 유용합니다.