Skip to content

Commit 023b2b1

Browse files
authored
Update javascript.md
1 parent 683f2fb commit 023b2b1

File tree

1 file changed

+13
-12
lines changed

1 file changed

+13
-12
lines changed

articles/azure-monitor/app/javascript.md

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
---
22
title: Azure Application Insights for JavaScript web apps
3-
description: Get page view and session counts, web client data, and single-page applications and track usage patterns. Detect exceptions and performance issues in JavaScript web pages.
3+
description: Get page view and session counts, web client data, and single-page applications and track usage patterns. Detect exceptions and performance issues in JavaScript webpages.
44
ms.topic: conceptual
55
ms.date: 08/06/2020
66
ms.devlang: javascript
77
ms.custom: devx-track-js
88
ms.reviewer: mmcc
99
---
1010

11-
# Application Insights for web pages
11+
# Application Insights for webpages
1212

1313
> [!NOTE]
1414
> We continue to assess the viability of OpenTelemetry for browser scenarios. We recommend the Application Insights JavaScript SDK for the forseeable future. It's fully compatible with OpenTelemetry distributed tracing.
1515
16-
Find out about the performance and usage of your web page or app. If you add [Application Insights](app-insights-overview.md) to your page script, you get timings of page loads and AJAX calls, counts, and details of browser exceptions and AJAX failures. You also get user and session counts. All this telemetry can be segmented by page, client OS and browser version, geo location, and other dimensions. You can set alerts on failure counts or slow page loading. By inserting trace calls in your JavaScript code, you can track how the different features of your web page application are used.
16+
Find out about the performance and usage of your webpage or app. If you add [Application Insights](app-insights-overview.md) to your page script, you get timings of page loads and AJAX calls, counts, and details of browser exceptions and AJAX failures. You also get user and session counts. All this telemetry can be segmented by page, client OS and browser version, geo location, and other dimensions. You can set alerts on failure counts or slow page loading. By inserting trace calls in your JavaScript code, you can track how the different features of your webpage application are used.
1717

18-
Application Insights can be used with any web pages by adding a short piece of JavaScript. Node.js has a [standalone SDK](nodejs.md). If your web service is [Java](java-in-process-agent.md) or [ASP.NET](asp-net.md), you can use the server-side SDKs with the client-side JavaScript SDK to get an end-to-end understanding of your app's performance.
18+
Application Insights can be used with any webpages by adding a short piece of JavaScript. Node.js has a [standalone SDK](nodejs.md). If your web service is [Java](java-in-process-agent.md) or [ASP.NET](asp-net.md), you can use the server-side SDKs with the client-side JavaScript SDK to get an end-to-end understanding of your app's performance.
1919

2020
## Add the JavaScript SDK
2121

2222
1. First you need an Application Insights resource. If you don't already have a resource and connection string, follow the instructions to [create a new resource](create-new-resource.md).
2323
1. Copy the [connection string](#connection-string-setup) for the resource where you want your JavaScript telemetry to be sent (from step 1). You'll add it to the `connectionString` setting of the Application Insights JavaScript SDK.
24-
1. Add the Application Insights JavaScript SDK to your web page or app via one of the following two options:
24+
1. Add the Application Insights JavaScript SDK to your webpage or app via one of the following two options:
2525
* [Node Package Manager (npm) setup](#npm-based-setup)
2626
* [JavaScript snippet](#snippet-based-setup)
2727

@@ -61,7 +61,7 @@ If your app doesn't use npm, you can directly instrument your webpages with Appl
6161

6262
Starting from version 2.5.5, the page view event will include the new tag "ai.internal.snippet" that contains the identified snippet version. This feature assists with tracking which version of the snippet your application is using.
6363

64-
The current snippet that follows is version "5." The version is encoded in the snippet as sv:"#." The [current version is also available on GitHub](https://go.microsoft.com/fwlink/?linkid=2156318).
64+
The current snippet that follows is version "5." The version is encoded in the snippet as `sv:"#"`. The [current version is also available on GitHub](https://go.microsoft.com/fwlink/?linkid=2156318).
6565

6666
```html
6767
<script type="text/javascript">
@@ -324,8 +324,8 @@ For single-page applications, reference plug-in documentation for guidance speci
324324

325325
### Advanced correlation
326326

327-
When a page is first loading and the SDK hasn't fully initialized, we're unable to generate the Operation ID for the first request. As a result, distributed tracing is incomplete until the SDK fully initializes.
328-
To remedy this problem, you can include dynamic JavaScript on the returned HTML page. The SDK will use a callback function during initialization to retroactively pull the Operation ID from the `serverside` and populate the `clientside` with it.
327+
When a page is first loading and the SDK hasn't fully initialized, we're unable to generate the operation ID for the first request. As a result, distributed tracing is incomplete until the SDK fully initializes.
328+
To remedy this problem, you can include dynamic JavaScript on the returned HTML page. The SDK will use a callback function during initialization to retroactively pull the operation ID from the `serverside` and populate the `clientside` with it.
329329

330330
# [Snippet](#tab/snippet)
331331

@@ -357,7 +357,7 @@ appInsights.context.telemetryContext.parentID = serverId;
357357
appInsights.loadAppInsights();
358358
```
359359

360-
When you use an npm-based configuration, a location must be determined to store the Operation ID to enable access for the SDK initialization bundle to `appInsights.context.telemetryContext.parentID` so it can populate it before the first page view event is sent.
360+
When you use an npm-based configuration, a location must be determined to store the operation ID to enable access for the SDK initialization bundle to `appInsights.context.telemetryContext.parentID` so it can populate it before the first page view event is sent.
361361

362362
---
363363

@@ -449,10 +449,11 @@ Breaking changes in the SDK V2 version:
449449
- To allow for better API signatures, some of the API calls, such as trackPageView and trackException, have been updated. Running in Internet Explorer 8 and earlier versions of the browser isn't supported.
450450
- The telemetry envelope has field name and structure changes due to data schema updates.
451451
- Moved `context.operation` to `context.telemetryTrace`. Some fields were also changed (`operation.id` --> `telemetryTrace.traceID`).
452-
- To manually refresh the current pageview ID, for example, in single-page applications, use `appInsights.properties.context.telemetryTrace.traceID = Microsoft.ApplicationInsights.Telemetry.Util.generateW3CId()`.
452+
453+
To manually refresh the current pageview ID, for example, in single-page applications, use `appInsights.properties.context.telemetryTrace.traceID = Microsoft.ApplicationInsights.Telemetry.Util.generateW3CId()`.
453454

454-
> [!NOTE]
455-
> To keep the trace ID unique, where you previously used `Util.newId()`, now use `Util.generateW3CId()`. Both ultimately end up being the operation ID.
455+
> [!NOTE]
456+
> To keep the trace ID unique, where you previously used `Util.newId()`, now use `Util.generateW3CId()`. Both ultimately end up being the operation ID.
456457

457458
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.
458459

0 commit comments

Comments
 (0)