Application Insights für WebseitenApplication Insights for web pages

Informieren Sie sich über die Leistung und Nutzung Ihrer Webseite oder App.Find out about the performance and usage of your web page or app. Wenn Sie Application Insights Ihrem Seitenskript hinzufügen, erhalten Sie Zeitangaben zu Seitenladevorgängen und AJAX-Aufrufen, Anzahl und Details von Browserausnahmen und AJAX-Fehlern sowie die Anzahl von Benutzern und Sitzungen.If you add Application Insights to your page script, you get timings of page loads and AJAX calls, counts, and details of browser exceptions and AJAX failures, as well as users and session counts. Diese Informationen können jeweils nach Seite, Clientbetriebssystem und Browserversion, geografischer Position und anderen Dimensionen segmentiert werden.All these can be segmented by page, client OS and browser version, geo location, and other dimensions. Sie können Warnungen für die Fehleranzahl oder das langsame Laden von Seiten festlegen.You can set alerts on failure counts or slow page loading. Und indem Sie Ablaufverfolgungsaufrufe in JavaScript-Code einfügen, können Sie nachverfolgen, wie die verschiedenen Funktionen Ihre Webseitenanwendung genutzt werden.And by inserting trace calls in your JavaScript code, you can track how the different features of your web page application are used.

Application Insights kann mit allen Webseiten verwendet werden. Hierfür müssen Sie lediglich einen kurzen JavaScript-Codeabschnitt hinzufügen.Application Insights can be used with any web pages - you just add a short piece of JavaScript. Wenn Ihr Webdienst Java oder ASP.NET ist, können Sie die serverseitigen SDKs zusammen mit dem clientseitigen JavaScript SDK verwenden, um die Leistung Ihrer App vollständig zu verstehen.If your web service is Java or ASP.NET, you can use the server-side SDKs in conjunction with the client-side JavaScript SDK to get an end-to-end understanding of your app's performance.

Hinzufügen des JavaScript SDKAdding the Javascript SDK

  1. Zuerst benötigen Sie eine Application Insights-Ressource.First you need an Application Insights resource. Wenn Sie noch keine Ressource und keinen Instrumentierungsschlüssel haben, folgen Sie den Anweisungen unter Erstellen einer neuen Ressource.If you don't already have a resource and instrumentation key, follow the create a new resource instructions.
  2. Kopieren Sie den Instrumentierungsschlüssel aus der Ressource, an die Ihre JavaScript-Telemetriedaten gesendet werden sollen.Copy the instrumentation key from the resource where you want your JavaScript telemetry to be sent.
  3. Fügen Sie die Application Insights JavaScript SDK Ihrer Webseite oder App über eine der beiden folgenden Optionen hinzu:Add the Application Insights JavaScript SDK to your web page or app via one of the following two options:

Wichtig

Sie müssen nur eine der folgenden Methoden verwenden, um Ihrer Anwendung das Application Insights JavaScript SDK hinzuzufügen.You only need to use one of the methods below for adding the Application Insights JavaScript SDK to your application. Wenn Sie das npm-basierte Setup verwenden, verwenden Sie nicht das ausschnittbasierte Setup.If you use the npm based setup, don't use the snippet based setup. Das Gleiche gilt für das umgekehrte Szenario: Wenn Sie den ausschnittbasierten Ansatz verwenden, verwenden Sie nicht außerdem das npm-basierte Setup.The same goes for the reverse scenario when using the snippet based approach, don't also use the npm based setup.

npm-basiertes Setupnpm based setup

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

Ausschnittbasiertes SetupSnippet based setup

Wenn Ihre App npm nicht verwendet, können Sie Ihre Webseiten mit Application Insights direkt instrumentieren, indem Sie diesen Codeausschnitt am Anfang jeder Ihrer Seiten einfügen.If your app does not use npm, you can directly instrument your webpages with Application Insights by pasting this snippet at the top of each your pages. Vorzugsweise sollte es das erste Skript in Ihrem <head>-Abschnitt sein, damit potenzielle Probleme mit allen Ihren Abhängigkeiten überwacht werden können.Preferably, it should be the first script in your <head> section so that it can monitor any potential issues with all of your dependencies. Wenn Sie die Blazor-Server-App verwenden, fügen Sie den Codeausschnitt am Anfang der Datei _Host.cshtml im Abschnitt <head> ein.If you are using Blazor Server App, add the snippet at the top of the file _Host.cshtml in the <head> section.

<script type="text/javascript">
var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(e){function n(e){t[e]=function(){var n=arguments;t.queue.push(function(){t[e].apply(t,n)})}}var t={config:e};t.initialize=!0;var i=document,a=window;setTimeout(function(){var n=i.createElement("script");n.src=e.url||"https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",i.getElementsByTagName("script")[0].parentNode.appendChild(n)});try{t.cookie=i.cookie}catch(e){}t.queue=[],t.version=2;for(var r=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];r.length;)n("track"+r.pop());n("startTrackPage"),n("stopTrackPage");var s="Track"+r[0];if(n("start"+s),n("stop"+s),n("addTelemetryInitializer"),n("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),t.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},!(!0===e.disableExceptionTracking||e.extensionConfig&&e.extensionConfig.ApplicationInsightsAnalytics&&!0===e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){n("_"+(r="onerror"));var o=a[r];a[r]=function(e,n,i,a,s){var c=o&&o(e,n,i,a,s);return!0!==c&&t["_"+r]({message:e,url:n,lineNumber:i,columnNumber:a,error:s}),c},e.autoExceptionInstrumented=!0}return t}(
{
  instrumentationKey:"INSTRUMENTATION_KEY"
}
);window[aiName]=aisdk,aisdk.queue&&0===aisdk.queue.length&&aisdk.trackPageView({});
</script>

Senden von Telemetriedaten an das Azure-PortalSending telemetry to the Azure portal

Standardmäßig sammelt das Application Insights JavaScript SDK automatisch eine Reihe von Telemetrieelementen, die bei der Ermittlung der Integrität Ihrer Anwendung und der zugrunde liegenden Benutzeroberfläche hilfreich sind.By default the Application Insights JavaScript SDK autocollects a number of telemetry items that are helpful in determining the health of your application and the underlying user experience. Das umfasst:These include:

  • Nicht abgefangene Ausnahmen in Ihrer App, einschließlich Informationen zuUncaught exceptions in your app, including information on
    • StapelüberwachungStack trace
    • Ausnahmedetails und Meldung, die den Fehler begleitetException details and message accompanying the error
    • Zeilen- und Spaltennummer des FehlersLine & column number of error
    • URL, bei der der Fehler ausgelöst wurdeURL where error was raised
  • Anforderungen an die Netzwerkabhängigkeit, die von den XHR und Fetch-Anforderungen Ihrer App ausgegeben werden (die Abrufsammlung ist standardmäßig deaktiviert), einschließlich Informationen zuNetwork Dependency Requests made by your app XHR and Fetch (fetch collection is disabled by default) requests, include information on
    • URL der AbhängigkeitsquelleUrl of dependency source
    • Befehl und Methode, der bzw. die zum Anfordern der Abhängigkeit verwendet wirdCommand & Method used to request the dependency
    • Dauer der AnforderungDuration of the request
    • Ergebniscode und Erfolgsstatus der AnforderungResult code and success status of the request
    • ID (sofern vorhanden) des Benutzers, der die Anforderung sendetID (if any) of user making the request
    • Korrelationskontext (falls vorhanden), in dem die Anforderung ausgegeben wirdCorrelation context (if any) where request is made
  • Benutzerinformationen (z.B. Speicherort, Netzwerk, IP)User information (for example, Location, network, IP)
  • Geräteinformationen (z.B. Browser, Betriebssystem, Version, Sprache, Auflösung, Modell)Device information (for example, Browser, OS, version, language, resolution, model)
  • SitzungsinformationenSession information

TelemetrieinitialisiererTelemetry initializers

Telemetrieinitialisierer werden verwendet, um den Inhalt der gesammelten Telemetriedaten zu ändern, bevor sie vom Browser des Benutzers gesendet werden.Telemetry initializers are used to modify the contents of collected telemetry before being sent from the user's browser. Sie können auch verwendet werden, um zu verhindern, dass bestimmte Telemetriedaten gesendet werden, indem sie false zurückgeben.They can also be used to prevent certain telemetry from being sent, by returning false. Ihrer Application Insights-Instanz können mehrere Telemetrieinitialisierer hinzugefügt werden, und sie werden ausgeführt, um sie hinzuzufügen.Multiple telemetry initializers can be added to your Application Insights instance, and they are executed in order of adding them.

Das Eingabeargument für addTelemetryInitializer ist ein Rückruf, der ein ITelemetryItem als Argument verwendet und ein boolean oder voidzurückgibt.The input argument to addTelemetryInitializer is a callback that takes a ITelemetryItem as an argument and returns a boolean or void. Bei Rückgabe von false wird das Telemetrieelement nicht gesendet. Andernfalls fährt es mit dem nächsten Telemetrieinitialisierer (falls vorhanden) fort, oder es wird an den Endpunkt der Telemetriedatensammlung gesendet.If returning false, the telemetry item is not sent, else it proceeds to the next telemetry initializer, if any, or is sent to the telemetry collection endpoint.

Ein Beispiel für die Verwendung von Telemetrieinitialisierern:An example of using telemetry initializers:

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

KonfigurationConfiguration

Die meisten Konfigurationsfelder werden so benannt, dass sie standardmäßig auf „false“ festgelegt werden können.Most configuration fields are named such that they can be defaulted to false. Alle Felder mit Ausnahme von instrumentationKey sind optional.All fields are optional except for instrumentationKey.

NAMEName StandardDefault BESCHREIBUNGDescription
instrumentationKeyinstrumentationKey nullnull ErforderlichRequired
Instrumentierungsschlüssel, den Sie aus dem Azure-Portal abgerufen haben.Instrumentation key that you obtained from the Azure portal.
accountIdaccountId nullnull Eine optionale Konto-ID, wenn Ihre App Benutzer in Konten gruppiert.An optional account ID, if your app groups users into accounts. Keine Leerzeichen, Kommas, Semikolons, Gleichheitszeichen oder senkrechten StricheNo spaces, commas, semicolons, equals, or vertical bars
sessionRenewalMssessionRenewalMs 18000001800000 Eine Sitzung wird protokolliert, wenn der Benutzer während dieser Zeitspanne (in Millisekunden) inaktiv ist.A session is logged if the user is inactive for this amount of time in milliseconds. Die Standardeinstellung ist „30 Minuten“.Default is 30 minutes
sessionExpirationMssessionExpirationMs 8640000086400000 Eine Sitzung wird protokolliert, wenn sie während dieser Zeitspanne (in Millisekunden) fortgesetzt wurde.A session is logged if it has continued for this amount of time in milliseconds. Die Standardeinstellung ist „24 Stunden“.Default is 24 hours
maxBatchSizeInBytesmaxBatchSizeInBytes 1000010000 Maximale Größe des Telemetriedatenbatches.Max size of telemetry batch. Wenn ein Batch diesen Grenzwert überschreitet, wird er sofort gesendet, und ein neuer Batch wird gestartet.If a batch exceeds this limit, it is immediately sent and a new batch is started
maxBatchIntervalmaxBatchInterval 1500015000 Dauer der Batchverarbeitung von Telemetriedaten vor dem Senden (Millisekunden)How long to batch telemetry for before sending (milliseconds)
disableExceptionTrackingdisableExceptionTracking falsefalse Bei „true“ werden Ausnahmen nicht automatisch gesammelt.If true, exceptions are no autocollected. Die Standardeinstellung ist "false".Default is false.
disableTelemetrydisableTelemetry falsefalse Bei „true“ werden Telemetriedaten nicht gesammelt oder gesendet.If true, telemetry is not collected or sent. Die Standardeinstellung ist "false".Default is false.
enableDebugenableDebug falsefalse Bei „true“ werden interne Debugdaten als eine Ausnahme ausgelöst statt protokolliert zu werden. Dies geschieht unabhängig von den SDK-Protokollierungseinstellungen.If true, internal debugging data is thrown as an exception instead of being logged, regardless of SDK logging settings. Die Standardeinstellung ist "false".Default is false.
Hinweis: Wenn Sie diese Einstellung aktivieren, werden die Telemetriedaten beim Auftreten eines internen Fehlers verworfen.Note: Enabling this setting will result in dropped telemetry whenever an internal error occurs. Dies kann hilfreich sein, um Probleme mit Ihrer Konfiguration oder der Nutzung des SDK schnell zu identifizieren.This can be useful for quickly identifying issues with your configuration or usage of the SDK. Wenn beim Debuggen keine Telemetriedaten verloren gehen sollen, empfiehlt es sich, consoleLoggingLevel oder telemetryLoggingLevel statt enableDebug zu verwenden.If you do not want to lose telemetry while debugging, consider using consoleLoggingLevel or telemetryLoggingLevel instead of enableDebug.
loggingLevelConsoleloggingLevelConsole 00 Protokolliert interne Application Insights-Fehler in der Konsole.Logs internal Application Insights errors to console.
0: aus,0: off,
1: Nur schwerwiegende Fehler,1: Critical errors only,
2: Alles (Fehler und Warnungen)2: Everything (errors & warnings)
loggingLevelTelemetryloggingLevelTelemetry 11 Sendet interne Application Insights-Fehler als Telemetriedaten.Sends internal Application Insights errors as telemetry.
0: aus,0: off,
1: Nur schwerwiegende Fehler,1: Critical errors only,
2: Alles (Fehler und Warnungen)2: Everything (errors & warnings)
diagnosticLogIntervaldiagnosticLogInterval 1000010000 (intern) Abrufintervall (in ms) für interne Protokollierungswarteschlange(internal) Polling interval (in ms) for internal logging queue
samplingPercentagesamplingPercentage 100100 Prozentsatz der Ereignisse, die gesendet werden.Percentage of events that will be sent. Die Standardeinstellung ist „100“. Dies bedeutet, dass alle Ereignisse gesendet werden.Default is 100, meaning all events are sent. Legen Sie diesen Wert fest, wenn Sie Ihre Datenobergrenze für umfangreiche Anwendungen beibehalten möchten.Set this if you wish to preserve your data cap for large-scale applications.
autoTrackPageVisitTimeautoTrackPageVisitTime falsefalse Bei „true“ wird in einem Seitenaufruf die vorherige Ansichtszeit der instrumentierten Seite nachverfolgt und in Form von Telemetriedaten gesendet. Außerdem wird ein neuer Zeitgeber für den aktuellen Seitenaufruf gestartet.If true, on a pageview, the previous instrumented page's view time is tracked and sent as telemetry and a new timer is started for the current pageview. Die Standardeinstellung ist "false".Default is false.
disableAjaxTrackingdisableAjaxTracking falsefalse Bei „true“ werden AJAX-Aufrufe nicht automatisch gesammelt.If true, Ajax calls are not autocollected. Die Standardeinstellung ist "false".Default is false.
disableFetchTrackingdisableFetchTracking truetrue Bei „true“ werden Anforderungen zum Abrufen nicht automatisch gesammelt.If true, Fetch requests are not autocollected. Die Standardeinstellung ist „true“.Default is true
overridePageViewDurationoverridePageViewDuration falsefalse Bei „true“ wird das Standardverhalten von „trackPageView“ geändert, um bei dessen Aufruf das Ende des Intervalls für die Seitenaufrufdauer aufzuzeichnen.If true, default behavior of trackPageView is changed to record end of page view duration interval when trackPageView is called. Bei „false“ ohne Angabe eines benutzerdefinierten Zeitraums für „trackPageView“ wird die Seitenaufrufleistung mithilfe der Navigationszeit-API berechnet.If false and no custom duration is provided to trackPageView, the page view performance is calculated using the navigation timing API. Die Standardeinstellung ist "false".Default is false.
maxAjaxCallsPerViewmaxAjaxCallsPerView 500500 Mit der Standardeinstellung „500“ wird gesteuert, wie viele Ajax-Aufrufe pro Seitenaufruf überwacht werden.Default 500 - controls how many Ajax calls will be monitored per page view. Legen Sie „–1“ fest, wenn alle (unbegrenzt) Ajax-Aufrufe auf der Seite überwacht werden sollen.Set to -1 to monitor all (unlimited) Ajax calls on the page.
disableDataLossAnalysisdisableDataLossAnalysis truetrue Bei „false“ werden interne Absenderpuffer für Telemetriedaten beim Start auf noch nicht gesendete Elemente überprüft.If false, internal telemetry sender buffers will be checked at startup for items not yet sent.
disableCorrelationHeadersdisableCorrelationHeaders falsefalse Bei „false“ fügt das SDK allen Abhängigkeitsanforderungen zwei Kopfzeilen (‚Request-Id‘ und ‚Request-Context‘) hinzu, um sie mit entsprechenden serverseitigen Anforderungen zu korrelieren.If false, the SDK will add two headers ('Request-Id' and 'Request-Context') to all dependency requests to correlate them with corresponding requests on the server side. Die Standardeinstellung ist "false".Default is false.
correlationHeaderExcludedDomainscorrelationHeaderExcludedDomains Korrelations-Header für bestimmte Domänen deaktivierenDisable correlation headers for specific domains
correlationHeaderDomainscorrelationHeaderDomains Korrelations-Header für bestimmte Domänen aktivierenEnable correlation headers for specific domains
disableFlushOnBeforeUnloaddisableFlushOnBeforeUnload falsefalse Die Standardeinstellung ist „false“.Default false. Bei „true“ wird die Methode „Flush“ (Leeren) beim Auslösen eines „onBeforeUnload“-Ereignisses nicht aufgerufen.If true, flush method will not be called when onBeforeUnload event triggers
enableSessionStorageBufferenableSessionStorageBuffer truetrue Die Standardeinstellung ist „true“.Default true. Bei „true“ wird der Puffer mit allen nicht gesendeten Telemetriedaten im Sitzungsspeicher gespeichert.If true, the buffer with all unsent telemetry is stored in session storage. Der Puffer wird beim Laden der Seite wiederhergestellt.The buffer is restored on page load
isCookieUseDisabledisCookieUseDisabled falsefalse Die Standardeinstellung ist „false“.Default false. Bei „true“ speichert oder liest das SDK keine Daten aus Cookies.If true, the SDK will not store or read any data from cookies.
cookieDomaincookieDomain nullnull Benutzerdefinierte Cookiedomäne.Custom cookie domain. Diese ist hilfreich, wenn Sie Application Insights-Cookies über untergeordnete Domänen hinweg freigeben möchten.This is helpful if you want to share Application Insights cookies across subdomains.
isRetryDisabledisRetryDisabled falsefalse Die Standardeinstellung ist „false“.Default false. Bei „false“ wiederholen Sie den Vorgang für 206 (teilweise erfolgreich), 408 (Timeout), 429 (zu viele Anforderungen), 500 (interner Serverfehler), 503 (Dienst nicht verfügbar) und 0 (offline, nur wenn erkannt).If false, retry on 206 (partial success), 408 (timeout), 429 (too many requests), 500 (internal server error), 503 (service unavailable), and 0 (offline, only if detected)
isStorageUseDisabledisStorageUseDisabled falsefalse Bei „true“ speichert und liest das SDK keine Daten aus dem lokalen Speicher und dem Sitzungsspeicher.If true, the SDK will not store or read any data from local and session storage. Die Standardeinstellung ist "false".Default is false.
isBeaconApiDisabledisBeaconApiDisabled truetrue Bei „false“ sendet das SDK alle Telemetriedaten mithilfe der Beacon-API.If false, the SDK will send all telemetry using the Beacon API
onunloadDisableBeacononunloadDisableBeacon falsefalse Die Standardeinstellung ist „false“.Default false. Wenn die Registerkarte geschlossen ist, sendet das SDK alle verbleibenden Telemetriedaten mithilfe der Beacon-API.when tab is closed, the SDK will send all remaining telemetry using the Beacon API
sdkExtensionsdkExtension nullnull Legt den Erweiterungsnamen „sdk“ fest.Sets the sdk extension name. Hierbei sind nur alphabetische Zeichen zulässig.Only alphabetic characters are allowed. Der Erweiterungsname wird dem Tag ‚ai.internal.sdkVersion‘ als Präfix hinzugefügt (z.B. ‚ext_javascript:2.0.0‘).The extension name is added as a prefix to the 'ai.internal.sdkVersion' tag (for example, 'ext_javascript:2.0.0'). Der Standardwert lautet null.Default is null.
isBrowserLinkTrackingEnabledisBrowserLinkTrackingEnabled falsefalse Die Standardeinstellung ist "false".Default is false. Bei „true“ wird das SDK alle Anforderungen vom Typ Browserverknüpfung nachverfolgen.If true, the SDK will track all Browser Link requests.
appIdappId nullnull „AppId“ wird für die Korrelation zwischen AJAX-Abhängigkeiten verwendet, die clientseitig mit den serverseitigen Anforderungen erfolgt.AppId is used for the correlation between AJAX dependencies happening on the client-side with the server-side requests. Wenn die Beacon-API aktiviert ist, kann sie nicht automatisch verwendet werden. Sie kann aber in der Konfiguration manuell festgelegt werden.When Beacon API is enabled, it cannot be used automatically, but can be set manually in the configuration. Die Standardeinstellung ist „null“.Default is null
enableCorsCorrelationenableCorsCorrelation falsefalse Bei „true“ fügt das SDK allen CORS-Anforderungen zwei Kopfzeilen (‚Request-Id‘ und ‚Request-Context‘) hinzu, um ausgehende AJAX-Abhängigkeiten mit entsprechenden serverseitigen Anforderungen zu korrelieren.If true, the SDK will add two headers ('Request-Id' and 'Request-Context') to all CORS requests to correlate outgoing AJAX dependencies with corresponding requests on the server side. Die Standardeinstellung ist „false“.Default is false
namePrefixnamePrefix nicht definiertundefined Ein optionaler Wert, der als „name“-Postfix für „localStorage“ und den Cookienamen verwendet wird.An optional value that will be used as name postfix for localStorage and cookie name.
enableAutoRouteTrackingenableAutoRouteTracking falsefalse Routenänderungen in Single-Page-Webanwendungen (Single Page Applications, SPA) automatisch nachverfolgen.Automatically track route changes in Single Page Applications (SPA). Bei „true“ sendet jede Routenänderung einen neuen Seitenaufruf an Application Insights.If true, each route change will send a new Pageview to Application Insights. Hashroutenänderungen (example.com/foo#bar) werden ebenfalls als neue Seitenaufrufe aufgezeichnet.Hash route changes (example.com/foo#bar) are also recorded as new page views.
enableRequestHeaderTrackingenableRequestHeaderTracking falsefalse Bei „true“ werden AJAX- und Fetch-Anforderungsheader nachverfolgt.Der Standardwert ist „false“.If true, AJAX & Fetch request headers is tracked, default is false.
enableResponseHeaderTrackingenableResponseHeaderTracking falsefalse Bei „true“ werden Antwortheader für AJAX- und Fetch-Anforderungen nachverfolgt.Der Standardwert ist „false“.If true, AJAX & Fetch request's response headers is tracked, default is false.
distributedTracingModedistributedTracingMode DistributedTracingModes.AI Legt den Modus für verteilte Ablaufverfolgung fest.Sets the distributed tracing mode. Wenn der AI_AND_W3C-Modus oder der W3C-Modus festgelegt ist, werden Kontextheader für die W3C-Ablaufverfolgung (traceparent/tracestate) generiert und in alle ausgehenden Anforderungen eingeschlossen.If AI_AND_W3C mode or W3C mode is set, W3C trace context headers (traceparent/tracestate) will be generated and included in all outgoing requests. AI_AND_W3C wird für Abwärtskompatibilität mit beliebigen mit älteren Application Insights-Versionen instrumentierten Diensten bereitgestellt.AI_AND_W3C is provided for back-compatibility with any legacy Application Insights instrumented services.

Single-Page-WebanwendungenSingle Page Applications

Standardmäßig verarbeitet dieses SDK keine statusbasierte Routenänderung, die in Single-Page-Webanwendungen erfolgt.By default, this SDK will not handle state-based route changing that occurs in single page applications. Um das automatische Nachverfolgen von Routenänderungen für Ihre Single-Page-Webanwendung zu aktivieren, können Sie Ihrer Setupkonfiguration enableAutoRouteTracking: true hinzufügen.To enable automatic route change tracking for your single page application, you can add enableAutoRouteTracking: true to your setup configuration.

Wir bieten derzeit ein separates React-Plug-In an, das Sie mit diesem SDK initialisieren können.Currently, we offer a separate React plugin which you can initialize with this SDK. Es wird auch die Nachverfolgung von Routenänderungen automatisch ausführen sowie weitere React-spezifische Telemetriedaten sammeln.It will also accomplish route change tracking for you, as well as collect other React specific telemetry.

React-ErweiterungenReact extensions

ErweiterungenExtensions
ReactReact
React NativeReact Native

Browser-/clientseitige Daten erkundenExplore browser/client-side data

Browser-/clientseitige Daten können angezeigt werden, indem Sie zu Metriken navigieren und einzelne Metriken hinzufügen, an denen Sie interessiert sind:Browser/client-side data can be viewed by going to Metrics and adding individual metrics you are interested in:

Sie können Ihre Daten auch aus dem JavaScript SDK über die Browseroberfläche im Portal anzeigen.You can also view your data from the JavaScript SDK via the Browser experience in the portal.

Wählen Sie Browser und dann Fehler oder Leistung aus.Select Browser and then choose Failures or Performance.

LeistungPerformance

AbhängigkeitenDependencies

AnalyticsAnalytics

Wenn Sie Ihre vom JavaScript SDK gesammelten Telemetriedaten abfragen möchten, wählen Sie die Schaltfläche In Protokollen anzeigen (Analytics) aus.To query your telemetry collected by the JavaScript SDK, select the View in Logs (Analytics) button. Wenn Sie eine where-Anweisung von client_Type == "Browser"hinzufügen, werden nur Daten aus dem JavaScript SDK angezeigt, und alle von anderen SDKs gesammelten serverseitigen Telemetriedaten werden ausgeschlossen.By adding a where statement of client_Type == "Browser", you will only see data from the JavaScript SDK and any server-side telemetry collected by other SDKs will be excluded.

// 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

Unterstützung für die QuellzuordnungsdateiSource Map Support

Die Minimierung der minimierten Aufrufliste Ihrer Ausnahmetelemetriedaten kann im Azure-Portal nicht aufgehoben werden.The minified callstack of your exception telemetry can be unminified in the Azure portal. Alle vorhandenen Integrationen im Bereich „Ausnahmedetails“ funktionieren aber bei der Aufrufliste, deren Minimierung gerade aufgehoben wurde.All existing integrations on the Exception Details panel will work with the newly unminified callstack. Drag & Drop von Quellzuordnungsdateien – Weil bei der Aufhebung der Minimierung alle vorhandenen und zukünftigen JS SDKs (+Node.JS) unterstützt werden, müssen Sie Ihre SDK-Version nicht aktualisieren.Drag and drop source map unminifying supports all existing and future JS SDKs (+Node.JS), so you do not need to upgrade your SDK version. Um Ihre Aufrufliste anzuzeigen, deren Minimierung aufgehoben wurde,To view your unminified callstack,

  1. Wählen Sie im Azure-Portal ein Element vom Typ „Ausnahmetelemetrie“ aus, um dessen „End-to-End-Transaktionsdetails“ anzuzeigen.Select an Exception Telemetry item in the Azure portal to view its "End-to-end transaction details"
  2. Identifizieren Sie, welche Quellzuordnungsdateien dieser Aufrufliste entsprechen.Identify which source maps correspond to this call stack. Die Quellzuordnungsdatei muss mit der Quelldatei eines Stapelrahmens übereinstimmen, die allerdings mit dem Suffix .map versehen ist.The source map must match a stack frame's source file, but suffixed with .map
  3. Verschieben Sie die Quellzuordnungsdateien mit Drag & Drop in die Aufrufliste im Azure-Portal .Drag and drop the source maps onto the call stack in the Azure portal

Application Insights Web BasicApplication Insights Web Basic

Wenn Sie es einfacher haben möchten, können Sie stattdessen die Basisversion von Application Insights installieren.For a lightweight experience, you can instead install the basic version of Application Insights

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

Diese Version ist mit der minimalen Anzahl von Features und Funktionen ausgestattet und basiert darauf, dass Sie sie nach Bedarf erstellen.This version comes with the bare minimum number of features and functionalities and relies on you to build it up as you see fit. So führt sie beispielsweise keine automatische Sammlung durch (nicht abgefangene Ausnahmen, AJAX usw.).For example, it performs no autocollection (uncaught exceptions, AJAX, etc.). Weil die APIs zum Senden bestimmter Arten von Telemetriedaten, wie z.B. trackTrace, trackException usw., in dieser Version nicht enthalten sind, müssen Sie Ihren eigenen Wrapper bereitstellen.The APIs to send certain telemetry types, like trackTrace, trackException, etc., are not included in this version, so you will need to provide your own wrapper. Die einzige verfügbare API ist track.The only API that is available is track. Ein Beispiel finden Sie hier.A sample is located here.

BeispieleExamples

Ausführbare Beispiele finden Sie unter Application Insights JavaScript SDK Samples (Beispiele für Application Insights JavaScript SDK).For runnable examples, see Application Insights Javascript SDK Samples

Upgrade von der alten Application Insights-VersionUpgrading from the old Version of Application Insights

Breaking Changes in der SDK V2-Version:Breaking changes in the SDK V2 version:

  • Um bessere API-Signaturen zu ermöglichen, wurden einige API-Aufrufe, wie z.B. „trackPageView“ und „trackException“, aktualisiert.To allow for better API signatures, some of the API calls such as trackPageView, trackException have been updated. Eine Ausführung in IE8 oder niedrigeren Versionen des Browsers wird nicht unterstützt.Running in IE8 or lower versions of the browser is not supported.
  • Beim Umschlag für die Telemetriedaten gibt es infolge von Datenschemaaktualisierungen Feldname- und Strukturänderungen.Telemetry envelope has field name and structure changes due to data schema updates.
  • context.operation wurde in context.telemetryTrace verschoben.Moved context.operation to context.telemetryTrace. Einige Felder wurden ebenfalls geändert (operation.id --> telemetryTrace.traceID).Some fields were also changed (operation.id --> telemetryTrace.traceID)
    • Wenn Sie die aktuelle PageView-ID manuell aktualisieren möchten (z.B. in SPA-Apps), kann dies mit appInsights.properties.context.telemetryTrace.traceID = Util.newId() geschehen.If you want to manually refresh the current pageview ID (for example, in SPA apps) this can be done with appInsights.properties.context.telemetryTrace.traceID = Util.newId()

Wenn Sie das aktuelle Application Insights-PRODUKTIONS-SDK (1.0.20) verwenden und überprüfen möchten, ob das neue SDK in der Laufzeit funktioniert, aktualisieren Sie die URL abhängig von Ihrem aktuellen SDK-Ladeszenario.If you're using the current application insights PRODUCTION SDK (1.0.20) and want to see if the new SDK works in runtime, update the URL depending on your current SDK loading scenario.

  • Download über CDN-Szenario: Aktualisieren Sie den zurzeit verwendeten Codeausschnitt so, dass er auf die folgende URL verweist:Download via CDN scenario: Update the code snippet that you currently use to point to the following URL:

    "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js"
    
  • npm-Szenario: Rufen Sie downloadAndSetup auf, um das vollständige ApplicationInsights-Skript aus dem CDN herunterzuladen und es mit dem Instrumentierungsschlüssel zu initialisieren:npm scenario: Call downloadAndSetup to download the full ApplicationInsights script from CDN and initialize it with instrumentation key:

    appInsights.downloadAndSetup({
       instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx",
       url: "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js"
       });
    

Testen Sie es in der internen Umgebung, um zu überprüfen, ob die Überwachung der Telemetriedaten wie erwartet funktioniert.Test in internal environment to verify monitoring telemetry is working as expected. Wenn alles funktioniert, aktualisieren Sie Ihre API-Signaturen entsprechend der SDK V2-Version, und stellen Sie sie in Ihren Produktionsumgebungen bereit.If all works, update your API signatures appropriately to SDK V2 version and deploy in your production environments.

SDK-Leistung/MehraufwandSDK performance/overhead

Bei einer GZIP-Komprimierung von nur 25 KB und einer Initialisierung von nur ~15 ms fügt Application Insights Ihrer Website eine geringfügige Menge an Ladezeit hinzu.At just 25 KB gzipped, and taking only ~15 ms to initialize, Application Insights adds a negligible amount of loadtime to your website. Wenn Sie den Codeausschnitt verwenden, werden minimale Komponenten der Bibliothek schnell geladen.By using the snippet, minimal components of the library are quickly loaded. In der Zwischenzeit wird das vollständige Skript im Hintergrund heruntergeladen.In the meantime, the full script is downloaded in the background.

Während des Downloads des Skripts aus dem CDN wird die gesamte Nachverfolgung Ihrer Seite in die Warteschlange eingereiht.While the script is downloading from the CDN, all tracking of your page is queued. Sobald die asynchrone Initialisierung des heruntergeladenen Skripts abgeschlossen ist, werden alle Ereignisse, die in die Warteschlange eingereiht wurden, nachverfolgt.Once the downloaded script finishes asynchronously initializing, all events that were queued are tracked. Infolgedessen gehen während des gesamten Lebenszyklus Ihrer Seite keine Telemetriedaten verloren.As a result, you will not lose any telemetry during the entire life cycle of your page. Dieser Setupvorgang stellt für Ihre Seite ein nahtloses Analysesystem bereit, das für Ihre Benutzer unsichtbar ist.This setup process provides your page with a seamless analytics system, invisible to your users.

Zusammenfassung:Summary:

  • 25 KB – mit GZIP komprimiert25 KB gzipped
  • 15 ms – Gesamtinitialisierungszeit15 ms overall initialization time
  • Null – Nachverfolgung während des Lebenszyklus der Seite hat gefehlt.Zero tracking missed during life cycle of page

BrowserunterstützungBrowser support

Chrome Firefox IE Opera Safari
Chrome (neueste Version) ✔Chrome Latest ✔ Firefox (neueste Version) ✔Firefox Latest ✔ Internet Explorer ab Version 9 und Edge ✔IE 9+ & Edge ✔ Opera (neueste Version) ✔Opera Latest ✔ Safari (neueste Version) ✔Safari Latest ✔

Open Source SDKOpen-source SDK

Das Application Insights JavaScript SDK ist Open Source. Wenn Sie den Quellcode anzeigen oder zum Projekt beitragen möchten, besuchen Sie das offizielle GitHub-Repository.The Application Insights JavaScript SDK is open-source to view the source code or to contribute to the project visit the official GitHub repository.

Nächste SchritteNext steps