New Relic - monitoruj Core Web Vitals w czasie rzeczywistym

Wykrywaj anomalie i błędy oraz wąskie gardła poprzez ciągły monitoring aplikacji.

W tej instrukcji, pokażemy jak krok po kroku uruchomić monitorowanie Core Web Vitals (Lighthouse) z użyciem New Relic na platformie Cloudlets.Zone.

New Relic ONE to narzędzie do monitorowania wydajności aplikacji dla administratorów i programistów, zorientowane na zapewnianiu głębokiego wglądu w wydajność i niezawodność projektu w czasie rzeczywistym. New Relic zaprojektowano do wskazywania i diagnozowania problemów. Może śledzić przepustowość transakcji internetowych, wykrywać anomalie, analizować powody spowolnienia zapytań lub żądań internetowych i ogólnie zapewnia dużą ilość przydatnych danych do szybkiego i wygodnego rozwiązywania problemów.

Na Cloudlets.Zone przygotowaliśmy dodatek, który umożliwia szybką i łatwą instalację New Relic ONE i rozpoczęcie śledzenia najważniejszych informacji o serwerze aplikacji w ciągu kilku minut. Dodatkowo, dostarczony pakiet zawiera wbudowaną opcję automatycznego sprawdzania dostępnych aktualizacji - w ten sposób możesz być zawsze na bieżąco z najnowszymi funkcjami i możliwościami, jakie zapewnia zespół New Relic.

Tak więc, aby zacząć optymalizację aplikacji web pod kątem Core Web Vitals, będziesz potrzebować:

• konta na New Relic, z unikalnym identyfikatorem użytkownika (tj. kluczem licencyjnym)

• uruchomionego środowisko na Cloudlets.Zone z wdrożoną aplikacją, występującą na liście kompatybilności New Relic.

Po spełnieniu tych warunków możesz przejść do poniższej instrukcji i przeprowadzić bezproblemową integrację agenta New Relic APM ze swoimi projektami utrzymywanymi na Cloudlets.Zone.

W ramach jednego konta na New Relic możesz monitorować wiele aplikacji uruchomionych na Cloudlets.Zone

Instalacja New Relic

Dodatek New Relic instalowany jest w warstwie aplikacji i dostępny jest dla wybranych aplikacji dostępnych na naszej platformie. W kolejnych wersjach, ilość aplikacji możliwych do monitorowania poprzez dodatek będzie zwiększana.

1. Rozpoczynamy na dwa sposoby.

A. Wchodzimy na Marketplace i szukamy dodatku New Relic (jest w zakładce "Rozszerzenia").

Następnie wybieramy środowisko, które chcemy zintegrować z New Relic i wpisujemy klucz licencyjny, który kopiujemy z naszego konta New Relic (zobacz punkt 2).

B. Drugi sposób, to aktywowanie dodatku kontekstowo, a więc z poziomu środowiska, które zamierzamy objąć monitoringiem. W tym przypadku wybieramy "Dodatki" na poziomie warstwy aplikacji i klikamy "Instaluj".

i podajemy klucz licencyjny New Relic (opis w kroku 2). W tym miejscu można jeszcze zmienić nazwę aplikacji "Application name", która będzie identyfikatorem środowiska w panelu New Relic.

2. Klucz licencyjny znaleźć można w "API keys" po zalogowaniu do serwisu New Relic.

Wybrać należy opcję "Copy key" przy "INGEST LICENSE".

3. Teraz wracamy do Panelu Usługi Cloudlets.Zone, by wkleić klucz licencyjny i zatwierdzić instalację dodatku New Relic. Zakończenie instalacji zostanie potwierdzone poniższym komunikatem, który przesłany zostanie również na skrzynkę e-mail.

4. Następnie należy przeładować kontener, na którym został zainstalowany dodatek New Relic. W tym celu, wybieramy "restartuj węzły" w menu aplikacji, gdzie zainstalowany został New Relic.

Zwróć uwagę, że jeśli Twój projekt jest uruchamiany w pojedynczym kontenerze, "restart węzła" spowoduje kilkusekundowy przestój Twojej aplikacji. Wybierz właściwy moment (np. okno serwisowe) na tą operację, jeżeli dotyczy środowiska produkcyjnego.

W przypadku, gdy serwer aplikacji jest skalowany w poziomie, czas przestoju zostanie zminimalizowany, ponieważ wszystkie instancje serwera będą uruchamiane sekwencyjnie. Możesz w ogóle pozbyć się tej niedogodności, ustawiając opóźnienie wykonania tej operacji na każdym kolejnym węźle w warstwie. W ten sposób, podczas gdy jeden węzeł przechodzi konserwację, pozostałe pozostaną aktywne.

Teraz już New Relic zbiera dane dotyczące Twojej aplikacji. Możesz od razu po zalogowaniu się na swoim koncie New Relic przeglądać zebrane dane dotyczące metryk wydajności aplikacji, monitorować najważniejsze parametry w czasie rzeczywistym za pomocą niestandardowych pulpitów nawigacyjnych raportów, otrzymywać automatyczne powiadomienia o krytycznych problemach i wiele więcej — pełna lista udostępnionych funkcji znajduje się tutaj.

Konfiguracja Lighthouse na New Relic

Przechodzimy teraz do drugiej części instrukcji, która pomoże w monitorowaniu w czasie rzeczywistym Core Web Vitals, a więc trzech wskaźników, które mają wpływ na rzeczywiste doświadczenia użytkowników odwiedzających nasz sklep, stronę lub aplikację web.

1. Zaczynamy od pobrania skryptu Syntetics dla New Relic. Skopiuj poniższy kod podmieniając adres z wiersza piątego http://www.google.com na adres Twojej aplikacji. Link do źródła skryptu jest tutaj.

/** API SETUP - remove this section to run in New Relic Synthetics **/
// if ($http == null) { var $http = require('request'); }
/** API SETUP - remove this section to run in New Relic Synthetics **/

var settings = {'url': 'https://www.google.com', 'category': 'performance', 'strategy': 'desktop'};

var options = {
  method: 'GET',
  url: 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed?key=' + $secure.PAGESPEED_INSIGHTS_API_KEY,
  headers: null,
  qs: settings,
  json: true
};

$http(options, function (error, response, body) {
  if (!error && response.statusCode == 200) {
    if (response.statusCode == 200) {
      var lighthouseMetrics = body.lighthouseResult.audits.metrics.details.items[0];
      $util.insights.set('url', settings.url);
      $util.insights.set('deviceType', settings.strategy);
      $util.insights.set('performanceScore', body.lighthouseResult.categories.performance.score);
      
      for (var attributeName in lighthouseMetrics) {
        if ( lighthouseMetrics.hasOwnProperty(attributeName) ) {
          if (!attributeName.includes('Ts')) {
            console.log(attributeName + ": " + lighthouseMetrics[attributeName]);
            $util.insights.set(attributeName, lighthouseMetrics[attributeName]);
          }
        }
      }
      
    } else {
      console.log('Non-200 HTTP response: ' + response.statusCode);
    }
  } else {
    console.log('rsp code: ' + response.statusCode);
    console.log(error);
  }
});

2. Teraz wchodzimy do Syntetics w panelu New Relic i wybieramy opcję "Create monitor".

3. Następnie wybieramy "Endpoint availablity" i nazywamy monitor oraz określamy częstotliwość pobierania danych.

4. Teraz wybieramy lokalizacje, z których będzie testowana nasza aplikacja web, np. z kilku miejsc z Europy.

5. Usuwamy domyślny skrypt i wklejamy wcześniej przygotowany skrypt z punktu 1. Pamiętaj by podmienić domenę. Na koniec zapisujemy nasz nowy monitor.

6. Aby skrypt zadziałał niezbędny jest klucz API, który pobieramy z Google PageSpeed Insights z sekcji Dokumentacja tworząc nowy projekt. Wymagane logowanie w Google (w razie czego, konto można szybko założyć).

7. Klucz API należy dodać do monitora Syntetics w New Relic. W tym celu wracamy do panelu usługi New Relic - okno startowe (kliknij logo). Wybieramy "Syntetics / Secure credentials" i wciskamy przycisk "Create secure credential".

Nazwę klucza należy wprowadzić taką samą jak w skrypcie z punktu 1 (linia 9). Zapisujemy.

8. Nadszedł czas na prezentację danych. Potrzebny będzie specjalnie przygotowany dashboard Core Web Vitals dla New Relic. W tym celu skopiuj poniższy skrypt JSON'a lub pobierz go bezpośrednio z Githuba. Zwróć uwagę, że do oryginalnego skryptu dopisaliśmy wiersz 4 z uprawnieniami ("permissions": "PUBLIC_READ_WRITE",).

{
	"name": "Lighthouse Metrics",
	"description": null,
	"permissions": "PUBLIC_READ_WRITE",
	"pages": [
		{
			"name": "Lighthouse Metrics",
			"description": null,
			"widgets": [
				{
					"visualization": {
						"id": "viz.billboard"
					},
					"layout": {
						"column": 1,
						"row": 1,
						"height": 3,
						"width": 4
					},
					"title": "Lighthouse Metrics",
					"rawConfiguration": {
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) as 'FCP', average(custom.largestContentfulPaint) as 'LCP', average(custom.interactive) as 'TTI', average(custom.totalBlockingTime) as 'TBT', average(custom.cumulativeLayoutShift) as 'CLS', average(custom.speedIndex) as 'Speed Index'"
							}
						]
					}
				},
				{
					"visualization": {
						"id": "viz.line"
					},
					"layout": {
						"column": 5,
						"row": 1,
						"height": 3,
						"width": 8
					},
					"title": "Lighthouse Metrics - trending",
					"rawConfiguration": {
						"legend": {
							"enabled": true
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) as 'FCP', average(custom.largestContentfulPaint) as 'LCP', average(custom.interactive) as 'TTI', average(custom.totalBlockingTime) as 'TBT', average(custom.cumulativeLayoutShift) as 'CLS', average(custom.speedIndex) as 'Speed Index' TIMESERIES AUTO"
							}
						],
						"yAxisLeft": {
							"zero": true
						}
					}
				},
				{
					"visualization": {
						"id": "viz.bar"
					},
					"layout": {
						"column": 1,
						"row": 4,
						"height": 3,
						"width": 4
					},
					"title": "First Contentful Paint",
					"rawConfiguration": {
						"facet": {
							"showOtherSeries": false
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) FACET custom.url "
							}
						]
					}
				},
				{
					"visualization": {
						"id": "viz.line"
					},
					"layout": {
						"column": 5,
						"row": 4,
						"height": 3,
						"width": 8
					},
					"title": "First Contentful Paint",
					"rawConfiguration": {
						"legend": {
							"enabled": true
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.firstContentfulPaint) FACET custom.url TIMESERIES AUTO"
							}
						],
						"yAxisLeft": {
							"zero": true
						}
					}
				},
				{
					"visualization": {
						"id": "viz.bar"
					},
					"layout": {
						"column": 1,
						"row": 7,
						"height": 3,
						"width": 4
					},
					"title": "Largest Contentful Paint",
					"rawConfiguration": {
						"facet": {
							"showOtherSeries": false
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.largestContentfulPaint) FACET custom.url "
							}
						]
					}
				},
				{
					"visualization": {
						"id": "viz.line"
					},
					"layout": {
						"column": 5,
						"row": 7,
						"height": 3,
						"width": 8
					},
					"title": "Largest Contentful Paint",
					"rawConfiguration": {
						"legend": {
							"enabled": true
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.largestContentfulPaint) FACET custom.url TIMESERIES AUTO "
							}
						],
						"yAxisLeft": {
							"zero": true
						}
					}
				},
				{
					"visualization": {
						"id": "viz.bar"
					},
					"layout": {
						"column": 1,
						"row": 10,
						"height": 3,
						"width": 4
					},
					"title": "TTI",
					"rawConfiguration": {
						"dataFormatters": [
							{
								"name": "TTI",
								"type": "decimal"
							}
						],
						"facet": {
							"showOtherSeries": false
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.interactive) as 'TTI' FACET custom.url "
							}
						]
					}
				},
				{
					"visualization": {
						"id": "viz.line"
					},
					"layout": {
						"column": 5,
						"row": 10,
						"height": 3,
						"width": 8
					},
					"title": "TTI - trending",
					"rawConfiguration": {
						"legend": {
							"enabled": true
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.interactive) FACET custom.url TIMESERIES AUTO "
							}
						],
						"yAxisLeft": {
							"zero": true
						}
					}
				},
				{
					"visualization": {
						"id": "viz.bar"
					},
					"layout": {
						"column": 1,
						"row": 13,
						"height": 3,
						"width": 4
					},
					"title": "Total Blocking Time (TBT)",
					"rawConfiguration": {
						"facet": {
							"showOtherSeries": false
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.totalBlockingTime) FACET custom.url "
							}
						]
					}
				},
				{
					"visualization": {
						"id": "viz.line"
					},
					"layout": {
						"column": 5,
						"row": 13,
						"height": 3,
						"width": 8
					},
					"title": "Total Blocking Time (TBT) - trending",
					"rawConfiguration": {
						"legend": {
							"enabled": true
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.totalBlockingTime) FACET custom.url TIMESERIES AUTO "
							}
						],
						"yAxisLeft": {
							"zero": true
						}
					}
				},
				{
					"visualization": {
						"id": "viz.bar"
					},
					"layout": {
						"column": 1,
						"row": 16,
						"height": 3,
						"width": 4
					},
					"title": "Cumulative Layout Shift (CLS)",
					"rawConfiguration": {
						"facet": {
							"showOtherSeries": false
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.cumulativeLayoutShift) FACET custom.url "
							}
						]
					}
				},
				{
					"visualization": {
						"id": "viz.line"
					},
					"layout": {
						"column": 5,
						"row": 16,
						"height": 3,
						"width": 8
					},
					"title": "Cumulative Layout Shift (CLS)",
					"rawConfiguration": {
						"legend": {
							"enabled": true
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.cumulativeLayoutShift) FACET custom.url TIMESERIES AUTO "
							}
						],
						"yAxisLeft": {
							"zero": true
						}
					}
				},
				{
					"visualization": {
						"id": "viz.bar"
					},
					"layout": {
						"column": 1,
						"row": 19,
						"height": 3,
						"width": 4
					},
					"title": "Speed Index",
					"rawConfiguration": {
						"facet": {
							"showOtherSeries": false
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.speedIndex) FACET custom.url"
							}
						]
					}
				},
				{
					"visualization": {
						"id": "viz.line"
					},
					"layout": {
						"column": 5,
						"row": 19,
						"height": 3,
						"width": 8
					},
					"title": "Speed Index - trending",
					"rawConfiguration": {
						"legend": {
							"enabled": true
						},
						"nrqlQueries": [
							{
								"accountId": 0,
								"query": "FROM SyntheticCheck SELECT average(custom.speedIndex) FACET custom.url TIMESERIES AUTO "
							}
						],
						"yAxisLeft": {
							"zero": true
						}
					}
				}
			]
		}
	]
}

9. W skrypcie trzeba podmienić zerową wartość dla identyfikatora konta New Relic ("accountId": 0,). Zamiast zera, wpisujemy nasz numer konta New Relic, który znaleźć można w ustawieniach konta.

Zmianę identyfikatora konta w skrypcie warto zrobić w edytorze kodu, gdyż ID występuje w skrypcie wiele razy.

10. Gdy już skrypt mamy gotowy, należy zaimportować go do sekcji dashboard w panelu głównym New Relic.

Wklejamy go po prostu w oknie kodu i zatwierdzamy przyciskiem "Import dashboard".

Zrobione. Po kilku minutach powinny być już dostępne dane do zaprezentowania. Za każdym razem, gdy zechcesz skorzystać ze stworzonego dashboardu, znajdziesz go w Panelu główny w zakładce dashboard.

Zrobione!

>>> Aktywuj konto na Cloudlets.Zone <<<