139 |
140 | #### Get original AppInsights object
141 |
142 | Use the following method to get the original AppInsights object:
143 |
144 | ```javascript
145 | var appInsights = reactAI.appInsights;
146 | ```
147 |
148 | Refer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.
149 |
150 |
151 | [react]: https://reactjs.org/
152 | [appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript
153 | [appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/
154 | [appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md
155 | [react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components
156 | [react-plugin-package]: https://www.npmjs.com/package/@microsoft/applicationinsights-react-js
157 | [appinsights-repo]: https://github.com/microsoft/ApplicationInsights-JS
--------------------------------------------------------------------------------
/azure-pipelines.yml:
--------------------------------------------------------------------------------
1 | # Node.js with React
2 | # Build a Node.js project that uses React.
3 | # Add steps that analyze code, save build artifacts, deploy, and more:
4 | # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
5 |
6 | pool:
7 | vmImage: 'Ubuntu 16.04'
8 |
9 | strategy:
10 | matrix:
11 | node_8_x:
12 | node_version: 8.x
13 | node_10_x:
14 | node_version: 10.x
15 | node_11_x:
16 | node_version: 11.x
17 |
18 | steps:
19 | - task: NodeTool@0
20 | inputs:
21 | versionSpec: $(node_version)
22 | displayName: 'Install Node.js'
23 |
24 | - script: |
25 | npm install
26 | npm run build
27 | npm test
28 | displayName: 'npm install, build and test'
29 |
30 | - task: PublishTestResults@2
31 | inputs:
32 | testResultsFiles: '**/test-report.xml'
33 |
34 | - task: PublishCodeCoverageResults@1
35 | inputs:
36 | codeCoverageTool: Cobertura
37 | summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml'
38 | reportDirectory: '$(System.DefaultWorkingDirectory)/coverage/lcov-report'
--------------------------------------------------------------------------------
/jestconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "transform": {
3 | "^.+\\.(t|j)sx?$": "ts-jest"
4 | },
5 | "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
6 | "moduleFileExtensions": [
7 | "ts",
8 | "tsx",
9 | "js",
10 | "jsx",
11 | "json",
12 | "node"
13 | ],
14 | "testPathIgnorePatterns": [
15 | "node_modules",
16 | "legacy",
17 | "dist",
18 | "dist-esm"
19 | ],
20 | "testResultsProcessor": "./node_modules/jest-junit-reporter",
21 | "collectCoverage": true,
22 | "coveragePathIgnorePatterns": [
23 | "/node_modules/",
24 | "/test/"
25 | ],
26 | "coverageReporters": [
27 | "cobertura",
28 | "lcov",
29 | "text"
30 | ]
31 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-appinsights",
3 | "version": "3.0.0",
4 | "description": "Application Insights module for React applications",
5 | "main": "dist/index.js",
6 | "module": "dist-esm/src/index.js",
7 | "browser": {
8 | "./dist/index.js": "./browser/index.js"
9 | },
10 | "types": "dist-esm/src/index.d.ts",
11 | "scripts": {
12 | "clean": "rimraf dist dist-*",
13 | "build": "tsc -p . && rollup -c && rollup -c rollup.test.config.js",
14 | "test": "jest --config jestconfig.json",
15 | "test-watch": "jest --config jestconfig.json --watch",
16 | "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
17 | "lint": "tslint -p tsconfig.json",
18 | "prepublishOnly": "npm test && npm run lint",
19 | "preversion": "npm run lint",
20 | "version": "npm run format && git add -A src",
21 | "postversion": "git push && git push --tags"
22 | },
23 | "repository": {
24 | "type": "git",
25 | "url": "git+https://github.com/Azure/react-appinsights.git"
26 | },
27 | "keywords": [
28 | "Azure",
29 | "Cloud",
30 | "React",
31 | "ReactJS",
32 | "AppInsights",
33 | "Application Insights",
34 | "Microsoft Application Insights",
35 | "Telemetry"
36 | ],
37 | "author": "Microsoft Corporation",
38 | "license": "MIT",
39 | "bugs": {
40 | "url": "https://github.com/Azure/react-appinsights/issues"
41 | },
42 | "engine": {
43 | "node": ">=8.0.0"
44 | },
45 | "homepage": "https://github.com/Azure/react-appinsights#readme",
46 | "devDependencies": {
47 | "@types/enzyme": "^3.9.2",
48 | "@types/enzyme-adapter-react-16": "^1.0.5",
49 | "@types/history": "^4.7.2",
50 | "@types/jest": "^24.0.13",
51 | "@types/node": "^12.0.2",
52 | "@types/react": "^16.8.18",
53 | "@types/react-dom": "^16.8.4",
54 | "enzyme": "^3.9.0",
55 | "enzyme-adapter-react-16": "^1.13.1",
56 | "jest": "^24.8.0",
57 | "jest-junit-reporter": "^1.1.0",
58 | "prettier": "^1.17.1",
59 | "react-dom": "^16.8.6",
60 | "rimraf": "^2.6.3",
61 | "rollup": "1.12.3",
62 | "rollup-plugin-commonjs": "^9.3.4",
63 | "rollup-plugin-json": "^4.0.0",
64 | "rollup-plugin-local-resolve": "^1.0.7",
65 | "rollup-plugin-multi-entry": "^2.1.0",
66 | "rollup-plugin-node-builtins": "^2.1.2",
67 | "rollup-plugin-node-resolve": "^5.0.0",
68 | "rollup-plugin-replace": "^2.2.0",
69 | "rollup-plugin-terser": "^5.0.0",
70 | "rollup-plugin-uglify": "^6.0.2",
71 | "rollup-plugin-visualizer": "^1.1.1",
72 | "ts-jest": "^24.0.2",
73 | "tslint": "^5.16.0",
74 | "tslint-config-prettier": "^1.18.0",
75 | "typescript": "^3.4.5"
76 | },
77 | "sideEffects": false,
78 | "dependencies": {
79 | "@microsoft/applicationinsights-common": "^2.0.0",
80 | "@microsoft/applicationinsights-web": "^2.0.0",
81 | "history": "^4.9.0",
82 | "react": "^16.8.6"
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/rollup.base.config.js:
--------------------------------------------------------------------------------
1 | import cjs from "rollup-plugin-commonjs";
2 | import json from "rollup-plugin-json";
3 | import multiEntry from "rollup-plugin-multi-entry";
4 | import nodeBuiltins from "rollup-plugin-node-builtins";
5 | import nodeResolve from "rollup-plugin-node-resolve";
6 | import replace from "rollup-plugin-replace";
7 | import { uglify } from "rollup-plugin-uglify";
8 | import viz from "rollup-plugin-visualizer";
9 |
10 | const pkg = require("./package.json");
11 | const depNames = Object.keys(pkg.dependencies);
12 | const input = "dist-esm/src/index.js";
13 |
14 | export function nodeConfig(test = false) {
15 | const externalNodeBuiltins = ["events"];
16 | const baseConfig = {
17 | input: input,
18 | external: depNames.concat(externalNodeBuiltins),
19 | output: { file: "dist/index.js", format: "cjs", sourcemap: true },
20 | plugins: [
21 | json(),
22 | replace({
23 | delimiters: ["", ""],
24 | values: {
25 | // replace dynamic checks with if (true) since this is for node only.
26 | // Allows rollup's dead code elimination to be more aggressive.
27 | "if (isNode)": "if (true)"
28 | }
29 | }),
30 | nodeResolve({ preferBuiltins: true }),
31 | cjs()
32 | ]
33 | };
34 |
35 | if (test) {
36 | // entry point is every test file
37 | baseConfig.input = "dist-esm/test/**/*.js";
38 | baseConfig.plugins.unshift(multiEntry({ exports: false }));
39 |
40 | // different output file
41 | baseConfig.output.file = "test-dist/index.js";
42 |
43 | // mark assert as external
44 | baseConfig.external.push("assert");
45 | } else {
46 | baseConfig.plugins.push(uglify());
47 | }
48 |
49 | return baseConfig;
50 | }
51 |
52 | export function browserConfig(test = false) {
53 | const baseConfig = {
54 | input: input,
55 | external: ["ms-rest-js"],
56 | output: {
57 | file: "browser/index.js",
58 | format: "umd",
59 | name: "ExampleClient",
60 | sourcemap: true,
61 | globals: { "ms-rest-js": "msRest" }
62 | },
63 | plugins: [
64 | json(),
65 | replace(
66 | // ms-rest-js is externalized so users must include it prior to using this bundle.
67 | {
68 | delimiters: ["", ""],
69 | values: {
70 | // replace dynamic checks with if (false) since this is for
71 | // browser only. Rollup's dead code elimination will remove
72 | // any code guarded by if (isNode) { ... }
73 | "if (isNode)": "if (false)"
74 | }
75 | }
76 | ),
77 | nodeResolve({
78 | preferBuiltins: false,
79 | browser: true
80 | }),
81 | cjs({
82 | namedExports: {
83 | events: ["EventEmitter"],
84 | "node_modules/@microsoft/applicationinsights-core-js/browser/applicationinsights-core-js.min.js": [
85 | "AppInsightsCore",
86 | "LoggingSeverity",
87 | "_InternalMessageId",
88 | "CoreUtils",
89 | "DiagnosticLogger"
90 | ],
91 | "node_modules/react/index.js": ["Children", "Component", "PropTypes", "createElement"],
92 | "node_modules/react-dom/index.js": ["render"]
93 | }
94 | }),
95 | nodeBuiltins(),
96 | viz({ filename: "browser/browser-stats.html", sourcemap: false })
97 | ],
98 | onwarn
99 | };
100 |
101 | if (test) {
102 | baseConfig.input = "dist-esm/test/**/*.js";
103 | baseConfig.plugins.unshift(multiEntry({ exports: false }));
104 | baseConfig.output.file = "test-browser/index.js";
105 | } else {
106 | baseConfig.plugins.push(uglify());
107 | }
108 |
109 | return baseConfig;
110 | }
111 |
112 | function onwarn(warning, warn) {
113 | if (warning.code === "CIRCULAR_DEPENDENCY" && warning.importer.indexOf("duplex.js") > -1) {
114 | // circular dependencies in Stream (required by create-hmac via rollup-plugin-node-builtins)
115 | // These should be ignored per https://github.com/calvinmetcalf/rollup-plugin-node-builtins/issues/39
116 | return;
117 | }
118 | warn(warning);
119 | }
120 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import * as base from "./rollup.base.config";
2 |
3 | export default [base.nodeConfig(), base.browserConfig()];
4 |
--------------------------------------------------------------------------------
/rollup.test.config.js:
--------------------------------------------------------------------------------
1 | import * as base from "./rollup.base.config";
2 |
3 | export default [base.nodeConfig(true), base.browserConfig(true)];
4 |
--------------------------------------------------------------------------------
/src/IReactAISettings.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation. All rights reserved.
2 | // Licensed under the MIT License.
3 |
4 | import { History } from "history";
5 |
6 | /**
7 | * Settings to initialize a ReactAI instance.
8 | *
9 | * @export
10 | * @interface IReactAISettings
11 | */
12 | export default interface IReactAISettings {
13 |
14 | /**
15 | * Context/custom dimensions for initialization.
16 | * You can also do this post initialization using ReactAI.setContext()
17 | *
18 | * @type {{ [key: string]: any }}
19 | * @memberof IReactAISettings
20 | */
21 | initialContext?: { [key: string]: any };
22 |
23 | /**
24 | * React router history for enabling Application Insights PageView tracking.
25 | *
26 | * @type {History}
27 | * @memberof IReactAISettings
28 | */
29 | history?: History;
30 |
31 | /**
32 | * Debug mode.
33 | * Enable this when developing to see debug messages from the library displayed on the console.
34 | *
35 | * @type {boolean}
36 | * @memberof IReactAISettings
37 | */
38 | debug?: boolean;
39 | }
40 |
--------------------------------------------------------------------------------
/src/ReactAI.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation. All rights reserved.
2 | // Licensed under the MIT License.
3 |
4 | import { PropertiesPluginIdentifier } from "@microsoft/applicationinsights-common";
5 | import { IPlugin } from "@microsoft/applicationinsights-core-js";
6 | import { ApplicationInsights as AppInsightsPlugin, IAppInsightsCore, IConfig, IConfiguration, IPageViewTelemetry, ITelemetryItem, ITelemetryPlugin, PropertiesPlugin } from "@microsoft/applicationinsights-web";
7 | import { Action, History, Location } from "history";
8 | import IReactAISettings from "./IReactAISettings";
9 |
10 | /**
11 | * Module to include Microsoft Application Insights in React applications.
12 | *
13 | * @export
14 | * @class ReactAI
15 | */
16 | class ReactAI implements ITelemetryPlugin {
17 | public extensionId: string = "ApplicationInsightsReactUsage";
18 | public ApplicationInsightsAnalyticsIdentifier: string = "ApplicationInsightsAnalytics";
19 | public processTelemetry: (env: ITelemetryItem) => void;
20 | public identifier = this.extensionId;
21 | public priority: number = 190;
22 | public appInsights!: AppInsightsPlugin;
23 | private propertiesPlugin!: PropertiesPlugin;
24 |
25 | private nextPlugin!: ITelemetryPlugin;
26 | private contextProps: { [key: string]: any } = {};
27 | private debug: boolean = false;
28 |
29 | public constructor() {
30 | this.processTelemetry = this.customDimensionsInitializer.bind(this);
31 | }
32 |
33 | public setNextPlugin(plugin: ITelemetryPlugin) {
34 | this.nextPlugin = plugin;
35 | }
36 |
37 | /**
38 | * Returns the current value of context/custom dimensions.
39 | *
40 | * @readonly
41 | * @type {{ [key: string]: any }}
42 | * @memberof ReactAI
43 | */
44 | public get context(): { [key: string]: any } {
45 | return this.contextProps || {};
46 | }
47 |
48 | /**
49 | * Returns if ReactAI is in debug mode.
50 | *
51 | * @readonly
52 | * @type {boolean}
53 | * @memberof ReactAI
54 | */
55 | public get isDebugMode(): boolean {
56 | return this.debug;
57 | }
58 |
59 | /**
60 | * Initializes a singleton instance of ReactAI based on supplied parameters.
61 | *
62 | * @param {IReactAISettings} settings
63 | * @memberof ReactAI
64 | */
65 | public initialize(
66 | settings: IReactAISettings & IConfiguration & IConfig,
67 | core: IAppInsightsCore,
68 | extensions: IPlugin[]
69 | ): void {
70 | const reactAISettings =
71 | settings.extensionConfig && settings.extensionConfig[this.identifier]
72 | ? (settings.extensionConfig[this.identifier] as IReactAISettings)
73 | : { debug: false };
74 | this.debug = reactAISettings.debug || false;
75 | this.setContext(reactAISettings.initialContext || {}, true);
76 | extensions.forEach(ext => {
77 | let identifier = (ext as ITelemetryPlugin).identifier;
78 | if (identifier === this.ApplicationInsightsAnalyticsIdentifier) {
79 | this.appInsights = ((Component: React.ComponentType
, componentName?: string): React.ComponentClass
{ 16 | 17 | if (componentName === undefined || componentName === null || typeof componentName !== 'string') { 18 | componentName = Component.prototype.constructor.name; 19 | } 20 | 21 | return class extends React.Component
{ 22 | private mountTimestamp: number = 0; 23 | private firstActiveTimestamp: number = 0; 24 | private idleStartTimestamp: number = 0; 25 | private lastActiveTimestamp: number = 0; 26 | private totalIdleTime: number = 0; 27 | private idleCount: number = 0; 28 | private idleTimeout: number = 5000; 29 | private intervalId?: NodeJS.Timeout; 30 | 31 | public componentDidMount() { 32 | this.mountTimestamp = Date.now(); 33 | this.firstActiveTimestamp = 0; 34 | this.totalIdleTime = 0; 35 | this.lastActiveTimestamp = 0; 36 | this.idleStartTimestamp = 0; 37 | this.idleCount = 0; 38 | 39 | this.intervalId = setInterval(() => { 40 | if (this.lastActiveTimestamp > 0 && this.idleStartTimestamp === 0 && Date.now() - this.lastActiveTimestamp >= this.idleTimeout) { 41 | this.idleStartTimestamp = Date.now(); 42 | this.idleCount++; 43 | this.debugLog("componentDidMount", "Starting idle time."); 44 | } 45 | }, 100); 46 | } 47 | 48 | public componentWillUnmount() { 49 | if (this.mountTimestamp === 0) { 50 | throw new Error("withAITracking:componentWillUnmount: mountTimestamp isn't initialized."); 51 | } 52 | 53 | if (!reactAI.appInsights) { 54 | throw new Error("withAITracking:componentWillUnmount: ReactAI isn't initialized."); 55 | } 56 | 57 | if (this.intervalId) { 58 | clearInterval(this.intervalId); 59 | } 60 | 61 | if (this.firstActiveTimestamp === 0) { 62 | this.debugLog("componentWillUnmount", "Nothing to track."); 63 | return; 64 | } 65 | 66 | const engagementTime = this.getEngagementTimeSeconds(); 67 | const metricData: IMetricTelemetry = { 68 | average: engagementTime, 69 | name: "React Component Engaged Time (seconds)", 70 | sampleCount: 1 71 | }; 72 | 73 | const additionalProperties: { [key: string]: any } = { "Component Name": componentName }; 74 | this.debugLog( 75 | "componentWillUnmount", 76 | `Tracking ${engagementTime} seconds of engagement time for ${componentName}.` 77 | ); 78 | reactAI.appInsights.trackMetric(metricData, additionalProperties); 79 | } 80 | 81 | public render() { 82 | return ( 83 |