Application Insights för webbsidorApplication Insights for web pages

Visa prestanda och användning för webbsidor eller appar.Find out about the performance and usage of your web page or app. Om du lägger till Application Insights till sid skriptet får du tids inställningar för sid inläsningar och AJAX-anrop, antal och information om webb läsar undantag och AJAX-fel, samt antal användare och sessioner.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. Allt detta kan visas efter sida, klientoperativsystem- och webbläsarversion, geografisk plats och andra dimensioner.All these can be segmented by page, client OS and browser version, geo location, and other dimensions. Du kan ställa in varningar för antal fel eller långsam sidinläsning.You can set alerts on failure counts or slow page loading. Och genom att infoga spårning av anrop i JavaScript-kod kan du spåra hur olika funktioner i ditt webbsideprogram används.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 kan användas med alla webbsidor – du lägger bara till ett stycke JavaScript-kod.Application Insights can be used with any web pages - you just add a short piece of JavaScript. Om din webb tjänst är Java eller ASP.netkan du använda SDK: er för Server sidan tillsammans med SDK SDK för klient sidan för att få en heltäckande förståelse för appens prestanda.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.

Lägga till JavaScript SDKAdding the JavaScript SDK

  1. Först behöver du en Application Insights-resurs.First you need an Application Insights resource. Om du inte redan har en resurs-och Instrumentation-nyckel följer du anvisningarna för att skapa en ny resurs.If you don't already have a resource and instrumentation key, follow the create a new resource instructions.
  2. Kopiera Instrumentation-nyckeln från den resurs där du vill att din JavaScript-telemetri ska skickas.Copy the instrumentation key from the resource where you want your JavaScript telemetry to be sent.
  3. Lägg till Application Insights JavaScript SDK till din webb sida eller app via något av följande två alternativ:Add the Application Insights JavaScript SDK to your web page or app via one of the following two options:

Viktigt

Använd bara en metod för att lägga till Java Script SDK i ditt program.Only use one method to add the JavaScript SDK to your application. Om du använder installations programmet för NPM ska du inte använda kodfragmentet och vice versa.If you use the NPM Setup, don't use the Snippet and vice versa.

Anteckning

NPM-installationen installerar JavaScript SDK som ett beroende av ditt projekt, vilket aktiverar IntelliSense, medan kodfragmentet hämtar SDK vid körning.NPM Setup installs the JavaScript SDK as a dependency to your project, enabling IntelliSense, whereas the Snippet fetches the SDK at runtime. Båda har stöd för samma funktioner.Both support the same features. Men utvecklare som vill ha mer anpassade händelser och konfiguration brukar välja NPM-installation, medan användare söker efter snabb aktivering av den färdiga Web Analytics-valet för kodfragmentet.However, developers who desire more custom events and configuration generally opt for NPM Setup whereas users looking for quick enablement of out-of-the-box web analytics opt for the Snippet.

NPM-baserad installationnpm 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

Kodfragment-baserad installationSnippet based setup

Om din app inte använder NPM kan du direkt Instrumenta dina webb sidor med Application Insights genom att klistra in det här kodfragmentet överst på varje sida.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. Helst bör det vara det första skriptet i <head>-avsnittet så att det kan övervaka eventuella eventuella problem med alla beroenden.Preferably, it should be the first script in your <head> section so that it can monitor any potential issues with all of your dependencies. Om du använder programmet för att lägga till ett program i den här typen av Server lägger du till kodfragmentet överst i filen _Host.cshtml i avsnittet <head>.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>

Skicka telemetri till Azure PortalSending telemetry to the Azure portal

Som standard samlar Application Insights JavaScript SDK automatiskt in ett antal telemetridata som är användbara för att fastställa hälso tillståndet för ditt program och den underliggande användar upplevelsen.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. Dessa är:These include:

  • Ej fångade undantag i appen, inklusive information omUncaught exceptions in your app, including information on
    • Stack spårningStack trace
    • Undantags information och meddelande som medföljer feletException details and message accompanying the error
    • Rad & kolumn antal felLine & column number of error
    • URL där ett fel genereradesURL where error was raised
  • Begär Anden om nätverks beroenden som görs av appen XHR och hämtningen (hämtnings samlingen är inaktive rad som standard) begär Anden, inkludera information omNetwork Dependency Requests made by your app XHR and Fetch (fetch collection is disabled by default) requests, include information on
    • URL för beroende källaUrl of dependency source
    • Kommando & metod som används för att begära beroendetCommand & Method used to request the dependency
    • Varaktighet för begäranDuration of the request
    • Resultat kod och lyckad status för begäranResult code and success status of the request
    • ID (om det finns) för användaren som gör begäranID (if any) of user making the request
    • Korrelations kontext (om det finns någon) där begäran görsCorrelation context (if any) where request is made
  • Användar information (till exempel plats, nätverk, IP)User information (for example, Location, network, IP)
  • Enhets information (till exempel webbläsare, OS, version, språk, upplösning, modell)Device information (for example, Browser, OS, version, language, resolution, model)
  • SessionsinformationSession information

Telemetri-initierareTelemetry initializers

Telemetri initierare används för att ändra innehållet i insamlad telemetri innan det skickas från användarens webbläsare.Telemetry initializers are used to modify the contents of collected telemetry before being sent from the user's browser. De kan också användas för att förhindra att vissa telemetri skickas, genom att returnera false.They can also be used to prevent certain telemetry from being sent, by returning false. Du kan lägga till flera telemetri-initierare i Application Insights-instansen och de körs när du lägger till dem.Multiple telemetry initializers can be added to your Application Insights instance, and they are executed in order of adding them.

Indataargumentet till addTelemetryInitializer är ett återanrop som tar ett ITelemetryItem som argument och returnerar en boolean eller void.The input argument to addTelemetryInitializer is a callback that takes a ITelemetryItem as an argument and returns a boolean or void. Om du returnerar falseskickas inte objektet telemetri, annars går det vidare till nästa telemetri-initierare, om sådana finns, eller skickas till slut punkten för telemetri-samlingen.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.

Ett exempel på att använda telemetri-initierare: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

De flesta konfigurations fälten får ett namn som är förfalskade som standard.Most configuration fields are named such that they can be defaulted to false. Alla fält är valfria förutom för instrumentationKey.All fields are optional except for instrumentationKey.

NamnName DefaultDefault BeskrivningDescription
InstrumentationKeyinstrumentationKey nullnull ObligatorisktRequired
Instrumentation-nyckel som du fick från Azure Portal.Instrumentation key that you obtained from the Azure portal.
accountIdaccountId nullnull Ett valfritt konto-ID, om din app grupperar användare till konton.An optional account ID, if your app groups users into accounts. Inga blank steg, kommatecken, semikolon, likheter eller lodräta staplarNo spaces, commas, semicolons, equals, or vertical bars
sessionRenewalMssessionRenewalMs 18000001800000 En session loggas om användaren är inaktiv under den här tiden i millisekunder.A session is logged if the user is inactive for this amount of time in milliseconds. Standardvärdet är 30 minuterDefault is 30 minutes
sessionExpirationMssessionExpirationMs 8640000086400000 En session loggas om den fortsätter under den här tiden i millisekunder.A session is logged if it has continued for this amount of time in milliseconds. Standardvärdet är 24 timmarDefault is 24 hours
maxBatchSizeInBytesmaxBatchSizeInBytes 1000010000 Max storlek för telemetri batch.Max size of telemetry batch. Om en batch överskrider den här gränsen skickas den omedelbart och en ny batch startasIf a batch exceeds this limit, it is immediately sent and a new batch is started
maxBatchIntervalmaxBatchInterval 15 00015000 Hur lång tid det tar att gruppera telemetri innan det skickas (millisekunder)How long to batch telemetry for before sending (milliseconds)
disableExceptionTrackingdisableExceptionTracking falsefalse Om det här värdet är sant är undantag inte autosamlade.If true, exceptions are no autocollected. Standardvärdet är false.Default is false.
disableTelemetrydisableTelemetry falsefalse Om det här värdet är sant samlas ingen telemetri in eller skickas.If true, telemetry is not collected or sent. Standardvärdet är false.Default is false.
enableDebugenableDebug falsefalse Om det här värdet är sant genereras interna fel söknings data som ett undantag i stället för att loggas, oavsett inställningarna för SDK-loggning.If true, internal debugging data is thrown as an exception instead of being logged, regardless of SDK logging settings. Standardvärdet är false.Default is false.
Obs: Om du aktiverar den här inställningen tas all telemetri bort när ett internt fel inträffar.Note: Enabling this setting will result in dropped telemetry whenever an internal error occurs. Detta kan vara användbart för att snabbt identifiera problem med konfigurationen eller användningen av SDK.This can be useful for quickly identifying issues with your configuration or usage of the SDK. Om du inte vill förlora telemetri vid fel sökning kan du överväga att använda consoleLoggingLevel eller telemetryLoggingLevel i stället för enableDebug.If you do not want to lose telemetry while debugging, consider using consoleLoggingLevel or telemetryLoggingLevel instead of enableDebug.
loggingLevelConsoleloggingLevelConsole 00 Loggar interna Application Insights fel i konsolen.Logs internal Application Insights errors to console.
0: av,0: off,
1: endast kritiska fel,1: Critical errors only,
2: allt (fel & varningar)2: Everything (errors & warnings)
loggingLevelTelemetryloggingLevelTelemetry 11 Skickar interna Application Insights fel som telemetri.Sends internal Application Insights errors as telemetry.
0: av,0: off,
1: endast kritiska fel,1: Critical errors only,
2: allt (fel & varningar)2: Everything (errors & warnings)
diagnosticLogIntervaldiagnosticLogInterval 1000010000 inhemska Avsöknings intervall (i MS) för intern loggnings kön(internal) Polling interval (in ms) for internal logging queue
samplingPercentagesamplingPercentage 100100 Procent andel av händelser som ska skickas.Percentage of events that will be sent. Standardvärdet är 100, vilket innebär att alla händelser skickas.Default is 100, meaning all events are sent. Ange detta om du vill bevara din data Kap för storskaliga program.Set this if you wish to preserve your data cap for large-scale applications.
autoTrackPageVisitTimeautoTrackPageVisitTime falsefalse Om värdet är true, på en sid visningar, spåras och skickas den föregående instrumenterade sidans visnings tid och skickas som telemetri och en ny timer startas för den aktuella sid visningar.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. Standardvärdet är false.Default is false.
disableAjaxTrackingdisableAjaxTracking falsefalse Om värdet är true samlas inga AJAX-anrop in.If true, Ajax calls are not autocollected. Standardvärdet är false.Default is false.
disableFetchTrackingdisableFetchTracking santtrue Om det här värdet är sant samlas inga hämtnings förfrågningar in.If true, Fetch requests are not autocollected. Standardvärdet är trueDefault is true
overridePageViewDurationoverridePageViewDuration falsefalse Om värdet är true ändras standard beteendet för trackPageView till post end för sid visningens varaktighets intervall när trackPageView anropas.If true, default behavior of trackPageView is changed to record end of page view duration interval when trackPageView is called. Om värdet är false och ingen anpassad varaktighet anges för trackPageView, beräknas sid visningens prestanda med hjälp av API: t för navigering.If false and no custom duration is provided to trackPageView, the page view performance is calculated using the navigation timing API. Standardvärdet är false.Default is false.
maxAjaxCallsPerViewmaxAjaxCallsPerView 500500 Standard 500-styr hur många AJAX-anrop som ska övervakas per sid visning.Default 500 - controls how many Ajax calls will be monitored per page view. Ange till-1 om du vill övervaka alla (obegränsat) AJAX-anrop på sidan.Set to -1 to monitor all (unlimited) Ajax calls on the page.
disableDataLossAnalysisdisableDataLossAnalysis santtrue Om det här värdet är falskt kontrol leras den interna telemetri-buffertarna vid start för objekt som ännu inte har skickats.If false, internal telemetry sender buffers will be checked at startup for items not yet sent.
disableCorrelationHeadersdisableCorrelationHeaders falsefalse Om värdet är False kommer SDK att lägga till två huvuden ("Request-ID" och "Request-context") till alla beroende begär Anden för att korrelera dem med motsvarande begär Anden på Server sidan.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. Standardvärdet är false.Default is false.
correlationHeaderExcludedDomainscorrelationHeaderExcludedDomains Inaktivera korrelations rubriker för vissa domänerDisable correlation headers for specific domains
correlationHeaderDomainscorrelationHeaderDomains Aktivera korrelations rubriker för vissa domänerEnable correlation headers for specific domains
disableFlushOnBeforeUnloaddisableFlushOnBeforeUnload falsefalse Standard falskt.Default false. Om värdet är true anropas inte Flush-metoden när onBeforeUnload event triggersIf true, flush method will not be called when onBeforeUnload event triggers
enableSessionStorageBufferenableSessionStorageBuffer santtrue Default True.Default true. Om värdet är true lagras bufferten med all telemetri som inte har skickats i session Storage.If true, the buffer with all unsent telemetry is stored in session storage. Bufferten återställs vid sid inläsningThe buffer is restored on page load
isCookieUseDisabledisCookieUseDisabled falsefalse Standard falskt.Default false. Om värdet är true kommer SDK inte att lagra eller läsa data från cookies.If true, the SDK will not store or read any data from cookies.
cookieDomaincookieDomain nullnull Anpassad cookie-domän.Custom cookie domain. Detta är användbart om du vill dela Application Insights cookies över under domäner.This is helpful if you want to share Application Insights cookies across subdomains.
isRetryDisabledisRetryDisabled falsefalse Standard falskt.Default false. Om det här värdet är falskt försöker du igen på 206 (delvis utfört), 408 (timeout), 429 (för många begär Anden), 500 (internt Server fel), 503 (tjänsten är inte tillgänglig) och 0 (offline, endast om det har identifierats)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 Om värdet är true kommer SDK inte att lagra eller läsa data från lokal lagring och sessionstoken.If true, the SDK will not store or read any data from local and session storage. Standardvärdet är false.Default is false.
isBeaconApiDisabledisBeaconApiDisabled santtrue Om det här värdet är falskt skickar SDK all telemetri med hjälp av Beacon-API: etIf false, the SDK will send all telemetry using the Beacon API
onunloadDisableBeacononunloadDisableBeacon falsefalse Standard falskt.Default false. När fliken är stängd skickar SDK all återstående telemetri med hjälp av Beacon- API: etwhen tab is closed, the SDK will send all remaining telemetry using the Beacon API
sdkExtensionsdkExtension nullnull Anger namnet på SDK-tillägget.Sets the sdk extension name. Endast alfabetiska tecken tillåts.Only alphabetic characters are allowed. Tilläggs namnet läggs till som ett prefix till taggen AI. Internal. sdkVersion (till exempel 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'). Standardvärdet är null.Default is null.
isBrowserLinkTrackingEnabledisBrowserLinkTrackingEnabled falsefalse Standardvärdet är false.Default is false. Om värdet är true, kommer SDK att spåra alla förfrågningar om webb läsar länkar .If true, the SDK will track all Browser Link requests.
appIdappId nullnull AppId används för korrelationen mellan AJAX-beroenden på klient sidan med begär Anden på Server sidan.AppId is used for the correlation between AJAX dependencies happening on the client-side with the server-side requests. När Beacon-API är aktiverat kan det inte användas automatiskt, men det kan ställas in manuellt i konfigurationen.When Beacon API is enabled, it cannot be used automatically, but can be set manually in the configuration. Standardvärdet är nullDefault is null
enableCorsCorrelationenableCorsCorrelation falsefalse Om värdet är true, kommer SDK att lägga till två huvuden ("Request-ID" och "Request-context") till alla CORS-begäranden för att korrelera utgående AJAX-beroenden med motsvarande begär Anden på Server sidan.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. Standardvärdet är falseDefault is false
namePrefixnamePrefix Odefinieradundefined Ett valfritt värde som ska användas som namn postfix för localStorage och cookie-namn.An optional value that will be used as name postfix for localStorage and cookie name.
enableAutoRouteTrackingenableAutoRouteTracking falsefalse Spåra automatiskt väg ändringar i en enskild sida (SPA).Automatically track route changes in Single Page Applications (SPA). Om värdet är true skickar varje väg ändring en ny sid visningar till Application Insights.If true, each route change will send a new Pageview to Application Insights. Ändringar av hash-vägar (example.com/foo#bar) registreras också som nya sid visningar.Hash route changes (example.com/foo#bar) are also recorded as new page views.
enableRequestHeaderTrackingenableRequestHeaderTracking falsefalse Om värdet är true, kommer AJAX-& Hämta begärandehuvuden att spåras, standardvärdet är false.If true, AJAX & Fetch request headers is tracked, default is false.
enableResponseHeaderTrackingenableResponseHeaderTracking falsefalse Om värdet är true spåras svars rubriker för AJAX-& Hämta. standard är falskt.If true, AJAX & Fetch request's response headers is tracked, default is false.
distributedTracingModedistributedTracingMode DistributedTracingModes.AI Ställer in läget för distribuerad spårning.Sets the distributed tracing mode. Om AI_AND_W3C läge eller W3C-läge är inställt, genereras W3C trace context-rubriker (traceparent/tracestate) och tas med i alla utgående begär Anden.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 tillhandahålls för bakåtkompatibilitet med alla äldre Application Insights instrumenterade tjänster.AI_AND_W3C is provided for back-compatibility with any legacy Application Insights instrumented services.

Program med en sidaSingle Page Applications

Som standard hanterar inte denna SDK tillstånds väg ändringar som inträffar i program med en enda sida.By default, this SDK will not handle state-based route changing that occurs in single page applications. Om du vill aktivera automatisk väg ändrings spårning för ett program med en sida kan du lägga till enableAutoRouteTracking: true i konfigurations konfigurationen.To enable automatic route change tracking for your single page application, you can add enableAutoRouteTracking: true to your setup configuration.

För närvarande erbjuder vi ett separat reakta plugin-program som du kan initiera med SDK: n.Currently, we offer a separate React plugin which you can initialize with this SDK. Den utför även spårning av ändringar i flödet, samt att samla in andra reagera på en speciell telemetri.It will also accomplish route change tracking for you, as well as collect other React specific telemetry.

Reagera på tilläggReact extensions

TilläggExtensions
ReageraReact
Reagera inbyggdReact Native

Utforska data från webbläsare/klient SidanExplore browser/client-side data

Du kan visa data från webbläsare/klient sidan genom att gå till mått och lägga till enskilda mått som du är intresse rad av:Browser/client-side data can be viewed by going to Metrics and adding individual metrics you are interested in:

Du kan också visa dina data från Java Script SDK via webbläsarens upplevelse i portalen.You can also view your data from the JavaScript SDK via the Browser experience in the portal.

Välj webbläsare och välj sedan haverier eller prestanda.Select Browser and then choose Failures or Performance.

PrestandaPerformance

BeroendenDependencies

AnalyserAnalytics

Om du vill fråga din telemetri som samlas in av JavaScript SDK väljer du knappen Visa i loggar (analys) .To query your telemetry collected by the JavaScript SDK, select the View in Logs (Analytics) button. Genom att lägga till en where-sats i client_Type == "Browser"kommer du bara att se data från Java Script SDK och eventuell telemetri från Server sidan som samlas in av andra SDK: er.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

Stöd för käll kartorSource Map Support

Minified-callstacken för din undantags telemetri kan vara unminified i Azure Portal.The minified callstack of your exception telemetry can be unminified in the Azure portal. Alla befintliga integreringar på panelen undantags information fungerar med den nya unminified-callstacken.All existing integrations on the Exception Details panel will work with the newly unminified callstack. Dra och släpp-unminifying har stöd för alla befintliga och framtida JS-SDK: er (+ Node. JS), så du behöver inte uppgradera SDK-versionen.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. För att visa din unminified-callstackenTo view your unminified callstack,

  1. Välj ett objekt för telemetri av undantag i Azure Portal om du vill visa dess "transaktions information från slut punkt till slut punkt"Select an Exception Telemetry item in the Azure portal to view its "End-to-end transaction details"
  2. Identifiera vilka käll mappningar som motsvarar den här anrops stacken.Identify which source maps correspond to this call stack. Käll kartan måste matcha en stack Rams käll fil, men med suffixet .mapThe source map must match a stack frame's source file, but suffixed with .map
  3. Dra och släpp käll kartorna till anrops stacken i Azure Portal Drag and drop the source maps onto the call stack in the Azure portal

Application Insights Web BasicApplication Insights Web Basic

För en låg upplevelse kan du i stället installera den grundläggande versionen av Application InsightsFor a lightweight experience, you can instead install the basic version of Application Insights

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

Den här versionen har minimalt antal funktioner och funktioner och förlitar sig på att du ska kunna skapa dem på det sätt som passar dig bäst.This version comes with the bare minimum number of features and functionalities and relies on you to build it up as you see fit. Den utför till exempel ingen autoinsamling (ej fångade undantag, AJAX osv.).For example, it performs no autocollection (uncaught exceptions, AJAX, etc.). API: erna för att skicka vissa typer av telemetri, t. ex. trackTrace, trackExceptiono.s.v., ingår inte i den här versionen, så du måste ange ett eget gränssnitt.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. Det enda API som är tillgängligt är track.The only API that is available is track. Ett exempel finns här.A sample is located here.

ExempelExamples

Körbara-exempel finns i Application Insights JavaScript SDK-exempelFor runnable examples, see Application Insights JavaScript SDK Samples

Uppgradera från den gamla versionen av Application InsightsUpgrading from the old Version of Application Insights

Bryta ändringar i SDK v2-versionen:Breaking changes in the SDK V2 version:

  • Vissa API-anrop, till exempel trackPageView, trackException har uppdaterats för att möjliggöra bättre API-signaturer.To allow for better API signatures, some of the API calls such as trackPageView, trackException have been updated. Det finns inte stöd för att köra i IE8 eller lägre versioner av webbläsaren.Running in IE8 or lower versions of the browser is not supported.
  • Telemetri-kuvert har fält namn och struktur ändringar på grund av data schema uppdateringar.Telemetry envelope has field name and structure changes due to data schema updates.
  • Flyttade context.operation till context.telemetryTrace.Moved context.operation to context.telemetryTrace. Vissa fält ändrades också (operation.id --> telemetryTrace.traceID)Some fields were also changed (operation.id --> telemetryTrace.traceID)
    • Om du vill uppdatera aktuellt sid visningar-ID manuellt (till exempel i SPA-appar) kan du göra det med appInsights.properties.context.telemetryTrace.traceID = Util.newId()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()

Om du använder den aktuella Application Insights PRODUCTion SDK (1.0.20) och vill se om den nya SDK: n fungerar i körnings miljön uppdaterar du URL: en beroende på ditt aktuella SDK-inläsnings scenario.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.

  • Ladda ned via CDN-scenario: uppdatera kodfragmentet som du använder för att peka på följande URL: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-scenario: anropa downloadAndSetup för att ladda ned det fullständiga ApplicationInsights-skriptet från CDN och initiera det med instrumentande nyckel: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"
       });
    

Testa i intern miljö för att kontrol lera att övervakningsfunktionerna fungerar som förväntat.Test in internal environment to verify monitoring telemetry is working as expected. Om alla fungerar uppdaterar du API-signaturerna på lämpligt sätt till SDK v2-versionen och distribuerar i produktions miljöerna.If all works, update your API signatures appropriately to SDK V2 version and deploy in your production environments.

SDK-prestanda/-kostnadSDK performance/overhead

Vid bara 25 KB-GZipped, och endast ~ 15 MS att initiera, lägger Application Insights till en försumbar mängd loadtime till din webbplats.At just 25 KB gzipped, and taking only ~15 ms to initialize, Application Insights adds a negligible amount of loadtime to your website. Genom att använda kodfragmentet läses minimala komponenter i biblioteket in snabbt.By using the snippet, minimal components of the library are quickly loaded. Under tiden laddas det fullständiga skriptet ned i bakgrunden.In the meantime, the full script is downloaded in the background.

Medan skriptet hämtas från CDN, är all spårning av sidan i kö.While the script is downloading from the CDN, all tracking of your page is queued. När det nedladdade skriptet har slutförts asynkront initieras spåras alla händelser som placerats i kö.Once the downloaded script finishes asynchronously initializing, all events that were queued are tracked. Det innebär att du inte förlorar någon telemetri under hela sidans livs cykel.As a result, you will not lose any telemetry during the entire life cycle of your page. Den här installations processen ger din sida ett sömlöst analys system, osynligt för dina användare.This setup process provides your page with a seamless analytics system, invisible to your users.

Sammanfattning:Summary:

  • 25 KB GZipped25 KB gzipped
  • 15 MS allmän initierings tid15 ms overall initialization time
  • Noll spårning saknas under sidans livs cykelZero tracking missed during life cycle of page

Stöd för webbläsareBrowser support

Chrome Firefox IE Opera Safari
Chrome senaste ✔Chrome Latest ✔ Senaste ✔ för FirefoxFirefox Latest ✔ IE 9 + & Microsoft Edge-✔IE 9+ & Edge ✔ Senaste ✔ för OperaOpera Latest ✔ Senaste ✔ för SafariSafari Latest ✔

SDK för öppen källkodOpen-source SDK

Application Insights JavaScript SDK är öppen källkod för att Visa käll koden eller för att bidra till projektet besök den officiella GitHub-lagringsplatsen.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ästa stegNext steps