랩 파트 2: 애플리케이션 계측

랩

이 절차는 New Relic 브라우저 모니터링으로 웹 앱의 문제를 해결하는 방법을 알려주는 랩의 일부입니다.

랩의 각 절차는 마지막 절차를 기반으로 하므로 이 절차를 시작하기 전에 마지막 절차인 랩 환경 설정을완료했는지 확인하십시오.

이제 React 앱이 브라우저에서 실행되고 있습니다. 사용자가 사이트에서 항상 최상의 경험을 하도록 해야 합니다. 이를 위해서는 페이지 로드 시간과 같은 사용자 경험에 대한 통찰력이 필요합니다.

이 목표를 달성하려면 브라우저 에이전트를 설치해야 합니다.

브라우저 에이전트 설치

Step 1 of 6

New Relic으로 이동하여 계정으로 로그인합니다.

Step 2 of 6

상단 탐색 모음의 오른쪽에서 Add data[데이터 추가] 를클릭합니다.

Step 3 of 6

Browser & mobile[브라우저 및 모바일] 까지 아래로 스크롤하고 Browser monitoring[브라우저 모니터링을]선택합니다.

UI는 브라우저 에이전트 설치 과정을 안내합니다.

Step 4 of 6

배포 방법으로 Copy/paste JavaScript code[JavaScript 코드 복사/붙여넣기를] 선택합니다.

Step 5 of 6

Name your app[앱 이름 지정]까지 아래로 스크롤합니다. 앱 이름을 Relicstaurants로지정하고 Enable을클릭합니다.

이렇게 하면 브라우저 모니터링을 활성화하는 JavaScript 코드 스니펫이 제공됩니다. 클립보드에 복사합니다.

Step 6 of 6

선택한 IDE에서 앱을 엽니다.

앱의 public/index.html 파일에서 복사한 자바스크립트 스니펫을 <head>안에 붙여넣습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap"
      rel="stylesheet"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>Relicstaurants</title>
    <!--Replace these lines with your 
      browser monitoring code snippet -->
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

public/index.html

귀하의 애플리케이션은 이제 브라우저 에이전트로 계측됩니다.

애플리케이션 다시 시작

애플리케이션을 구성했으므로 이제 로컬 서버를 다시 시작할 차례입니다.

bash

$npm run build
$npm run newstart

부하 생성기도 다시 시작하십시오.

bash

$python3 simulator.py

중요

올바른 터미널 창에서 이러한 명령을 실행하고 있는지 확인하십시오. 해당 창이 더 이상 없으면 설정 절차의 단계를 따르십시오.

데이터 보기

이제 앱이 브라우저 데이터를 New Relic으로 전송하고 있습니다. Browser[브라우저]아래의 New Relic에서 이 데이터를 봅니다.

Step 1 of 2

New Relic 으로 이동하여 계정으로 로그인합니다.

Step 2 of 2

왼쪽 탐색 모음에서 Browser 로 이동하여 Relicstaurants를선택합니다.

여기에서 Page views with JavaScript errors[JavaScript 오류가 있는 페이지 보기], Core web vitals[핵심 웹 바이탈], User time on the site[사이트의 사용자 시간], Initial page load and route changes[초기 페이지 로드 및 경로 변경], 앱의 기타 성능 데이터를 볼 수 있습니다.

브라우저 에이전트를 사용하여 브라우저 데이터를 New Relic으로 보내도록 애플리케이션을 구성했습니다. 또한 New Relic에서 성능 데이터를 볼 수 있습니다. 다음으로 이 데이터를 사용하여 사이트의 프런트 엔드 오류 문제를 해결합니다.

랩

이 절차는 New Relic 브라우저 모니터링으로 웹 앱의 문제를 해결하는 방법을 알려주는 랩의 일부입니다. 이제 브라우저 에이전트로 애플리케이션을 계측했으므로 오류를 디버그합니다.

이 한글 문서는 사용자의 편의를 위해 기계 번역되었습니다.

랩 파트 2: 애플리케이션 계측

랩

브라우저 에이전트 설치

애플리케이션 다시 시작

중요

데이터 보기

랩