2022년 10월 18일에 오프라인과 온라인으로 진행될 Firebase Summit에 참여하세요. Firebase로 앱을 빠르게 개발하고 안심하고 앱을 출시하며 손쉽게 확장하는 방법을 알아보세요. 지금 등록하기

특정 앱 코드에 대한 사용자 지정 모니터링 추가

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

성능 모니터링은 앱의 성능을 모니터링하는 데 도움이 되는 추적 을 수집합니다. 추적은 앱의 두 시점 사이에 캡처된 성능 데이터 보고서입니다.

고유한 추적을 만들어 앱의 특정 코드와 관련된 성능 데이터를 모니터링할 수 있습니다. 사용자 지정 코드 추적 을 사용하면 앱이 특정 작업 또는 작업 집합을 완료하는 데 걸리는 시간(예: 이미지 집합 로드 또는 데이터베이스 쿼리)을 측정할 수 있습니다.

사용자 지정 코드 추적의 기본 메트릭은 "기간"(추적의 시작 지점과 중지 지점 사이의 시간)이지만 사용자 지정 메트릭 도 추가할 수 있습니다.

코드에서 Performance Monitoring SDK에서 제공하는 API를 사용하여 사용자 지정 코드 추적의 시작과 끝을 정의합니다.사용자 지정 코드 추적은 생성된 후 언제든지 시작할 수 있으며 스레드로부터 안전합니다.

이러한 추적에 대해 수집된 기본 메트릭은 "기간"이므로 "기간 추적"이라고도 합니다.

성능 대시보드 하단에 있는 추적 테이블의 사용자 정의 추적 하위 탭에서 이러한 추적의 데이터를 볼 수 있습니다(이 페이지 뒷부분에서 콘솔 사용에 대해 자세히 알아보기).

기본 속성, 사용자 정의 속성 및 사용자 정의 측정항목

맞춤 코드 추적의 경우 Performance Monitoring은 기본 속성 (국가, 브라우저, 페이지 URL 등의 일반 메타데이터)을 자동으로 기록하므로 Firebase 콘솔에서 추적 데이터를 필터링할 수 있습니다. 사용자 정의 속성 (예: 게임 레벨 또는 사용자 속성)을 추가하고 모니터링할 수도 있습니다.

추적 범위 내에서 발생하는 성능 관련 이벤트에 대한 사용자 지정 메트릭 을 기록하도록 사용자 지정 코드 추적을 추가로 구성할 수 있습니다. 예를 들어 캐시 적중 및 누락 수 또는 UI가 상당한 시간 동안 응답하지 않는 횟수에 대한 사용자 지정 메트릭을 만들 수 있습니다.

맞춤 속성 및 맞춤 측정항목은 추적에 대한 기본 속성 및 기본 측정항목과 함께 Firebase 콘솔에 표시됩니다.

사용자 지정 코드 추적 추가

Performance Monitoring Trace API 를 사용하여 사용자 지정 코드 추적을 추가하여 특정 애플리케이션 코드를 모니터링합니다.

다음 사항에 유의하십시오.

  • 앱에는 여러 사용자 지정 코드 추적이 있을 수 있습니다.
  • 둘 이상의 사용자 지정 코드 추적을 동시에 실행할 수 있습니다.
  • 사용자 지정 코드 추적의 이름은 선행 또는 후행 공백이 없고 선행 밑줄( _ ) 문자가 없고 최대 길이가 100자라는 요구 사항을 충족해야 합니다.
  • 사용자 정의 코드 추적은 사용자 정의 메트릭사용자 정의 속성 추가를 지원합니다.

사용자 지정 코드 추적을 시작 및 중지하려면 추적하려는 코드를 다음과 유사한 코드 줄로 래핑합니다.

Web version 9

import { trace } from "firebase/performance";

const t = trace(perf, "CUSTOM_TRACE_NAME");
t.start();

// Code that you want to trace 
// ...

t.stop();

Web version 8

const trace = perf.trace("CUSTOM_TRACE_NAME");
trace.start();

// Code that you want to trace 
// ...

trace.stop();

User Timing API를 사용하여 사용자 지정 코드 추적 추가

성능 모니터링 추적 API 외에도 브라우저의 기본 사용자 타이밍 API 를 사용하여 사용자 정의 코드 추적을 추가할 수 있습니다. 이 API를 사용하여 측정된 추적 기간은 Performance Monitoring SDK에서 자동으로 선택됩니다. User Timing API를 사용하면 Performance Monitoring SDK를 비동기식으로 로드하려는 경우에 특히 유용합니다. SDK가 초기화되면 SDK는 로드 전에 발생한 측정을 기록합니다.

이 기능을 사용하려면 추적하려는 코드를 사용자 타이밍 표시로 래핑합니다.

Web version 9

const performance = window.performance;

performance.mark("measurementStart");

// Code that you want to trace 
// ...

performance.mark("measurementStop");
performance.measure("customTraceName", "measurementStart", "measurementStop");

Web version 8

const performance = window.performance;

performance.mark("measurementStart");

// Code that you want to trace 
// ...

performance.mark("measurementStop");
performance.measure("customTraceName", "measurementStart", "measurementStop");

위의 예에서 performance 은 브라우저의 window.performance 개체를 나타냅니다.

사용자 타이밍 API를 사용할 때 사용자 지정 메트릭 및 속성은 사용자 지정 코드 추적에 추가할 수 없습니다. 이러한 사용자 정의 요소를 사용자 정의 코드 추적에 추가하려면 Performance Monitoring Trace API 를 사용하십시오.

사용자 지정 코드 추적에 사용자 지정 메트릭 추가

Performance Monitoring Trace API 를 사용하여 사용자 지정 코드 추적에 사용자 지정 메트릭을 추가합니다.

다음 사항에 유의하십시오.

  • 맞춤 측정항목의 이름은 선행 또는 후행 공백, 선행 밑줄( _ ) 문자, 최대 길이 100자 등의 요구 사항을 충족해야 합니다.
  • 각 사용자 지정 코드 추적은 최대 32개의 메트릭(기본 지속 시간 메트릭 포함)을 기록할 수 있습니다.

사용자 지정 메트릭을 추가하려면 이벤트가 발생할 때마다 다음과 유사한 코드 줄을 추가합니다. 예를 들어 이 맞춤 측정항목은 앱에서 발생하는 성능 관련 이벤트를 계산합니다.

Web version 9

import { trace } from "firebase/performance";

async function getInventory(inventoryIds) {
  const t = trace(perf, "inventoryRetrieval");

  // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
  t.incrementMetric("numberOfIds", inventoryIds.length);

  // Measures the time it takes to request inventory based on the amount of inventory
  t.start();
  const inventoryData = await retrieveInventory(inventoryIds);
  t.stop();

  return inventoryData;
}

Web version 8

async function getInventory(inventoryIds) {
  const trace = perf.trace("inventoryRetrieval");

  // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
  trace.incrementMetric("numberOfIds", inventoryIds.length);

  // Measures the time it takes to request inventory based on the amount of inventory
  trace.start();
  const inventoryData = await retrieveInventory(inventoryIds);
  trace.stop();

  return inventoryData;
}

사용자 지정 코드 추적에 대한 사용자 지정 특성 만들기

성능 모니터링 추적 API 를 사용하여 사용자 정의 코드 추적에 사용자 정의 속성을 추가하십시오.

사용자 지정 속성을 사용하려면 속성을 정의하고 이를 특정 사용자 지정 코드 추적과 연결하는 코드를 앱에 추가합니다. 추적이 시작될 때와 추적이 중지될 때 사이에 언제든지 사용자 정의 속성을 설정할 수 있습니다.

다음 사항에 유의하십시오.

  • 사용자 정의 속성의 이름은 선행 또는 후행 공백이 없고 선행 밑줄( _ ) 문자가 없고 최대 길이가 32자라는 요구 사항을 충족해야 합니다.

  • 각 사용자 정의 코드 추적은 최대 5개의 사용자 정의 속성을 기록할 수 있습니다.

  • Google에서 개인을 식별하는 정보가 포함된 맞춤 속성을 사용해서는 안 됩니다.

    이 지침에 대해 자세히 알아보기

Web version 9

import { trace } from "firebase/performance";

const t = trace(perf, "test_trace");
t.putAttribute("experiment", "A");

// Update scenario
t.putAttribute("experiment", "B");

// Reading scenario
const experimentValue = t.getAttribute("experiment");

// Delete scenario
t.removeAttribute("experiment");

// Read attributes
const traceAttributes = t.getAttributes();

Web version 8

const trace = perf.trace("test_trace");
trace.putAttribute("experiment", "A");

// Update scenario
trace.putAttribute("experiment", "B");

// Reading scenario
const experimentValue = trace.getAttribute("experiment");

// Delete scenario
trace.removeAttribute("experiment");

// Read attributes
const traceAttributes = trace.getAttributes();

성능 데이터 추적, 보기 및 필터링

실시간 성능 데이터를 보려면 앱이 실시간 데이터 처리와 호환되는 성능 모니터링 SDK 버전을 사용하는지 확인하십시오. 실시간 성능 데이터에 대해 자세히 알아보세요 .

대시보드에서 특정 측정항목 추적

주요 메트릭의 추세를 알아보려면 성능 대시보드 상단의 메트릭 보드에 추가하십시오. 주간 변경 사항을 확인하여 회귀를 빠르게 식별하거나 코드의 최근 변경 사항으로 인해 성능이 향상되고 있는지 확인할 수 있습니다.

Firebase Performance Monitoring 대시보드의 측정항목 보드 이미지

메트릭 보드에 메트릭을 추가하려면 다음 단계를 따르세요.

  1. Firebase 콘솔에서 성능 대시보드 로 이동합니다.
  2. 빈 메트릭 카드를 클릭한 다음 보드에 추가할 기존 메트릭을 선택합니다.
  3. 추가 옵션(예: 메트릭 교체 또는 제거)을 보려면 채워진 메트릭 카드에서 를 클릭하십시오.

메트릭 보드는 시간 경과에 따라 수집된 메트릭 데이터를 그래픽 형식과 숫자 백분율 변경으로 표시합니다.

대시보드 사용에 대해 자세히 알아보세요.

추적 및 해당 데이터 보기

추적을 보려면 Firebase 콘솔의 성능 대시보드 로 이동하여 추적 표까지 아래로 스크롤한 다음 해당 하위 탭을 클릭합니다. 표에는 각 추적에 대한 몇 가지 상위 메트릭이 표시되며 특정 메트릭에 대한 백분율 변경을 기준으로 목록을 정렬할 수도 있습니다.

Performance Monitoring은 측정항목 변경 사항을 강조 표시하는 문제 해결 페이지를 Firebase 콘솔에 제공하므로 앱과 사용자에 대한 성능 문제의 영향을 쉽고 빠르게 해결하고 최소화할 수 있습니다. 예를 들어 다음 시나리오에서 잠재적인 성능 문제에 대해 알아볼 때 문제 해결 페이지를 사용할 수 있습니다.

  • 대시보드에서 관련 메트릭을 선택하면 큰 변화가 있음을 알 수 있습니다.
  • 추적 테이블에서 가장 큰 델타를 맨 위에 표시하도록 정렬하면 상당한 비율 변화를 볼 수 있습니다.
  • 성능 문제를 알리는 이메일 알림을 받습니다.

다음과 같은 방법으로 문제 해결 페이지에 액세스할 수 있습니다.

  • 메트릭 대시보드에서 메트릭 세부 정보 보기 버튼을 클릭합니다.
  • 측정항목 카드에서 => 세부정보 보기 를 선택합니다. 문제 해결 페이지에는 선택한 측정항목에 대한 정보가 표시됩니다.
  • 추적 테이블에서 해당 추적과 연관된 행의 추적 이름 또는 메트릭 값을 클릭하십시오.
  • 이메일 알림에서 지금 조사 를 클릭합니다.

추적 테이블에서 추적 이름을 클릭하면 관심 있는 메트릭으로 드릴다운할 수 있습니다. 필터 버튼을 클릭하여 속성별로 데이터를 필터링합니다. 예를 들면 다음과 같습니다.

속성별로 필터링되는 Firebase Performance Monitoring 데이터의 이미지
  • 페이지 URL 로 필터링하여 사이트의 특정 페이지에 대한 데이터 보기
  • 효과적인 연결 유형 으로 필터링하여 3g 연결이 앱에 미치는 영향 알아보기
  • 국가 별로 필터링하여 데이터베이스 위치가 특정 지역에 영향을 미치지 않도록 합니다.

추적 데이터 보기 에 대해 자세히 알아보세요.

다음 단계

  • 속성을 사용하여 성능 데이터를 검사하는 방법에 대해 자세히 알아보세요.

  • Firebase 콘솔에서 성능 문제를 추적 하는 방법에 대해 자세히 알아보세요.

  • 앱의 성능을 저하시키는 코드 변경에 대한 경고를 설정합니다 . 예를 들어 특정 사용자 지정 코드 추적 기간 이 설정한 임계값을 초과하는 경우 팀에 대한 이메일 알림을 구성할 수 있습니다.