@microsoft/applicationinsights-perfmarkmeasure-js v3.2.0
Microsoft Application Insights JavaScript SDK - Performance Mark and Measure Plugin
Performance Mark and Measure Manager Plugin for the Application Insights Javascript SDK is a replacement for the default Performance manager to
use the window.performance
, mark
and measure
api calls for the browsers.
It is intended that this plugin is to be used during development/testing only as enabling performance monitoring can affect the performance of the system. And there is a limit on the number of performance events that browsers will retain.
Getting Started
See the basic documentation on the performance monitoring support helpers and interfaces, this extension builds on top of the basic support.
NPM Setup
Install npm package:
npm install --save @microsoft/applicationinsights-applicationinsights-perfmarkmeasure-js @microsoft/applicationinsights-web
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { PerfMarkMeasureManager } from '@microsoft/applicationinsights-perfmarkmeasure-js';
const perfManager = new PerfMarkMeasureManager();
// Application Insights Configuration
const configObj = {
instrumentationKey: "YOUR INSTRUMENTATION KEY",
};
const appInsights = new ApplicationInsights({ config: configObj });
appInsights.loadAppInsights();
appInsights.core.setPerfMgr(perfManager);
Direct usage with the doPerf() helper
import { doPerf, PerfMarkMeasureManager } from '@microsoft/applicationinsights-applicationinsights-perfmarkmeasure-js';
const perfManager = new PerfMarkMeasureManager();
doPerf(perfManager, () => "code", (perfEvent) => {
// Code to run that will have a mark and measure
});
// window.performance will now contain
// - a mark called 'ai.prfmrk.code'
// - a measure called 'ai.prf.msr.code'
Direct usage with the doPerf() helper and a notification manager
import { INotificationManager } from '@microsoft/applicationinsights-core-js';
import { doPerf, IPerfEvent, PerfMarkMeasureManager } from '@microsoft/applicationinsights-applicationinsights-perfmarkmeasure-js';
let perfEvents: IPerfEvent[] = [];
const perfManager = new PerfMarkMeasureManager(
{
// config
},
{
perfEvent: (perfEvent) => {
// Called after the doPerf() function finishes
perfEvents.push(perfEvent);
}
} as INotificationManager);
doPerf(perfManager, () => "code", (perfEvent) => {
// Code to run that will have a mark and measure
});
// window.performance will now contain
// - a mark called 'ai.prfmrk.code'
// - a measure called 'ai.prf.msr.code'
// perfEvents.length === 1 with perfEvents[0].name === "code"
CDN Usage
<script src="https://js.monitor.azure.com/scripts/b/ext/ai.prfmm-mgr.2.min.js"></script>
<script type="application/javascript">
const perfManager = new Microsoft.ApplicationInsights.PerfMarkMeasureManager();
Microsoft.ApplicationInsights.doPerf(perfManager, () => "code", (perfEvent) => {
// Code to run that will have a mark and measure
});
// window.performance will now contain
// - a mark called 'ai.prfmrk.code'
// - a measure called 'ai.prf.msr.code'
</script>
Also see the Example Html Usage
Configuration Options
All of the configuration options are optional
IPerfMarkMeasureConfiguration
Name | Type | Description |
---|---|---|
useMarks | boolean | Should the Performance manager create and use window.performance.mark(), defaults to true |
markPrefix | string | Identifies the prefix for the mark, defaults to "ai.prfmrk.", the event name is appended for the mark |
uniqueNames | boolean | Make the marks and measures unique by appending a numeric value to the prefix value, defaults to false. Marks and measure for the same perfEvent will be assigned the same unique numeric value |
markNameMap | { key: string: string } | Provides a mapping between the internal perf names and the value used to create the mark, when a map is provided but no mapping is present that event will be ignored. |
useEndMarks | boolean | Should the Performance manager create a mark when the event is fired, defaults to false |
markEndPrefix | string | Identifies the prefix for the "end" mark of a perf event, defaults to "ai.prfmrk.end.", the event name is appended for the mark |
useMeasures | boolean | Should the Performance manager create and use window.performance.measure(), defaults to true |
measurePrefix | string | Identifies the prefix for the mark, defaults to "ai.prfmsr.", the event name is appended for the measure name |
measureNameMap | { key: string: string } | Provides a mapping between the internal perf names and the value used to create the measure, when no measureNameMap is provided this will default to using the markNameMap and when a map is provided but no mapping is present that event will be ignored. |
Example with config
import { doPerf } from '@microsoft/applicationinsights-core-js';
import { PerfMarkMeasureManager } from '@microsoft/applicationinsights-applicationinsights-perfmarkmeasure-js';
const perfManager = new PerfMarkMeasureManager({
useMarks: true,
useEndMarks: true,
markPrefix: "tst.mark.",
markEndPrefix: "tst.markend.",
measurePrefix: "tst.measure.",
markNameMap: {
"test": "mapped1",
"test3": "mapped3"
},
measureNameMap: {
"test": "measure1",
"test2": "measure2"
}
});
doPerf(manager, () => "test", (perfEvent) => {
// A mark has been added to window.performance called 'tst.mark.test'
});
// Another mark has been added to window.performance called 'tst.markend.test'
// And a measure will also exist in window.performance called 'tst.measure.test'
Build:
npm install -g grunt-cli
npm install
npm run build --silent
Run unit tests:
npm run test
Contributing
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.
When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
License
3 days ago
2 days ago
6 days ago
7 days ago
7 days ago
7 days ago
9 days ago
10 days ago
14 days ago
14 days ago
15 days ago
15 days ago
15 days ago
20 days ago
22 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
7 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
7 months ago
7 months ago
7 months ago
6 months ago
8 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
9 months ago
9 months ago
8 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
12 months ago
12 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
11 months ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago