Flutter 웹 애플리케이션 모니터링

Flutter 통합은 Flutter 웹 애플리케이션의 성능을 모니터링하여 애플리케이션의 문제를 진단하고 코드를 최적화하는 데 도움을 줍니다. Flutter 통합은 브라우저 모니터링에이전트를 활용하고 가장 중요한 Flutter 앱 메트릭(오류, 군대 충돌, 앱 추가, 앱 설치, HTTP 오류, 네트워크 오류 등)이 포함된 사전 구축된 대시보드를 제공합니다.

설치

1단계(선택 사항): 인프라 에이전트 설치

인프라 에이전트 설치는 선택 사항이지만 이렇게 하면 앱이 실행 중인 호스트에 대한 중요한 메트릭을 얻을 수 있습니다.

이렇게 하려면 Flutter 앱이 포함된 호스트에 대한 인프라 에이전트 설치 단계를 따르세요.

2단계: 브라우저 에이전트 설치

Flutter 통합은 브라우저 에이전트에 의존하여 작동합니다. 브라우저 에이전트를 설치하려면:

1. one.newrelic.com 에서, Integrations & Agents 페이지 로 이동하세요.
2. Browser and mobile 클릭한 다음 Browser monitoring 클릭합니다.
3. Select copy/paste JavaScript code 옵션을 선택합니다(이 코드에 대한 자세한 내용은 브라우저 설치 문서 참조).
4. 나머지 단계를 완료하고 다음을 클릭하세요. Enable.
5. Flutter 웹 애플리케이션의 www/root 디렉토리로 이동합니다.
6. index.html 파일을 엽니다.
7. 헤드 태그가 끝나기 직전(</head>)에 브라우저 코드 스니펫을 붙여넣습니다.
8. 응용 프로그램을 다시 시작하십시오.

5분 정도 기다린 후 New Relic에서 데이터 찾기를 진행합니다.

데이터 찾기

Flutter 대시보드를 얻으려면:

1. one.newrelic.com 에서, Integrations & Agents 페이지 로 이동하세요.
2. Dashboards 을 클릭합니다.
3. 검색창에 flutter web 를 입력합니다.
4. Flutter 대시보드가 나타납니다. 그것을 클릭하여 설치하십시오.

Flutter 대시보드는 맞춤형 대시보드로 간주되며 Dashboards UI 에서 찾을 수 있습니다. 대시보드 사용 및 편집에 대한 문서는 대시보드 문서 를 참조하세요.

이 통합은 브라우저 모니터링 이벤트형식으로 데이터를 보고합니다. 인프라 에이전트를 설치한 경우 인프라 데이터도 수신합니다.

다음은 데스크톱 컴퓨터에서 사용자가 사용하는 다양한 브라우저의 평균 창 로드 시간을 확인하는 NRQL 쿼리의 예입니다.

SELECT average(windowLoad) FROM PageViewTiming 
WHERE (deviceType = 'Desktop') FACET `userAgentName` 
SINCE 604800 seconds AGO TIMESERIES

다음은 뭐지?

데이터 쿼리 및 맞춤형 대시보드 생성에 대해 자세히 알아보려면 다음 문서를 확인하세요.

• 쿼리 빌더 소개
• 맞춤형 대시보드 소개
• 대시보드 관리