Usługa Application Insights dla stron sieci Web

Poznaj wydajność i użycie strony sieci Web lub aplikacji. Jeśli dodasz Application Insights strony, otrzymasz chronometraż ładowania strony i wywołań AJAX, liczniki oraz szczegóły dotyczące wyjątków przeglądarki i błędów AJAX, a także liczby użytkowników i sesji. Wszystkie te dane możesz rozdzielić według strony, systemu operacyjnego klienta i wersji przeglądarki, lokalizacji geograficznej i innych wymiarów. Możesz ustawić alerty związane z liczbami błędów lub powolnym ładowaniem strony. A wstawiając wywołania śledzenia w kodzie JavaScript, możesz śledzić sposób użycia różnych funkcji aplikacji strony sieci Web.

Usługi Application Insights można używać z dowolnymi stronami sieci Web — wystarczy dodać krótki fragment kodu JavaScript. Jeśli twoja usługa internetowa to Java lub ASP.NET, możesz użyć zestawów SDK po stronie serwera w połączeniu z zestawem SDK języka JavaScript po stronie klienta, aby uzyskać wiedzę na temat wydajności aplikacji.

Dodawanie zestawu SDK dla języka JavaScript

Ważne

Parametry połączenia są zalecane w przypadku kluczy instrumentacji. Nowe regiony platformy Azure wymagają użycia ciągów połączenia zamiast kluczy instrumentacji. Ciąg połączenia identyfikuje zasób, z którym chcesz skojarzyć dane telemetryczne. Umożliwia również modyfikowanie punktów końcowych, które będą przez zasób miejscem docelowym telemetrii. Konieczne będzie skopiowanie parametrów połączenia i dodanie ich do kodu aplikacji lub do zmiennej środowiskowej.

  1. Najpierw potrzebujesz zasobu Application Insights zasobów. Jeśli nie masz jeszcze zasobu i klucza instrumentacji, postępuj zgodnie z instrukcjami dotyczącymi tworzenia nowego zasobu.
  2. Skopiuj klucz instrumentacji (znany także jako "iKey") lub ciąg połączenia dla zasobu, do którego mają być wysyłane dane telemetryczne języka JavaScript (z kroku 1). Dodasz go do instrumentationKey ustawienia lub connectionString zestawu SDK Application Insights JavaScript.
  3. Dodaj zestaw SDK Application Insights JavaScript do strony internetowej lub aplikacji za pomocą jednej z następujących dwóch opcji:

Ważne

Użyj tylko jednej metody, aby dodać zestaw JAVAScript SDK do aplikacji. Jeśli używasz instalatora npm, nie używaj fragmentu kodu i na odwrót.

Uwaga

Instalator NPM instaluje zestaw JAVAScript SDK jako zależność od projektu, włączając intelliSense, natomiast fragment kodu pobiera zestaw SDK w czasie wykonywania. Obie obsługują te same funkcje. Jednak deweloperzy, którzy chcą większej liczby zdarzeń niestandardowych i konfiguracji, zazwyczaj decydują się na instalację npm, natomiast użytkownicy, którzy chcą szybko włączyć analizę internetową, decydują się na fragment kodu.

Konfiguracja oparta na programie npm

Zainstaluj za pomocą programu NPM.

npm i --save @microsoft/applicationinsights-web

Uwaga

Typy są dołączone do tego pakietu , więc nie trzeba instalować oddzielnego pakietu wpisywania.

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.loadAppInsights();
appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview

Konfiguracja oparta na fragmentach kodu

Jeśli aplikacja nie używa narzędzia npm, możesz bezpośrednio instrumentować strony internetowe za pomocą narzędzia Application Insights wklejając ten fragment kodu w górnej części każdej strony. Najlepiej, aby był to pierwszy skrypt w sekcji, aby można było monitorować wszelkie potencjalne problemy ze wszystkimi zależnościami i opcjonalnie wszelkie <head> błędy języka JavaScript. Jeśli używasz aplikacji Blazor Server, dodaj fragment kodu w górnej części pliku _Host.cshtml w <head> sekcji .

Aby pomóc w śledzeniu, której wersji fragmentu kodu używa aplikacja, począwszy od wersji 2.5.5, zdarzenie widoku strony będzie zawierać nowy tag "ai.internal.snippet", który będzie zawierać zidentyfikowaną wersję fragmentu kodu.

Bieżący fragment kodu (wymieniony poniżej) to wersja "5", wersja jest kodowana we fragmencie kodu sv:"#", a bieżąca wersja jest również dostępna w witrynie GitHub.

<script type="text/javascript">
!function(T,l,y){var S=T.location,k="script",D="instrumentationKey",C="ingestionendpoint",I="disableExceptionTracking",E="ai.device.",b="toLowerCase",w="crossOrigin",N="POST",e="appInsightsSDK",t=y.name||"appInsights";(y.name||T[e])&&(T[e]=t);var n=T[t]||function(d){var g=!1,f=!1,m={initialize:!0,queue:[],sv:"5",version:2,config:d};function v(e,t){var n={},a="Browser";return n[E+"id"]=a[b](),n[E+"type"]=a,n["ai.operation.name"]=S&&S.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(m.sv||m.version),{time:function(){var e=new Date;function t(e){var t=""+e;return 1===t.length&&(t="0"+t),t}return e.getUTCFullYear()+"-"+t(1+e.getUTCMonth())+"-"+t(e.getUTCDate())+"T"+t(e.getUTCHours())+":"+t(e.getUTCMinutes())+":"+t(e.getUTCSeconds())+"."+((e.getUTCMilliseconds()/1e3).toFixed(3)+"").slice(2,5)+"Z"}(),iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}}}}var h=d.url||y.src;if(h){function a(e){var t,n,a,i,r,o,s,c,u,p,l;g=!0,m.queue=[],f||(f=!0,t=h,s=function(){var e={},t=d.connectionString;if(t)for(var n=t.split(";"),a=0;a<n.length;a++){var i=n[a].split("=");2===i.length&&(e[i[0][b]()]=i[1])}if(!e[C]){var r=e.endpointsuffix,o=r?e.location:null;e[C]="https://"+(o?o+".":"")+"dc."+(r||"services.visualstudio.com")}return e}(),c=s[D]||d[D]||"",u=s[C],p=u?u+"/v2/track":d.endpointUrl,(l=[]).push((n="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",a=t,i=p,(o=(r=v(c,"Exception")).data).baseType="ExceptionData",o.baseData.exceptions=[{typeName:"SDKLoadFailed",message:n.replace(/\./g,"-"),hasFullStack:!1,stack:n+"\nSnippet failed to load ["+a+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(S&&S.pathname||"_unknown_")+"\nEndpoint: "+i,parsedStack:[]}],r)),l.push(function(e,t,n,a){var i=v(c,"Message"),r=i.data;r.baseType="MessageData";var o=r.baseData;return o.message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+n+")").replace(/\"/g,"")+'"',o.properties={endpoint:a},i}(0,0,t,p)),function(e,t){if(JSON){var n=T.fetch;if(n&&!y.useXhr)n(t,{method:N,body:JSON.stringify(e),mode:"cors"});else if(XMLHttpRequest){var a=new XMLHttpRequest;a.open(N,t),a.setRequestHeader("Content-type","application/json"),a.send(JSON.stringify(e))}}}(l,p))}function i(e,t){f||setTimeout(function(){!t&&m.core||a()},500)}var e=function(){var n=l.createElement(k);n.src=h;var e=y[w];return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=i,n.onerror=a,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||i(0,t)},n}();y.ld<0?l.getElementsByTagName("head")[0].appendChild(e):setTimeout(function(){l.getElementsByTagName(k)[0].parentNode.appendChild(e)},y.ld||0)}try{m.cookie=l.cookie}catch(p){}function t(e){for(;e.length;)!function(t){m[t]=function(){var e=arguments;g||m.queue.push(function(){m[t].apply(m,e)})}}(e.pop())}var n="track",r="TrackPage",o="TrackEvent";t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+r,"stop"+r,"start"+o,"stop"+o,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),m.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4};var s=(d.extensionConfig||{}).ApplicationInsightsAnalytics||{};if(!0!==d[I]&&!0!==s[I]){var c="onerror";t(["_"+c]);var u=T[c];T[c]=function(e,t,n,a,i){var r=u&&u(e,t,n,a,i);return!0!==r&&m["_"+c]({message:e,url:t,lineNumber:n,columnNumber:a,error:i}),r},d.autoExceptionInstrumented=!0}return m}(y.cfg);function a(){y.onInit&&y.onInit(n)}(T[t]=n).queue&&0===n.queue.length?(n.queue.push(a),n.trackPageView({})):a()}(window,document,{
src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js", // The SDK URL Source
// name: "appInsights", // Global SDK Instance name defaults to "appInsights" when not supplied
// ld: 0, // Defines the load delay (in ms) before attempting to load the sdk. -1 = block page load and add to head. (default) = 0ms load after timeout,
// useXhr: 1, // Use XHR instead of fetch to report failures (if available),
crossOrigin: "anonymous", // When supplied this will add the provided value as the cross origin attribute on the script tag
// onInit: null, // Once the application insights instance has loaded and initialized this callback function will be called with 1 argument -- the sdk instance (DO NOT ADD anything to the sdk.queue -- As they won't get called)
cfg: { // Application Insights Configuration
    instrumentationKey: "YOUR_INSTRUMENTATION_KEY_GOES_HERE"
    /* ...Other Configuration Options... */
}});
</script>

Uwaga

Aby uzyskać czytelność i zmniejszyć liczbę możliwych błędów języka JavaScript, wszystkie możliwe opcje konfiguracji są wymienione w nowym wierszu w powyższym kodzie fragmentu kodu, jeśli nie chcesz zmieniać wartości wiersza z komentarzem, który można usunąć.

Raportowanie błędów ładowania skryptu

Ta wersja fragmentu kodu wykrywa i zgłasza błędy podczas ładowania zestawu SDK z sieci CDN jako wyjątek do portalu usługi Azure Monitor (w przeglądarce wyjątków błędów), ten wyjątek zapewnia wgląd w błędy tego typu, dzięki czemu masz świadomość, że aplikacja nie raportuje danych telemetrycznych (lub innych wyjątków) zgodnie z > > oczekiwaniami. Ten sygnał jest ważnym pomiarem w zrozumieniu, że utracona jest telemetria, ponieważ zestaw SDK nie został załadowany ani zainicjowany, co może prowadzić do:

  • Niedosyt raportowania sposobu, w jaki użytkownicy korzystają z witryny (lub próbują z nich korzystać);
  • Brak telemetrii dotyczącej sposobu korzystania z witryny przez użytkowników końcowych;
  • Brak błędów języka JavaScript, które mogą potencjalnie blokować użytkownikom końcowych możliwość pomyślnego korzystania z witryny.

Aby uzyskać szczegółowe informacje na temat tego wyjątku, zobacz stronę rozwiązywania problemów z niepowodzeniem ładowania zestawu SDK.

Raportowanie tego błędu jako wyjątku w portalu nie używa opcji konfiguracji z konfiguracji usługi Application Insights, dlatego w przypadku wystąpienia tego błędu będzie ona zawsze zgłaszana za pomocą fragmentu kodu, nawet wtedy, gdy obsługa disableExceptionTracking pliku window.onerror jest wyłączona.

Raportowanie błędów ładowania zestawu SDK NIE jest obsługiwane w programie IE 8 (lub mniejszym). Pomaga to zmniejszyć minimalny rozmiar fragmentu kodu, zakładając, że większość środowisk nie jest wyłącznie programem IE 8 lub mniejszym. Jeśli masz to wymaganie i chcesz otrzymać te wyjątki, musisz dołączyć narzędzie fetch poly fill lub utworzyć własną wersję fragmentu kodu, która używa zamiast , zaleca się użycie podanego kodu źródłowego fragmentu kodu jako punktu XDomainRequest XMLHttpRequest początkowego.

Uwaga

Jeśli używasz poprzedniej wersji tego fragmentu kodu, zdecydowanie zaleca się aktualizację do najnowszej wersji, aby otrzymywać te wcześniej nieoportowane problemy.

Opcje konfiguracji fragmentu kodu

Wszystkie opcje konfiguracji zostały teraz przesuwane pod koniec skryptu, aby uniknąć przypadkowego wprowadzenia błędów języka JavaScript, które nie tylko powodują niepowodzenie ładowania zestawu SDK, ale także powodują wyłączenie raportowania błędów.

Każda opcja konfiguracji jest wyświetlana powyżej w nowym wierszu. Jeśli nie chcesz zastępować wartości domyślnej elementu wymienionego jako [opcjonalnie], możesz usunąć ten wiersz, aby zminimalizować rozmiar zwracanej strony.

Dostępne opcje konfiguracji to:

Nazwa Typ Opis
src string [required] Pełny adres URL miejsca ładowania zestawu SDK. Ta wartość jest używana dla atrybutu "src" dynamicznie dodawanego < > skryptu/tagu. Możesz użyć publicznej lokalizacji CDN lub własnej lokalizacji hostowanej prywatnie.
name ciąg [opcjonalnie] Nazwa globalna zainicjowanych zestawu SDK domyślnie to appInsights . Będzie window.appInsights to odwołanie do zainicjowanych wystąpień. Uwaga: jeśli podano wartość nazwy lub poprzednie wystąpienie wydaje się być przypisane (za pośrednictwem nazwy globalnej appInsightsSDK), ta wartość nazwy zostanie również zdefiniowana w globalnej przestrzeni nazw jako . Jest to wymagane przez kod inicjowania zestawu SDK w celu upewnienia się, że jest to inicjowanie i aktualizowanie poprawnego szkieletu fragmentu kodu i metod window.appInsightsSDK=<name value> serwera proxy.
Ld number w ms [opcjonalnie] Definiuje opóźnienie ładowania przed próbą załadowania zestawu SDK. Wartość domyślna to 0 ms, a każda wartość ujemna natychmiast dodaje tag skryptu do obszaru head strony, co spowoduje zablokowanie zdarzenia ładowania strony do momentu załadowania skryptu < > (lub niepowodzenia).
useXhr wartość logiczna [opcjonalnie] To ustawienie jest używane tylko do raportowania błędów ładowania zestawu SDK. Raportowanie najpierw podejmie próbę użycia funkcji fetch(), jeśli jest dostępna, a następnie powrotu do XHR, ustawiając tę wartość na true, po prostu pomija sprawdzanie pobierania. Użycie tej wartości jest wymagane tylko wtedy, gdy aplikacja jest używana w środowisku, w którym pobieranie nie może wysłać zdarzeń awarii.
crossOrigin ciąg [opcjonalnie] Po dodaniu tego ustawienia tag skryptu dodany do pobrania zestawu SDK będzie zawierać atrybut crossOrigin z tą wartością ciągu. Jeśli atrybut nie zostanie zdefiniowany (wartość domyślna), nie zostanie dodany atrybut crossOrigin. Zalecane wartości nie są zdefiniowane (wartość domyślna); ""; lub "anonymous" (dla wszystkich prawidłowych wartości zobacz Html attribute: crossorigin documentation)
cfg object [required] Konfiguracja przekazana do zestawu APPLICATION INSIGHTS SDK podczas inicjowania.

Konfiguracja parametrów połączenia

W przypadku konfiguracji menedżera NPM lub fragmentu kodu można również skonfigurować wystąpienie usługi Application Insights użyciu parametrów połączenia. Wystarczy zastąpić instrumentationKey pole connectionString polem .

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  connectionString: 'YOUR_CONNECTION_STRING_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.loadAppInsights();
appInsights.trackPageView();

Wysyłanie danych telemetrycznych do Azure Portal

Domyślnie zestaw SDK Application Insights JavaScript automatycznie zbiera szereg elementów telemetrii, które są pomocne podczas określania kondycji aplikacji i podstawowego środowiska użytkownika. Są one następujące:

  • Nieprzechwczone wyjątki w aplikacji, w tym informacje na temat
    • Ślad stosu
    • Szczegóły wyjątku i komunikat towarzyszący błędowi
    • Numer & kolumny błędu
    • Adres URL, pod którym został podniesiony błąd
  • Żądania zależności sieciowych wykonane przez aplikacje XHR i Fetch (pobieranie kolekcji jest domyślnie wyłączone) zawierają informacje na temat
    • Adres URL źródła zależności
    • Metoda & używana do żądania zależności
    • Czas trwania żądania
    • Kod wyniku i stan powodzenia żądania
    • Identyfikator (jeśli jest) użytkownika, który żąda
    • Kontekst korelacji (jeśli istnieje), w którym jest dokonywane żądanie
  • Informacje o użytkowniku (na przykład lokalizacja, sieć, adres IP)
  • Informacje o urządzeniu (na przykład przeglądarka, system operacyjny, wersja, język, model)
  • Informacje o sesji

Inicjatory telemetrii

Inicjatory telemetrii służą do modyfikowania zawartości zebranych danych telemetrycznych przed ich wysłaniem z przeglądarki użytkownika. Można ich również użyć, aby zapobiec wysłaniu określonych danych telemetrycznych przez zwrócenie wartości false . Do wystąpienia Application Insights można dodać wiele inicjatorów telemetrii i są one wykonywane w celu dodania ich.

Argument wejściowy funkcji to wywołanie zwrotne, które przyjmuje jako addTelemetryInitializer argument i zwraca wartość lub ITelemetryItem boolean void . Jeśli element zwraca wartość , element telemetrii nie jest wysyłany, w innym przypadku przechodzi do następnego inicjatora telemetrii(jeśli istnieje) lub jest wysyłany do punktu końcowego false zbierania danych telemetrycznych.

Przykład użycia inicjatorów telemetrii:

var telemetryInitializer = (envelope) => {
  envelope.data.someField = 'This item passed through my telemetry initializer';
};
appInsights.addTelemetryInitializer(telemetryInitializer);
appInsights.trackTrace({message: 'This message will use a telemetry initializer'});

appInsights.addTelemetryInitializer(() => false); // Nothing is sent after this is executed
appInsights.trackTrace({message: 'this message will not be sent'}); // Not sent

Konfigurowanie

Większość pól konfiguracji ma takie nazwy, że można je domyślnie ustawić na wartość false. Wszystkie pola są opcjonalne z wyjątkiem instrumentationKey .

Nazwa Opis Domyślny
instrumentationKey Wymagane
Klucz instrumentacji uzyskany z Azure Portal.
ciąg
null
accountId Opcjonalny identyfikator konta, jeśli aplikacja grupuje użytkowników na konta. Brak spacji, przecinków, średników, równości ani pionowych słupków ciąg
null
sessionRenewalMs Sesja jest rejestrowana, jeśli użytkownik jest nieaktywny przez ten czas w milisekundach. numeryczne
1800000
(30 min)
sessionExpirationMs Sesja jest rejestrowana, jeśli przez ten czas była kontynuowana w milisekundach. numeryczne
86400000
(24 godziny)
maxBatchSizeInBytes Maksymalny rozmiar partii danych telemetrycznych. Jeśli partia przekroczy ten limit, zostanie natychmiast wysłana i zostanie uruchomiona nowa partia numeryczne
10 000
maxBatchInterval Czas przetwarzania wsadowego danych telemetrycznych przed wysłaniem (milisekund) numeryczne
15000
wyłączanie​ExceptionTracking W przypadku wartości true wyjątki nie są automatycznie zbierane. boolean
fałsz
disableTelemetry W przypadku wartości true dane telemetryczne nie są zbierane ani wysyłane. boolean
fałsz
enableDebug W przypadku wartości true wewnętrzne dane debugowania są zgłaszane jako wyjątek zamiast rejestrowania, niezależnie od ustawień rejestrowania zestawu SDK. Wartość domyślna to false.
Uwaga: Włączenie tego ustawienia spowoduje porzucanie danych telemetrycznych za każdym razem, gdy wystąpi błąd wewnętrzny. Może to być przydatne do szybkiego identyfikowania problemów z konfiguracją lub użyciem zestawu SDK. Jeśli nie chcesz utracić telemetrii podczas debugowania, rozważ użycie lub consoleLoggingLevel telemetryLoggingLevel zamiast enableDebug .
boolean
fałsz
loggingLevelConsole Rejestruje błędy Application Insights w konsoli.
0: wyłączone,
1. Tylko błędy krytyczne
2: Wszystko (błędy & ostrzeżenia)
numeryczne
0
loggingLevelTelemetry Wysyła błędy Application Insights jako dane telemetryczne.
0: wyłączone,
1. Tylko błędy krytyczne
2: Wszystko (błędy & ostrzeżenia)
numeryczne
1
diagnosticLogInterval (wewnętrzny) Interwał sondowania (w ms) dla wewnętrznej kolejki rejestrowania numeryczne
10 000
samplingPercentage Procent zdarzeń, które zostaną wysłane. Wartość domyślna to 100, co oznacza, że wszystkie zdarzenia są wysyłane. Ustaw tę wartość, jeśli chcesz zachować limit danych dla aplikacji na dużą skalę. numeryczne
100
autoTrackPageVisitTime W przypadku wartości true w widoku strony czas wyświetlania poprzedniej instrumentowanej strony jest śledzony i wysyłany jako telemetria, a dla bieżącego widoku strony jest uruchomiony nowy czasomierz. Jest ona wysyłana jako metryka niestandardowa o nazwie w funkcji i jest obliczana za pomocą funkcji Date now() (jeśli jest dostępna) i powraca do PageVisitTime milliseconds wartości (nowa funkcja Date()). getTime(), jeśli now() jest niedostępny (IE8 lub mniej). Wartość domyślna to false. boolean
fałsz
disableAjaxTracking W przypadku wartości true wywołania Ajax nie są automatycznie zbierane. boolean
fałsz
disableFetchTracking Jeśli ma wartość true, żądania pobierania nie są automatycznie zbierane. boolean
true
overridePageViewDuration W przypadku wartości true domyślne zachowanie widoku trackPageView jest zmieniane w celu rekordu końca interwału czasu trwania widoku strony po wywołaniu widoku trackPageView. Jeśli dla widoku trackPageView nie podano wartości false i nie podano niestandardowego czasu trwania, wydajność widoku strony jest obliczana przy użyciu interfejsu API chronometrażu nawigacji. boolean
maxAjaxCallsPerView Wartość domyślna 500 — określa, ile wywołań Ajax będzie monitorowanych na widok strony. Ustaw wartość -1, aby monitorować wszystkie (nieograniczone) wywołania Ajax na stronie. numeryczne
500
disableDataLossAnalysis W przypadku wartości false wewnętrzne bufory nadawcy telemetrii będą sprawdzane podczas uruchamiania pod kątem elementów, które nie zostały jeszcze wysłane. boolean
true
wyłączanie​correlationheaders W przypadku wartości false zestaw SDK doda dwa nagłówki ("Request-Id" i "Request-Context") do wszystkich żądań zależności w celu skorelowania ich z odpowiednimi żądaniami po stronie serwera. boolean
fałsz
correlationHeader​ExcludedDomains Wyłączanie nagłówków korelacji dla określonych domen string[]
Niezdefiniowane
correlationHeader​ExcludePatterns Wyłączanie nagłówków korelacji przy użyciu wyrażeń regularnych regex[]
Niezdefiniowane
correlationHeader​Domen Włączanie nagłówków korelacji dla określonych domen string[]
Niezdefiniowane
disableFlush​OnBeforeUnload W przypadku wartości true metoda flush nie zostanie wywołana po wyzwoleniu zdarzenia onBeforeUnload boolean
fałsz
enableSessionStorageBuffer W przypadku wartości true bufor ze wszystkimi niewczytymi telemetriami jest przechowywany w magazynie sesji. Bufor jest przywracany podczas ładowania strony boolean
true
cookieCfg Wartości domyślne włączonego użycia plików cookie można znaleźć w te tematu Ustawienia ICookieCfgConfig, aby uzyskać pełne wartości domyślne. ICookieCfgConfig
(Od 2.6.0)
Niezdefiniowane
isCookieUseDisabled
disableCookiesUsage
W przypadku wartości true zestaw SDK nie będzie przechowywać ani odczytywać żadnych danych z plików cookie. Należy pamiętać, że spowoduje to wyłączenie plików cookie użytkownika i sesji oraz renderowanie bezużytecznych funkcji i funkcji użycia. IsCookieUseDisable jest przestarzała na rzecz disableCookiesUsage, gdy oba są podane disableCookiesUsage ma pierwszeństwo.
(Od wersji 2.6.0) Jeśli zostanie również zdefiniowana, będzie ona miała pierwszeństwo przed tymi wartościami, użycie plików cookie można ponownie włączyć po zainicjowaniu za pośrednictwem cookieCfg.enabled funkcji core.getCookieMgr().setEnabled(true).
alias dla cookieCfg.enabled
fałsz
cookieDomain Niestandardowa domena plików cookie. Jest to przydatne, jeśli chcesz udostępnić pliki Application Insights w różnych domenach.
(Od wersji 2.6.0) Jeśli cookieCfg.domain wartość jest zdefiniowana, będzie ona miała pierwszeństwo przed tą wartością.
alias dla cookieCfg.domain
null
ścieżka pliku cookie Niestandardowa ścieżka pliku cookie. Jest to przydatne, jeśli chcesz udostępniać pliki cookie Application Insights za bramą aplikacji.
Jeśli cookieCfg.path wartość jest zdefiniowana, będzie ona miała pierwszeństwo przed tą wartością.
alias dla cookieCfg.path
(Od 2.6.0)
null
isRetryDisabled Jeśli wartość false, ponów próbę na 206 (częściowy sukces), 408 (limit czasu), 429 (zbyt wiele żądań), 500 (wewnętrzny błąd serwera), 503 (usługa niedostępna) i 0 (w trybie offline, tylko w przypadku wykrycia) boolean
fałsz
isStorageUseDisabled W przypadku wartości true zestaw SDK nie będzie przechowywać ani odczytywać żadnych danych z magazynu lokalnego i magazynu sesji. boolean
fałsz
isBeaconApiDisabled W przypadku wartości false zestaw SDK wyśle wszystkie dane telemetryczne przy użyciu interfejsu API sygnału nawigacyjnego boolean
true
onunloadDisableBeacon Po zamknięciu karty zestaw SDK wyśle wszystkie pozostałe dane telemetryczne przy użyciu interfejsu API sygnału nawigacyjnego boolean
fałsz
sdkExtension Ustawia nazwę rozszerzenia zestawu SDK. Dozwolone są tylko znaki alfabetyczne. Nazwa rozszerzenia jest dodawana jako prefiks do tagu "ai.internal.sdkVersion" (na przykład "ext_javascript:2.0.0"). ciąg
null
isBrowserLink​TrackingEnabled W przypadku wartości true zestaw SDK będzie śledzić wszystkie żądania linku przeglądarki. boolean
fałsz
appId Identyfikator AppId służy do korelacji między zależnościami AJAX po stronie klienta i żądaniami po stronie serwera. Po włączeniu interfejsu API sygnału nawigacyjnego nie można go używać automatycznie, ale można go ustawić ręcznie w konfiguracji. ciąg
null
włączanie​CorsCorrelation W przypadku wartości true zestaw SDK doda dwa nagłówki ("Identyfikator żądania" i "Kontekst żądania") do wszystkich żądań CORS w celu skorelowania wychodzących zależności AJAX z odpowiednimi żądaniami po stronie serwera. boolean
fałsz
namePrefix Opcjonalna wartość, która będzie używana jako przyrostek nazwy dla localStorage i nazwy pliku cookie. ciąg
Niezdefiniowane
włączanie​śledzenia​AutoRoute Automatycznie śledź zmiany trasy w aplikacjach jednostronicowych (SPA). W przypadku wartości true każda zmiana trasy spowoduje wysłanie nowego widoku strony do Application Insights. Zmiany trasy wyznaczania wartości skrótu ( example.com/foo#bar ) są również rejestrowane jako nowe wyświetlenia stron. boolean
fałsz
enableRequest​HeaderTracking W przypadku wartości true nagłówki żądania & AJAX są śledzone. boolean
fałsz
enableResponse​HeaderTracking W przypadku wartości true & nagłówki odpowiedzi żądania fetch są śledzone. boolean
fałsz
distributedTracingMode Ustawia tryb śledzenia rozproszonego. Jeśli AI_AND_W3C lub tryb W3C jest ustawiony, zostaną wygenerowane nagłówki kontekstu śledzenia W3C (traceparent/tracestate) i uwzględnione we wszystkich żądaniach wychodzących. AI_AND_W3C zapewnia zgodność wsteczną ze starszymi Application Insights instrumentowanych usług. Zobacz przykład tutaj. DistributedTracingModeslub
numeryczne
(Od wersji 2.6.0) DistributedTracingModes.AI_AND_W3C
(wersja 2.5.11 lub wcześniej) DistributedTracingModes.AI
enable​AjaxErrorStatusText W przypadku wartości true uwzględnij tekst danych błędu odpowiedzi w zdarzeniu zależności dla żądań AJAX, które zakończyły się niepowodzeniem. boolean
fałsz
włączanie​AjaxPerfTracking Flaga w celu umożliwienia odnośnika i uwzględnienia dodatkowych chronometrażu window.performance przeglądarki w zgłaszanych ajax metrykach (XHR i fetch). boolean
fałsz
maxAjaxPerf​LookupAttempts Maksymalna liczba czasów wyszukiwania chronometrażu window.performance (jeśli jest dostępna), ponieważ nie wszystkie przeglądarki wypełnią okno.performance przed zgłoszeniem końca żądania XHR, a w przypadku żądań pobierania jest to dodawane po jego zakończeniu. numeryczne
3
ajaxPerfLookupDelay Czas oczekiwania przed ponowną próbą znalezienia chronometrażu window.performance dla żądania, czas jest w milisekundach i jest przekazywany bezpośrednio do ajax setTimeout(). numeryczne
25 ms
enableUnhandled​PromiseRejection​Tracking W przypadku wartości true nieobsłużone odrzucenia obietnic zostaną automatycznie odrzuceń i zgłoszone jako błąd języka JavaScript. Gdy disableExceptionTracking ma wartość true (nie śledź wyjątków), wartość konfiguracji zostanie zignorowana i nieobsługiwane odrzucenia obietnic nie będą zgłaszane. boolean
fałsz
wyłączanie​instrumentacjiklucza​walidacji W przypadku wartości true sprawdzanie poprawności klucza instrumentacji jest pomijane. boolean
fałsz
enablePerfMgr Po włączeniu (true) spowoduje to utworzenie lokalnych perfEvents dla kodu, który został instrumentowany do emitowania perfEvents (za pośrednictwem pomocnika doPerf(). Może to służyć do identyfikowania problemów z wydajnością w zestawie SDK na podstawie użycia lub opcjonalnie we własnym instrumentowany kod. Więcej szczegółów można znaleźć w podstawowej dokumentacji. Od wersji 2.5.7 boolean
fałsz
perfEvtsSendAll Gdy element enablePerfMgr jest włączony, a element IPerfManager wyzwoly element .perfEvent() INotificationManager,ta flaga określa, czy zdarzenie jest wyzwolone (i wysyłane do wszystkich odbiorników) dla wszystkich zdarzeń (true), czy tylko dla zdarzeń "parent" (wartość domyślna < > false).
Nadrzędny element IPerfEvent to zdarzenie, w którym w momencie utworzenia tego zdarzenia nie działa żaden inny element IPerfEvent, a jego właściwość nadrzędna nie ma wartości null ani nie jest niezdefiniowana. Od wersji 2.5.7
boolean
fałsz
idLength Określa domyślną długość używaną do generowania nowej losowej sesji i wartości identyfikatora użytkownika. Wartość domyślna to 22, poprzednia wartość domyślna to 5 (wersja 2.5.8 lub mniejsza), jeśli chcesz zachować poprzednią maksymalną długość, ustaw tę wartość na 5. numeryczne
22

W wersji 2.6.0 zarządzanie plikami cookie jest teraz dostępne bezpośrednio z wystąpienia i można je wyłączyć i ponownie włączyć po zainicjowaniu.

Jeśli ta funkcja jest wyłączona podczas inicjowania za pośrednictwem konfiguracji lub , można teraz ponownie włączyć tę funkcję za pośrednictwem disableCookiesUsage cookieCfg.enabled funkcji ICookieMgr. setEnabled

Zarządzanie plikami cookie na podstawie wystąpienia zastępuje również poprzednie funkcje globalne coreUtils disableCookies() setCookie(...) , i getCookie(...) deleteCookie(...) . Aby skorzystać z ulepszeń potrząsania drzewami wprowadzonych również w wersji 2.6.0, nie należy już korzystać z funkcji globalnych.

ICookieMgrConfig

Konfiguracja plików cookie do zarządzania plikami cookie na podstawie wystąpienia dodana w wersji 2.6.0.

Nazwa Opis Typ i domyślne
enabled Wartość logiczna wskazująca, czy użycie plików cookie przez zestaw SDK jest włączone przez bieżące wystąpienie. W przypadku wartości false wystąpienie zestawu SDK zainicjowane przez tę konfigurację nie będzie przechowywać ani odczytywać żadnych danych z plików cookie boolean
true
domena Niestandardowa domena plików cookie. Jest to przydatne, jeśli chcesz udostępnić pliki Application Insights w różnych domenach. Jeśli nie podano używa wartości z wartości cookieDomain katalogu głównego. ciąg
null
path Określa ścieżkę do użycia dla pliku cookie, jeśli nie zostanie on podany, będzie używać dowolnej wartości z wartości cookiePath katalogu głównego. ciąg
/
getCookie Funkcja pobiera wartość nazwanego pliku cookie, jeśli nie zostanie ona podana, będzie używać wewnętrznego analizowania/buforowania plików cookie. (name: string) => string
null
setCookie Funkcja do ustawienia nazwanego pliku cookie z określoną wartością wywoływaną tylko podczas dodawania lub aktualizowania pliku cookie. (name: string, value: string) => void
null
delCookie Funkcja usuwania nazwanego pliku cookie o określonej wartości oddzielonej od właściwości setCookie w celu uniknięcia konieczności analizowania wartości w celu określenia, czy plik cookie jest dodawany, czy usuwany. Jeśli nie zostanie podany, użyje wewnętrznego analizowania/buforowania plików cookie. (name: string, value: string) => void
null

Włączanie śledzenia czasu na stronie

Ustawiając autoTrackPageVisitTime: true , czas, który użytkownik spędza na każdej stronie, jest śledzony. W każdym nowym widoku PageView czas trwania użytkownika spędzony na poprzedniej stronie jest wysyłany jako metryka niestandardowa o nazwie PageVisitTime . Tę metrykę niestandardową można wyświetlać w Eksplorator metryk jako "metrykę opartą na dzienniku".

Włączanie korelacji

Korelacja generuje i wysyła dane, które umożliwiają śledzenie rozproszone i udostępnia mapę aplikacji,widok transakcji typu end-to-endi inne narzędzia diagnostyczne.

W poniższym przykładzie przedstawiono wszystkie możliwe konfiguracje wymagane do włączenia korelacji, a poniżej znajdują się uwagi dotyczące konkretnego scenariusza:

// excerpt of the config section of the JavaScript SDK snippet with correlation
// between client-side AJAX and server requests enabled.
cfg: { // Application Insights Configuration
    instrumentationKey: "YOUR_INSTRUMENTATION_KEY_GOES_HERE"
    disableFetchTracking: false,
    enableCorsCorrelation: true,
    enableRequestHeaderTracking: true,
    enableResponseHeaderTracking: true,
    correlationHeaderExcludedDomains: ['myapp.azurewebsites.net', '*.queue.core.windows.net']
    /* ...Other Configuration Options... */
}});
</script>

Jeśli którykolwiek z serwerów innych firm, z których klient komunikuje się, nie może zaakceptować nagłówków i i nie można zaktualizować ich konfiguracji, należy umieścić je na liście wykluczeń za pośrednictwem właściwości Request-Id Request-Context correlationHeaderExcludedDomains konfiguracji. Ta właściwość obsługuje symbole wieloznaczne.

Po stronie serwera musi być w stanie akceptować połączenia z tymi nagłówkami. W zależności od konfiguracji po stronie serwera często konieczne jest rozszerzenie listy po stronie serwera przez Access-Control-Allow-Headers ręczne dodanie elementów i Request-Id Request-Context .

Access-Control-Allow-Headers: Request-Id , Request-Context , <your header>

Uwaga

Jeśli używasz zestawu OpenTelemtry lub Application Insights SDK wydanych w 2020 r. lub nowszym, zalecamy użycie interfejsu TraceContext WC3. Zobacz wskazówki dotyczące konfiguracji tutaj.

Aplikacje jednostronicowe

Domyślnie ten zestaw SDK nie obsługuje zmiany trasy opartej na stanie, która występuje w aplikacjach jednostronicowych. Aby włączyć automatyczne śledzenie zmian tras dla aplikacji jednostronicowej, możesz dodać enableAutoRouteTracking: true do konfiguracji konfiguracji.

Obecnie oferujemy oddzielną wtyczkę React,którą można zainicjować za pomocą tego zestawu SDK. Umożliwia również śledzenie zmian tras, a także zbieranie innych danych telemetrycznych specyficznych dla react.

Uwaga

Używaj enableAutoRouteTracking: true tylko wtedy, gdy nie używasz wtyczki React. Obie te funkcje mogą wysyłać nowe funkcje PageView po zmianie trasy. Jeśli obie są włączone, mogą być wysyłane zduplikowane widoków strony.

Rozszerzenia

Rozszerzenia
React
React Native
Angular
Kliknij pozycję Automatyczne zbieranie danych analizy

Eksplorowanie danych po stronie przeglądarki/klienta

Dane po stronie przeglądarki/klienta można wyświetlić, przechodząc do strony Metryki i dodając poszczególne metryki, które Cię interesują:

Zrzut ekranu przedstawiający stronę Metryki w Application Insights graficzne wyświetlanie danych metryk dla aplikacji internetowej.

Możesz również wyświetlać dane z zestawu JAVAScript SDK za pośrednictwem środowiska przeglądarki w portalu.

Wybierz pozycję Przeglądarka, a następnie wybierz pozycję Błędy lub Wydajność.

Zrzut ekranu przedstawiający stronę Przeglądarki w Application Insights sposób dodawania błędów przeglądarki lub wydajności przeglądarki do metryk, które można wyświetlić dla aplikacji internetowej.

Wydajność

Zrzut ekranu przedstawiający stronę Wydajność w Application Insights graficzne wyświetlanie metryk Operacji dla aplikacji internetowej.

Zależności

Zrzut ekranu przedstawiający stronę Wydajność w Application Insights graficzne wyświetlanie metryk zależności dla aplikacji internetowej.

Analiza

Aby odpytować dane telemetryczne zebrane przez zestaw SDK języka JavaScript, wybierz przycisk Wyświetl w dziennikach (analiza). Dodanie instrukcji w pliku spowoduje tylko wyświetlanie danych z zestawu SDK języka JavaScript, a wszystkie dane telemetryczne po stronie serwera zebrane przez inne zestawy where client_Type == "Browser" SDK zostaną wykluczone.

// average pageView duration by name
let timeGrain=5m;
let dataset=pageViews
// additional filters can be applied here
| where timestamp > ago(1d)
| where client_Type == "Browser" ;
// calculate average pageView duration for all pageViews
dataset
| summarize avg(duration) by bin(timestamp, timeGrain)
| extend pageView='Overall'
// render result in a chart
| render timechart

Obsługa mapy źródła

Minimalny czas wywołań telemetrii wyjątku można unminified w Azure Portal. Wszystkie istniejące integracje na panelu Szczegóły wyjątku będą działać z nowo niezminifikowanym workiem wywołań.

Możesz połączyć zasób Application Insights z własnym kontenerem Azure Blob Storage, aby automatycznie ujednoliceć stosy wywołań. Aby rozpocząć pracę, zobacz automatyczną obsługę mapy źródła.

Przeciąganie i upuszczanie

  1. Wybierz element Telemetria wyjątku w Azure Portal, aby wyświetlić jego "Szczegóły transakcji end-to-end"
  2. Zidentyfikuj, które mapy źródłowe odpowiadają temu stosowi wywołań. Mapa źródłowa musi być dopasowana do pliku źródłowego ramki stosu, ale z sufiksem .map
  3. Przeciągnij i upuść mapy źródłowe na stos wywołań w oknie Azure Portal Animowany obraz przedstawiający sposób przeciągania i upuszczania źródłowych plików mapy z folderu kompilacji do okna stosu wywołań w  Azure Portal.

Application Insights Web Basic

W celu uproszczonego obsługi można zamiast tego zainstalować podstawową wersję Application Insights

npm i --save @microsoft/applicationinsights-web-basic

Ta wersja zawiera minimalną liczbę funkcji i funkcji oraz zależy od Ciebie, aby ją utworzyć zgodnie z potrzebami. Na przykład nie wykonuje autocollection (nieprzechwytywane wyjątki, AJAX, itp.). Interfejsy API do wysyłania niektórych typów telemetrii, takich jak , itp., nie są uwzględnione w tej wersji, dlatego należy podać trackTrace trackException własną otokę. Jedynym dostępnym interfejsem API jest track . Przykład znajduje się tutaj.

Przykłady

Przykłady uruchamiania można znaleźć w te Application Insights javaScript SDK Samples (Przykłady zestawu SDK dla języka JavaScript).

Uaktualnianie ze starej wersji Application Insights

Istotne zmiany w wersji 2 zestawu SDK:

  • Aby umożliwić lepsze podpisy interfejsu API, zaktualizowano niektóre wywołania interfejsu API, takie jak trackPageView i trackException. Uruchamianie w Internet Explorer 8 i starszych wersjach przeglądarki nie jest obsługiwane.
  • Koperta telemetrii ma nazwę pola i zmiany struktury spowodowane aktualizacjami schematu danych.
  • Przeniesiono context.operation do context.telemetryTrace . Zmieniono również niektóre pola ( operation.id --> telemetryTrace.traceID ).
    • Aby ręcznie odświeżyć bieżący identyfikator widoku strony (na przykład w aplikacjach SPA), appInsights.properties.context.telemetryTrace.traceID = Microsoft.ApplicationInsights.Telemetry.Util.generateW3CId() użyj .

      Uwaga

      Aby zachować unikatowy identyfikator śledzenia, w którym wcześniej był używany Util.newId() , teraz użyj wartości Util.generateW3CId() . Oba ostatecznie są identyfikatorem operacji.

Jeśli używasz bieżącego produkcyjnego zestawu SDK usługi Application Insights (1.0.20) i chcesz sprawdzić, czy nowy zestaw SDK działa w środowisku uruchomieniowym, zaktualizuj adres URL w zależności od bieżącego scenariusza ładowania zestawu SDK.

  • Pobierz za pośrednictwem scenariusza usługi CDN: zaktualizuj fragment kodu, który jest aktualnie używasz, aby wskazać następujący adres URL:

    "https://js.monitor.azure.com/scripts/b/ai.2.min.js"
    
  • Scenariusz npm: wywołaj wywołanie , aby pobrać pełny skrypt usługi ApplicationInsights z usługi CDN i downloadAndSetup zainicjować go za pomocą klucza instrumentacji:

    appInsights.downloadAndSetup({
       instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx",
       url: "https://js.monitor.azure.com/scripts/b/ai.2.min.jss"
       });
    

Przetestuj w środowisku wewnętrznym, aby sprawdzić, czy telemetria monitorowania działa zgodnie z oczekiwaniami. Jeśli wszystko działa, należy odpowiednio zaktualizować sygnatury interfejsu API do wersji 2 zestawu SDK i wdrożyć je w środowiskach produkcyjnych.

Wydajność/obciążenie zestawu SDK

Przy zaledwie 36 KB zapakowanych i trwa tylko około 15 ms do zainicjowania, Application Insights dodaje niewielką ilość czasu ładowania do witryny internetowej. Przy użyciu fragmentu kodu szybko ładowane są minimalne składniki biblioteki. W międzyczasie pełny skrypt jest pobierany w tle.

Podczas pobierania skryptu z sieci CDN całe śledzenie strony jest kolejkowane. Po zakończeniu asynchronicznego inicjowania pobranego skryptu śledzone są wszystkie zdarzenia, które zostały w kolejce. W związku z tym nie utracisz żadnych danych telemetrycznych w całym cyklu życia strony. Ten proces konfiguracji zapewnia stronie bezproblemowy system analityczny niewidoczny dla użytkowników.

Podsumowanie:

  • Wersja npm
  • skompresowany rozmiar gzip
  • Ogólny czas inicjowania: 15 ms
  • Brak pominiętych śledzenia podczas cyklu życia strony

Obsługa przeglądarki

Chrome Firefox IE Opera Safari
Najnowsza wersja przeglądarki Chrome ✔ Firefox Latest ✔ IE 9+ & Edge ✔
IE 8 — zgodny
Najnowszy ✔ Opery Najnowsza wersja przeglądarki Safari ✔

Zgodność ES3/IE8

Jako zestaw SDK istnieje wielu użytkowników, którzy nie mogą kontrolować przeglądarek, z których korzystają ich klienci. W związku z tym musimy upewnić się, że ten zestaw SDK nadal działa i nie powoduje przerwania wykonywania JS po załadowaniu przez starszą przeglądarkę. Chociaż idealnie byłoby nie obsługiwać przeglądarek IE8 i starszych generacji (ES3), istnieje wielu dużych klientów/użytkowników, którzy nadal wymagają "działania" stron i jak wspomniano, mogą lub nie mogą kontrolować przeglądarki, z której będą korzystać ich użytkownicy końcowi.

NIE oznacza to, że będziemy obsługiwać tylko najniższy wspólny zestaw funkcji, tylko że musimy zachować zgodność kodu ES3 i podczas dodawania nowych funkcji należy je dodać w sposób, który nie spowoduje przerwania analizy ES3 w języku JavaScript i dodany jako funkcja opcjonalna.

Aby uzyskać szczegółowe informacje na temat obsługi IE8, zobacz GitHub

Zestaw SDK typu open source

Zestaw SDK Application Insights JavaScript jest open source do wyświetlania kodu źródłowego lub współtworzenie projektu, odwiedź oficjalne repozytorium GitHub.

Aby uzyskać najnowsze aktualizacje i poprawki usterek, zapoznaj się z informacjami o wersji.

Następne kroki