readme: add SPA route change docs (#921)
* readme: add SPA route change docs * readme: use scripts/b/ endpoint
This commit is contained in:
Mark Wolff
GitHub
Родитель
75f6860e5c
Коммит
96a5125a40
23
README.md
23
README.md
|
|
@ -20,8 +20,8 @@
|
|||
[](https://dev.azure.com/mseng/AppInsights/_build/latest?definitionId=8184&branchName=master)
|
||||
[](https://travis-ci.org/microsoft/ApplicationInsights-JS)
|
||||
[](https://badge.fury.io/js/%40microsoft%2Fapplicationinsights-web)
|
||||
[](https://img.badgesize.io/https://az416426.vo.msecnd.net/next/ai.2.min.js.svg?label=minified%20size)
|
||||
[](https://img.badgesize.io/https://az416426.vo.msecnd.net/next/ai.2.min.js.svg?compression=gzip&softmax=27000&max=30000)
|
||||
[](https://img.badgesize.io/https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js.svg?label=minified%20size)
|
||||
[](https://img.badgesize.io/https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js.svg?compression=gzip&softmax=30000&max=35000)
|
||||
|
||||
|
||||
> ***Note:*** The documentation for `applicationinsights-js` has moved [here](./legacy_README.md). If you are looking to upgrade to the new version of the SDK, please see the [Upgrade Guide](#upgrading-from-the-old-version-of-application-insights).
|
||||
|
|
@ -55,7 +55,7 @@ appInsights.loadAppInsights();
|
|||
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. Preferably, it should be the first script in your `<head>` section so that it can monitor any potential issues with all of your dependencies.
|
||||
```html
|
||||
<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/next/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("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),!(!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}(
|
||||
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("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),!(!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"
|
||||
}
|
||||
|
|
@ -155,9 +155,20 @@ Most configuration fields are named such that they can be defaulted to falsey. A
|
|||
| enableCorsCorrelation | false | If true, the SDK will add two headers ('Request-Id' and 'Request-Context') to all CORS requests tocorrelate outgoing AJAX dependencies with corresponding requests on the server side. Default is false |
|
||||
| namePrefix | undefined | An optional value that will be used as name postfix for localStorage and cookie name.
|
||||
|
||||
## Single Page Applications
|
||||
|
||||
By default, this SDK will **not** handle state based route changing that occurs in single page applications unless you use a plugin designed for your frontend framework (Angular, React, Vue, etc). Currently, we support a separate [React plugin](#available-extensions-for-the-sdk) which you can initialize with this SDK and it will accomplish this for you in your React application. Otherwise, you must manually trigger pageviews on each route change. An example of accomplishing this for a React application is located [here](https://github.com/Azure-Samples/appinsights-guestbook/blob/6555933e19d737b2ff4f9f339cc1b928f0c08cdb/client/src/AppContainer.js#L17-L20). Note that you must refresh the current operation's id **as well as** trigger an additional pageview:
|
||||
**React Router history listener example**
|
||||
```js
|
||||
this.unlisten = this.props.history.listen((location, action) => {
|
||||
ai.properties.context.telemetryTrace.traceID = Util.newId();
|
||||
ai.trackPageView({name: window.location.pathname});
|
||||
});
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
For runnable examples, see [Application Insights Javascript SDK Samples](https://github.com/Azure-Samples?utf8=%E2%9C%93&q=application+insights+sdk&type=&language=)
|
||||
For runnable examples, see [Application Insights Javascript SDK Samples](https://github.com/topics/applicationinsights-js-demo)
|
||||
|
||||
## Application Insights Web Basic
|
||||
|
||||
|
|
@ -187,7 +198,7 @@ If you are using the current application insights PRODUCTION SDK (1.0.20) and wa
|
|||
**a)** Download via CDN scenario:
|
||||
Update code snippet that you currently use to point to the following URL:
|
||||
```
|
||||
"https://az416426.vo.msecnd.net/beta/ai.2.min.js"
|
||||
"https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js"
|
||||
```
|
||||
|
||||
**b)** NPM scenario:
|
||||
|
|
@ -195,7 +206,7 @@ If you are using the current application insights PRODUCTION SDK (1.0.20) and wa
|
|||
```ts
|
||||
appInsights.downloadAndSetup({
|
||||
instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx",
|
||||
url: "https://az416426.vo.msecnd.net/beta/ai.2.min.js"
|
||||
url: "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js"
|
||||
});
|
||||
```
|
||||
Test in internal environment to verify monitoring telemetry is working as expected. If all works, please update your api signatures appropriately to SDK V2 version and deploy in your production environments.
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче