• English日本語한국어
  • 로그인지금 시작하기

사용자의 편의를 위해 제공되는 기계 번역입니다.

영문본과 번역본이 일치하지 않는 경우 영문본이 우선합니다. 보다 자세한 내용은 이 페이지를 방문하십시오.

문제 신고

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

이 절차는 New Relic을 사용하여 웹 앱 문제를 해결하는 방법을 가르치는 실습의 일부입니다. .

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

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

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

브라우저 에이전트 설치

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

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

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

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

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

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

선택한 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에서 이 데이터를 봅니다.

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

왼쪽 탐색 모음에서 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 브라우저 모니터링으로 웹 앱의 문제를 해결하는 방법을 알려주는 랩의 일부입니다. 이제 브라우저 에이전트로 애플리케이션을 계측했으므로 오류를 디버그합니다.

Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.