{"_id":"react-appinsights","_rev":"26-a3ca4b1707fcbcc44040b13299f71bac","name":"react-appinsights","description":"Application Insights module for React applications","dist-tags":{"latest":"3.0.0","beta":"3.0.0-rc.6"},"versions":{"1.0.0":{"name":"react-appinsights","version":"1.0.0","description":"React Application Insights module","main":"lib/index.js","scripts":{"build":"babel src --out-dir lib","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/anastasiia-zolochevska/react-appinsights.git"},"keywords":["react","AppInsights","telemetry"],"author":{"name":"Anastasia Zolochevska","email":"anastasiia.zolochevska@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/anastasiia-zolochevska/react-appinsights/issues"},"homepage":"https://github.com/anastasiia-zolochevska/react-appinsights#readme","dependencies":{"applicationinsights-js":"^1.0.0","away":"^1.0.0","history":"^4.2.0"},"peerDependencies":{"react":">= 15.0.0"},"devDependencies":{"babel-cli":"^6.14.0","babel-preset-es2015":"^6.14.0","babel-preset-react":"^6.11.1","babel-preset-stage-0":"^6.5.0"},"gitHead":"00b6c76fc614a2f131a9217b863cd629d30d673f","_id":"react-appinsights@1.0.0","_shasum":"aa4b8d4831aa31eae5b55992b5294282979a3ce2","_from":".","_npmVersion":"3.10.6","_nodeVersion":"6.5.0","_npmUser":{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"},"dist":{"shasum":"aa4b8d4831aa31eae5b55992b5294282979a3ce2","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-1.0.0.tgz","integrity":"sha512-axoqKkcAot/Bx1SswblBS/M4e+zI6Kgl5EzE6qxNbpkxSEn2p6TvKFP4PGVH9h02eBioduFaV4uhxkx52P0NaA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADAeOKwRAbCCJaxD74ReM38chxx0uQS3Xd1B4rxrVZbAiBExzPXyQ9JvKrD6GUY9t/w64A1ZhEXhdYYy5P0De2aHQ=="}]},"maintainers":[{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-appinsights-1.0.0.tgz_1474577277661_0.5481811033096164"},"directories":{},"deprecated":"This package is no longer supported. Please use @microsoft/applicationinsights-react-js instead."},"1.0.1":{"name":"react-appinsights","version":"1.0.1","description":"React Application Insights module","main":"lib/index.js","scripts":{"build":"babel src --out-dir lib","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/anastasiia-zolochevska/react-appinsights.git"},"keywords":["react","AppInsights","telemetry"],"author":{"name":"Anastasia Zolochevska","email":"anastasiia.zolochevska@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/anastasiia-zolochevska/react-appinsights/issues"},"homepage":"https://github.com/anastasiia-zolochevska/react-appinsights#readme","dependencies":{"appinsights-usage":"^1.0.0","applicationinsights-js":"^1.0.0","away":"^1.0.0","history":"^4.2.0"},"peerDependencies":{"react":">= 15.0.0"},"devDependencies":{"babel-cli":"^6.14.0","babel-preset-es2015":"^6.14.0","babel-preset-react":"^6.11.1","babel-preset-stage-0":"^6.5.0"},"gitHead":"a5ea59befd90ccc1c8592e2991282f55fcfcd731","_id":"react-appinsights@1.0.1","_shasum":"e1d15726a949033632d6fcbd89923e38c7b28155","_from":".","_npmVersion":"3.10.6","_nodeVersion":"6.5.0","_npmUser":{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"},"dist":{"shasum":"e1d15726a949033632d6fcbd89923e38c7b28155","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-1.0.1.tgz","integrity":"sha512-HlbJfEdfxZ/AyVPC8UZ3aZ9eNao7rfBF/dHBfxvzQn5KVLqD/5Wd/fgFglYTfOwF8Dqeg5wYJSy4yvvx58cEhg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEYJzoYyXquge/xs0ASr51RFcwzUg31fbkaNsLl7rQQjAiEAyAyqfEFDIBMfwUa/c7+6w0kZfyg/zHj4AcD7jOvODUY="}]},"maintainers":[{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-appinsights-1.0.1.tgz_1474667805415_0.06791261699981987"},"directories":{},"deprecated":"This package is no longer supported. Please use @microsoft/applicationinsights-react-js instead."},"1.0.2":{"name":"react-appinsights","version":"1.0.2","description":"React Application Insights module","main":"lib/index.js","scripts":{"build":"babel src --out-dir lib","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/anastasiia-zolochevska/react-appinsights.git"},"keywords":["react","AppInsights","telemetry"],"author":{"name":"Anastasia Zolochevska","email":"anastasiia.zolochevska@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/anastasiia-zolochevska/react-appinsights/issues"},"homepage":"https://github.com/anastasiia-zolochevska/react-appinsights#readme","dependencies":{"appinsights-usage":"^1.0.1","applicationinsights-js":"^1.0.0","away":"^1.0.0","history":"^4.2.0"},"peerDependencies":{"react":">= 15.0.0"},"devDependencies":{"babel-cli":"^6.14.0","babel-preset-es2015":"^6.14.0","babel-preset-react":"^6.11.1","babel-preset-stage-0":"^6.5.0"},"gitHead":"65d9cc9a90e27db1377d0183a9eb06e607a6c89d","_id":"react-appinsights@1.0.2","_shasum":"49022ed1f802f47d0a163d0be67522b7b1ee82ba","_from":".","_npmVersion":"3.10.6","_nodeVersion":"6.5.0","_npmUser":{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"},"dist":{"shasum":"49022ed1f802f47d0a163d0be67522b7b1ee82ba","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-1.0.2.tgz","integrity":"sha512-LTr9ormigj+MYwItcaDypW4AwpzCklTZF5K6x+17HMLlsHg4IHWBNML94zPbMz9QNLp64RDfh9Rad4En2xZ/kA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5UuRq06iD3UhNZzfmqfLC405M2NONjq6wrCG0JM17/QIhAMM379zNzA8IIIcUEC43VhzfOMDu3i7XhrmM/51VdY/I"}]},"maintainers":[{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-appinsights-1.0.2.tgz_1474671525889_0.7881902512162924"},"directories":{},"deprecated":"This package is no longer supported. Please use @microsoft/applicationinsights-react-js instead."},"1.0.3":{"name":"react-appinsights","version":"1.0.3","description":"React Application Insights module","main":"lib/index.js","scripts":{"build":"babel src --out-dir lib","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/anastasiia-zolochevska/react-appinsights.git"},"keywords":["react","AppInsights","telemetry"],"author":{"name":"Anastasia Zolochevska","email":"anastasiia.zolochevska@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/anastasiia-zolochevska/react-appinsights/issues"},"homepage":"https://github.com/anastasiia-zolochevska/react-appinsights#readme","dependencies":{"appinsights-usage":"^1.0.1","applicationinsights-js":"^1.0.0","away":"^1.0.0","history":"^4.2.0"},"peerDependencies":{"react":">= 15.0.0"},"devDependencies":{"babel-cli":"^6.14.0","babel-preset-es2015":"^6.14.0","babel-preset-react":"^6.11.1","babel-preset-stage-0":"^6.5.0"},"gitHead":"a55098312816d312e7c95e41b93ab10e7866e73a","_id":"react-appinsights@1.0.3","_shasum":"fe05d82b5bacd3560e9a3f751db278534709c709","_from":".","_npmVersion":"3.10.6","_nodeVersion":"6.7.0","_npmUser":{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"},"dist":{"shasum":"fe05d82b5bacd3560e9a3f751db278534709c709","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-1.0.3.tgz","integrity":"sha512-WiQKF3E3c9cuyGkQeJ1X1M4zc3YT5OghY1UfngGQUql4HeRZoubBLfvX3klb5XXt5REfVLaAM0654XcdkSt6dQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCZ2K1dOg0JPKZCdXMt/4QmyGS50t5LFoA8lyHsEX0LgIhAJwhfqxiPUSZPd2p0sCrx3uqdKaYVXIkl1dyJeJ3gqxF"}]},"maintainers":[{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights-1.0.3.tgz_1515031060188_0.8746688137762249"},"directories":{},"deprecated":"This package is no longer supported. Please use @microsoft/applicationinsights-react-js instead."},"1.0.4":{"name":"react-appinsights","version":"1.0.4","description":"React Application Insights module","main":"lib/index.js","scripts":{"build":"babel src --out-dir lib","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/anastasiia-zolochevska/react-appinsights.git"},"keywords":["react","AppInsights","telemetry"],"author":{"name":"Anastasia Zolochevska","email":"anastasiia.zolochevska@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/anastasiia-zolochevska/react-appinsights/issues"},"homepage":"https://github.com/anastasiia-zolochevska/react-appinsights#readme","dependencies":{"appinsights-usage":"^1.0.1","applicationinsights-js":"^1.0.14","away":"^1.0.0","history":"^4.2.0"},"devDependencies":{"react":"15.6.1","babel-cli":"^6.14.0","babel-preset-es2015":"^6.14.0","babel-preset-react":"^6.11.1","babel-preset-stage-0":"^6.5.0"},"gitHead":"bcd58bce62376f9f9716f4de523296a651bf1089","_id":"react-appinsights@1.0.4","_shasum":"c48ff01b16df33da418d1c2ac378e5f30c04e3df","_from":".","_npmVersion":"3.10.6","_nodeVersion":"6.7.0","_npmUser":{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"},"dist":{"shasum":"c48ff01b16df33da418d1c2ac378e5f30c04e3df","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-1.0.4.tgz","integrity":"sha512-ETAg9vqQTBLXwph0W+5JcksFai9aEcaKy7oxonQqp9YP0KGLVmOmg2FvW8ogcUzBXE45OyALryK9tANw0kqRjw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDH42L7DyXzVHZrHaS4mc7kZLqbF7nmCB7uZNbalaGOmQIhALt5TRL7xdHIIJlMKqhVPWNgXvfWpNkHmGBhVArDz1Sp"}]},"maintainers":[{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights-1.0.4.tgz_1515031664812_0.5617802664637566"},"directories":{},"deprecated":"This package is no longer supported. Please use @microsoft/applicationinsights-react-js instead."},"2.0.0":{"name":"react-appinsights","version":"2.0.0","description":"Application Insights module for React applications","main":"dist/index.js","scripts":{"build":"babel src --out-dir dist-esm/src && babel test --out-dir dist-esm/test && rollup -c && rollup -c rollup.test.config.js","clean":"rimraf dist dist-* browser test-*","test":"jest","prepack":"npm install && npm run build"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","cloud","React","AppInsights","telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"homepage":"https://github.com/Azure/react-appinsights#readme","sideEffects":false,"dependencies":{"appinsights-usage":"^1.0.2","applicationinsights-js":"^1.0.20","away":"^1.0.0","history":"^4.7.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.2","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"^23.6.0","babel-loader":"^8.0.4","babel-plugin-transform-amd-to-commonjs":"^1.3.0","enzyme":"^3.7.0","enzyme-adapter-react-16":"^1.6.0","jest":"^23.6.0","react":"16.5.2","react-dom":"^16.5.2","react-test-renderer":"^16.5.2","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-multi-entry":"^2.0.2","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^3.0.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-visualizer":"^0.9.2"},"typings":"./react-appinsights.d.ts","gitHead":"068251365a9f60b07d249eabd1613df2abcebaab","_id":"react-appinsights@2.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.9.0","_npmUser":{"name":"pviotti","email":"skypixel@gmail.com"},"dist":{"integrity":"sha512-kKe1UuHS0fDIUGNMIBwtfQoLVhVenrzrr8Eca3Z1uz4hQvGbYQar4ee5IvWfBNTzFBG/jhzFawHEiHOjBQGKFg==","shasum":"9345195a5b8e105677ee8f67bdbd4787647bf179","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-2.0.0.tgz","fileCount":21,"unpackedSize":512227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9CwQCRA9TVsSAnZWagAAN5YQAIf7+yGPC8+F8RHnwfqn\n0DcpOBoaRwxvzaslGBHC934NzKwEs78Z4cb66ggBrQn5Pa28R71qigRWRgVL\n/0Qt5bRpXi0dzD38F1rUWot9NXlM/tmLLf3y45GTHuiHw23qk63RqnW24OCg\n9BlAajgR2Rh8aEIOUdnUQshpj1afL8S2ONrU9Usj6hATI7+mzhZbIDWsax56\nDp9mP2CXgQ5Miv71tfVp2SFO0WTzFLPFyn/XzZdbvI+XdcMi4r+cSlHXvEG0\nr2fO3Ve9wg+oIdq6uuBuo2NfIA64HfSuH2c7cMXD/qfjKNDHBBLxXi/mxBKb\nOZOQ4RgPo0FA2WVR5Gcm0BCl96wATnI0ihGcEySRHBvL8TN+x2q3QarzHmds\nEC6PWJc7ueSAmcUsgvf5G6j9kiNqcJUz5XutfIZvq+SQDypJ4vgjTBrWYLz/\nZG5U7e/1fOT553INkW5tjQ186kvP8CiZX4MTrZ582zOR/7hpDCQAuZLYax56\nzn6fiwyzYVIT0pNt61W+iDD8kKCc2+xVFimiPUB82NJxJC+ottpMhH/s5zrW\nwLE7vjqsVWwqwcfr4AErXPEzrVX18BK9sEhvlOJhyoTOjy68hKErlXxHJ4m7\n+bT502w8G4tDg2b8Mw6crjbChSkVAqpL3oh36Wpg0d1GO4k7vNYOc2+yB6Jd\nZf7r\r\n=u6eT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0O7RSnyy3YD8v/qQ+UfYGGyzgdaryCS80XDv0XbjZBwIgDfZkDDtphzRMnxBnSK+ynF8OY70HicycKRg7ooCz3iI="}]},"maintainers":[{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_2.0.0_1542728719740_0.8774807707798611"},"_hasShrinkwrap":false,"deprecated":"This package is no longer supported. Please use @microsoft/applicationinsights-react-js instead."},"2.0.1":{"name":"react-appinsights","version":"2.0.1","description":"Application Insights module for React applications","main":"dist/index.js","scripts":{"build":"babel src --out-dir dist-esm/src && babel test --out-dir dist-esm/test && rollup -c && rollup -c rollup.test.config.js","clean":"rimraf dist dist-* browser test-*","test":"jest","prepack":"npm install && npm run build","prettier":"prettier --write \"{src,test}/**/*.js\""},"husky":{"hooks":{"pre-commit":"pretty-quick --staged && npm test","post-commit":"git update-index -g"}},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","cloud","React","AppInsights","telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"homepage":"https://github.com/Azure/react-appinsights#readme","sideEffects":false,"dependencies":{"appinsights-usage":"^1.0.2","applicationinsights-js":"^1.0.20","away":"^1.0.0","history":"^4.7.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.2","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-jest":"^23.6.0","babel-loader":"^8.0.4","babel-plugin-transform-amd-to-commonjs":"^1.3.0","enzyme":"^3.7.0","enzyme-adapter-react-16":"^1.6.0","husky":"^1.2.0","jest":"^23.6.0","prettier":"^1.15.2","pretty-quick":"^1.8.0","react":"16.6.3","react-dom":"^16.5.2","react-test-renderer":"^16.5.2","rimraf":"^2.6.2","rollup":"^0.67.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-multi-entry":"^2.0.2","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^3.0.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-visualizer":"^0.9.2"},"typings":"./react-appinsights.d.ts","gitHead":"412e424f06094247a40e471bbff2fffc0cb6c72a","_id":"react-appinsights@2.0.1","_npmVersion":"6.4.1","_nodeVersion":"11.3.0","_npmUser":{"name":"pviotti","email":"skypixel@gmail.com"},"dist":{"integrity":"sha512-dWx+9hVdPf1iDJuyflgpho130i2aIUF4Pt8YDc/jYoLkQEGFXFSnCozLopqi4yUSu8TWrsvWQ5ZGbWQug/uDdA==","shasum":"280548b284c34b07a555ed5cd1ca3693de0900d4","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-2.0.1.tgz","fileCount":22,"unpackedSize":529334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcDmWCCRA9TVsSAnZWagAAyZ8QAJFUI38vVzA1lN+xiwAO\ngms6JcsIwfoEMsllA1kNDSoCkm73Vhfgw2SzKJUYj3UVvaN5gvW//YKJxInU\nqusWUohxmcZ4Jg7QDqN9+ffb1pVkfHHLOqjzYraxbNNYf/W56a2tW8+Cy+ut\nfNiIKutVKN3okk18MSP/L1U2iHbmYnjJlDvRuBfcyYPr4lRnClpZnrz10Bdb\nhpUFnRlrAKksNHNkITS030V5oN0tY6iV6mymqOG8tj8ELPZBoBOUdpx60lfB\nepPCzZDt60WRzZoGawayzdJO4ewcNd68Y7SXGfPDCo4bPbhV2ZsftAKNa3xz\nyPm8Z7Kuy5OJfx6YGxyCu4iMl8LgPO/A5OzXK7L+0foAqSbXjClW/fXVCCYr\nU2RiKTvmK5Q5kqmH0HUNUPKfBTydNN1l9jy2wC7p9o7kZgZPRaId1CvGzrtc\nJP/tycWJ5bHLjV/3uE4GU6V2h1dWw0sBmxt5VKPVo/c11gYRAhTYXp9vAcoo\ncNxgTw6efkhlDSJkjO6PWH+bc1x8iSQuw4X52Xd7cHVe+r8PGV6oQj61Vxqr\nMNrScFa+PeTKvExnguWlOHa/nDEToFm070e3c+jhXfczZR+TXl5K6Ry6etL4\nqOB9FSW8ahm8E1GuCInvBJUjurbSk2ysROZNURPcbXHbo+qak9iP6ruida9n\nGJo+\r\n=R49B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHlyucvxFVp3s5KOduSS0SeTzDzw7d1OE/x9a4s/27TsAiEAznfgkxK/f25n4f70sv2BMQoVFe9LUaASoHeyTMfi5HQ="}]},"maintainers":[{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_2.0.1_1544447361017_0.16548062407777353"},"_hasShrinkwrap":false,"deprecated":"This package is no longer supported. Please use @microsoft/applicationinsights-react-js instead."},"3.0.0-beta.0":{"name":"react-appinsights","version":"3.0.0-beta.0","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","pretest":"npm run build","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/history":"^4.7.2","@types/jest":"^23.3.10","@types/node":"^10.7.1","@types/react":"^16.7.17","jest":"^23.6.0","prettier":"^1.15.3","rimraf":"^2.6.2","rollup":"^0.67.4","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-json":"^3.1.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.0.2","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^3.0.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-visualizer":"^0.9.2","ts-jest":"^23.10.5","tslint":"^5.11.0","tslint-config-prettier":"^1.17.0","typescript":"^3.2.2"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^1.0.0-beta.8","history":"^4.7.2"},"gitHead":"a8d5487fd65af07f918db16101cfb037ec4e42b1","readme":"# react-appinsights\r\n\r\n[](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16)\r\n[](https://www.npmjs.com/package/react-appinsights)\r\n[](https://www.npmjs.com/package/react-appinsights)\r\n[](https://david-dm.org/Azure/react-appinsights)\r\n[](https://greenkeeper.io/)\r\n\r\nJavascript module to include [Application Insights][appinsights-js] in applications built with [React][react]. \r\nIt extends Application Insights with additional React-specific features:\r\n * tracking of router changes\r\n * React components usage statistics\r\n * API to extend the standard telemetry with additional dimensions\r\n\r\n## Installation\r\n\r\nWith npm:\r\n```bash\r\nnpm install --save react-appinsights\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights add the following to the entry point \r\nfile of your application (e.g. index.js):\r\n\r\n```javascript\r\nimport ReactAI from 'react-appinsights';\r\nReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'});\r\n```\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs] \r\nfor more details on how to obtain the instrumentation key.\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n \r\n```javascript\r\nimport ReactAI from 'react-appinsights';\r\nimport { Router } from 'react-router-dom';\r\nimport { createBrowserHistory } from 'history';\r\n\r\nconst history = createBrowserHistory()\r\nReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx', history: history});\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nReactAI.setContext({CorrelationId: 'some-unique-correlation-id', Referrer: document.referrer});\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights:\r\n\r\n![](\"https://cloud.githubusercontent.com/assets/3801171/18721651/43c4861e-7fe6-11e6-8541-3614111acc8f.png\"/)
\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = ReactAI.RootInstance;\r\n```\r\n\r\n#### The initialization settings has following properties available\r\n```typescript\r\ninterface IReactAISettings {\r\n instrumentationKey: string; // Required - get it from Azure Portal\r\n initialContext?: { [key: string]: any }; // If you want to initialize with custom context\r\n history?: History; // React router history - if supplied, it enables page view tracking\r\n debug?: boolean; // Debug mode: useful when debugging to see messages from the library displayed on the console\r\n}\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights. \r\n\r\n\r\n [react]: https://reactjs.org/\r\n [appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n [appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n [appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n [react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n","readmeFilename":"README.md","_id":"react-appinsights@3.0.0-beta.0","_npmVersion":"6.4.1","_nodeVersion":"11.3.0","_npmUser":{"name":"pviotti","email":"skypixel@gmail.com"},"dist":{"integrity":"sha512-AF0FFTMAZnhqZxAk7Wpf6vHQUpBL2tUQU9l/njcThXJTg/XS0IAxV/8LtpkMtANFEvTUfWi+FfZLYzuRiCdG/Q==","shasum":"36467db6057e4c4d4872eb5ac9f1162ad705b27d","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-beta.0.tgz","fileCount":33,"unpackedSize":723638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEpH8CRA9TVsSAnZWagAAj1kP/2YyQ9hvF0ies9QJez9G\nQlRMNwf7o2qR85gs9RQti5U9bbTv7TX6zlMDg6k5xI0GytLv/6TJeav4/zZE\nU7oMd7vOfJohpaALinOWi7hduB8gurOCb/72n0Be5CB1vYv08ugCuVdGLSH9\nie9h/vICZAfva0dm+NjoSIu9IM9yoz9IHLGaSISwI9zNd7ogBPAjPfe0bqnY\nIDql3Qpc73/7ZYBbhehwcsN7dsRGZMEYveHTa+ycLQ0ylgD0ybSe386uWrWy\nu/SeH1yNTwKxkSgSGK5hcRFRepNCAWK7wy/Vtmlm+geqaox5M6Y5aRpRi3k0\nOA0Uj/zinDesWm75v3IcGdKfRGyIo9LNZpKq2touE9uOgHWgethXLRCnBFdb\n/a8kdiLIwJazmJquL1pe9C9SMTauifXqlI0DAS+8NCMhuZElihNqToUDwRkU\n4uaYH46dL1Ai3mBP/TN1/tjz7A6GoxkCLBuXOtp1zuUmlb/uq8QAAy3cVvmN\nMiAxn7RdSH3I/Jqtq5MPHxfrQqqgXwMWlwggVGjV7lZkoBumGp1pWOvKDFae\n7siXZ5M7KMHnltuhE+WStWHnHb8pouAPbIMvteE37hxN7HnVyog90m0/dT5Q\nRrfsXj0akvdrfmf+ZeVFjTTGwAU1uzRzD79Ibnvw7fToDA50BtRsl/5QizMI\nafyU\r\n=/CQt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6V42D7ytPn+XBl2sRMLGGJEE9SoAuIsJxbIV40v1ExAIgHgP1ma4zvpylshhwpqQ31moLiQg0WpxmBN90GyD5SLE="}]},"maintainers":[{"name":"anastasiia-zolochevska","email":"anastasiia.zolochevska@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-beta.0_1544720891986_0.03699682951522698"},"_hasShrinkwrap":false},"3.0.0-beta.1":{"name":"react-appinsights","version":"3.0.0-beta.1","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","pretest":"npm run build","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/history":"^4.7.2","@types/jest":"^23.3.10","@types/node":"^10.12.15","@types/react":"^16.7.17","@types/react-dom":"^16.0.11","jest":"^23.6.0","prettier":"^1.15.3","rimraf":"^2.6.2","rollup":"^1.0.0","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-json":"^3.1.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-uglify":"^6.0.0","rollup-plugin-visualizer":"^0.9.2","ts-jest":"^23.10.5","tslint":"^5.12.0","tslint-config-prettier":"^1.17.0","typescript":"^3.2.2"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^1.0.0-beta.10","history":"^4.7.2","react":"^16.7.0","react-dom":"^16.7.0","react-idle-timer":"^4.1.3"},"readme":"# react-appinsights\r\n\r\n[](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16)\r\n[](https://www.npmjs.com/package/react-appinsights)\r\n[](https://www.npmjs.com/package/react-appinsights)\r\n[](https://david-dm.org/Azure/react-appinsights)\r\n[](https://greenkeeper.io/)\r\n\r\nJavascript module to include [Application Insights][appinsights-js] in applications built with [React][react]. \r\nIt extends Application Insights with additional React-specific features:\r\n * tracking of router changes\r\n * React components usage statistics\r\n * API to extend the standard telemetry with additional dimensions\r\n\r\n## Installation\r\n\r\nWith npm:\r\n```bash\r\nnpm install --save react-appinsights\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights add the following to the entry point \r\nfile of your application (e.g. index.js):\r\n\r\n```javascript\r\nimport ReactAI from 'react-appinsights';\r\nReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'});\r\n```\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs] \r\nfor more details on how to obtain the instrumentation key.\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n \r\n```javascript\r\nimport ReactAI from 'react-appinsights';\r\nimport { Router } from 'react-router-dom';\r\nimport { createBrowserHistory } from 'history';\r\n\r\nconst history = createBrowserHistory()\r\nReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx', history: history});\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nReactAI.setContext({CorrelationId: 'some-unique-correlation-id', Referrer: document.referrer});\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights:\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = ReactAI.RootInstance;\r\n```\r\n\r\n#### The initialization settings has following properties available\r\n```typescript\r\ninterface IReactAISettings {\r\n instrumentationKey: string; // Required - get it from Azure Portal\r\n initialContext?: { [key: string]: any }; // If you want to initialize with custom context\r\n history?: History; // React router history - if supplied, it enables page view tracking\r\n debug?: boolean; // Debug mode: useful when debugging to see messages from the library displayed on the console\r\n}\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights. \r\n\r\n\r\n [react]: https://reactjs.org/\r\n [appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n [appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n [appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n [react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n","readmeFilename":"README.md","gitHead":"91478b4344e33946560025be897de48615a2285b","_id":"react-appinsights@3.0.0-beta.1","_npmVersion":"6.5.0","_nodeVersion":"10.13.0","_npmUser":{"name":"hiraldesai","email":"hiraldesai@gmail.com"},"dist":{"integrity":"sha512-4FiuTBtyKITrYUUgtLjrsCcLZc6QSziOTuLabTfSA17fY/OTiWCx47OnB4qegYqA1hnH8TiuxWZh+n0B3/+WPA==","shasum":"a686d38ba146973a7ef4779fcbc3fb9e55a24568","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-beta.1.tgz","fileCount":39,"unpackedSize":998507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLqAwCRA9TVsSAnZWagAART8P/39K6ZmtRMJkT/qKK3V6\nzKLeoHv56XqUG38fjjLKJYz1uIhRxGqYq3MGBaePvBA9V0Ca/trAWMIPeE+s\ncBV3Crdl4DmW66flb6Vzc0VVgJCTNivGXlAItah0X2j8W/nT832qjRNZMcnj\naO1DAK0cdpyiSKlNXA0IMHA+LcwN99Gzp9RcyqRLEeurbSE3U2HavMIC8mf8\nS0p5hU31znm8Ao0uzBxKh/9SyuxI6HsTMEVt8BT6Ga9xYg5dNolDiHc8BjWu\n6JIvCHo3iG0HovPcuC2G6QLbGC/BoPan2A5Z9ASDZnK14O+RGlHMIzR6Eaav\n8pnKVtwUmkHhFWfqrkfVHxOz8U/nYB6VjVnRGhLG/5kDZBJ7Y/lZ00PiOsPs\nZtuTGMpQjLeS7pu01Ok9pzHwaNco8KFYL3oVMzOTYpkCkOCfwtrae9CRRutq\nTb7XSkzbJ10IsNF3HRBuYmQrxk0Smv231NLdqB36KfJBE5KZ9slKtRGhvbre\nr3FOvH7SwVZw7Q9ZoS0KikHCqm00omJFKuVQWJwnz2Fs6sfOaPhihlqlJtho\nklIArcBFWfRuySkZlcZ1f8Aicl0RkVsxqAwTv8+1JHBjsykQRGlffnwPggq3\nVpaARa9hTCvDyRwF3oVnNfpWs5fRoqDQlFpddD7P7aExy/Bo2Yc5UR/ePsaF\nXHsK\r\n=PaF2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwGJMtgU4WV0Q8LVveAsXr56Jk85UD6/EUsk/0FZf9MAiEA6bTMxQkkRLfdlnJO0c3u2pcXQ2NW/XLWipr6cMtYKNE="}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-beta.1_1546559536046_0.6213685283407835"},"_hasShrinkwrap":false},"3.0.0-beta.2":{"name":"react-appinsights","version":"3.0.0-beta.2","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","test-watch":"jest --config jestconfig.json --watch","pretest":"npm run build","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/enzyme":"^3.1.15","@types/enzyme-adapter-react-16":"^1.0.3","@types/history":"^4.7.2","@types/jest":"^23.3.10","@types/node":"^10.12.15","@types/react":"^16.7.17","@types/react-dom":"^16.0.11","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.7.1","jest":"^23.6.0","prettier":"^1.15.3","react-dom":"^16.7.0","rimraf":"^2.6.2","rollup":"^1.0.0","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-json":"^3.1.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-uglify":"^6.0.0","rollup-plugin-visualizer":"^0.9.2","ts-jest":"^23.10.5","tslint":"^5.12.0","tslint-config-prettier":"^1.17.0","typescript":"^3.2.2"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^1.0.0-beta.10","history":"^4.7.2","react":"^16.7.0"},"readme":"# react-appinsights\r\n\r\n[](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16)\r\n[](https://www.npmjs.com/package/react-appinsights)\r\n[](https://www.npmjs.com/package/react-appinsights)\r\n[](https://david-dm.org/Azure/react-appinsights)\r\n[](https://greenkeeper.io/)\r\n\r\nJavascript module to include [Application Insights][appinsights-js] in applications built with [React][react]. \r\nIt extends Application Insights with additional React-specific features:\r\n * tracking of router changes\r\n * React components usage statistics\r\n * API to extend the standard telemetry with additional dimensions\r\n\r\n## Installation\r\n\r\nWith npm:\r\n```bash\r\nnpm install --save react-appinsights\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights add the following to the entry point \r\nfile of your application (e.g. index.js):\r\n\r\n```javascript\r\nimport ReactAI from 'react-appinsights';\r\nReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'});\r\n```\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs] \r\nfor more details on how to obtain the instrumentation key.\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n \r\n```javascript\r\nimport ReactAI from 'react-appinsights';\r\nimport { Router } from 'react-router-dom';\r\nimport { createBrowserHistory } from 'history';\r\n\r\nconst history = createBrowserHistory()\r\nReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx', history: history});\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nReactAI.setContext({CorrelationId: 'some-unique-correlation-id', Referrer: document.referrer});\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights:\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = ReactAI.RootInstance;\r\n```\r\n\r\n#### The initialization settings has following properties available\r\n```typescript\r\ninterface IReactAISettings {\r\n instrumentationKey: string; // Required - get it from Azure Portal\r\n initialContext?: { [key: string]: any }; // If you want to initialize with custom context\r\n history?: History; // React router history - if supplied, it enables page view tracking\r\n debug?: boolean; // Debug mode: useful when debugging to see messages from the library displayed on the console\r\n}\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights. \r\n\r\n\r\n [react]: https://reactjs.org/\r\n [appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n [appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n [appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n [react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n","readmeFilename":"README.md","gitHead":"da1a5aa5ff60214fdfbafa44541f7e993d37cd43","_id":"react-appinsights@3.0.0-beta.2","_npmVersion":"6.5.0","_nodeVersion":"10.13.0","_npmUser":{"name":"hiraldesai","email":"hiraldesai@gmail.com"},"dist":{"integrity":"sha512-FvH8Q2D+QITQo3Fea46sKWewWKaFCVJmaCORM5c3RsJw4UsWBbf1f6Cmpczk8rSe+o0w8R8q7QQeubyPkDP5zw==","shasum":"7e727e28713c18607ba0a6030f2b8840f06e6414","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-beta.2.tgz","fileCount":43,"unpackedSize":996897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN4I0CRA9TVsSAnZWagAAOwEP/1c0qL9ELDkTsuY2c2kW\nyoK1jYNZ/XFXuiQn5guSzmjHeO4UQYfuTdKSw5cCYz49ueqaPCXOViycrNlQ\nhd9GATM8/9t1rBxQPHoT+8fJPX2uu6HesKaHlPP7ZEls5S+h+WNsP2fRc4BN\nbXlTc1pRfhF4jRlilAOW28axCulC3qWEvcyZoSF8wsxbT8Whl8RFWAUkzYm2\nfbGCsJTQ75eOD/NbXVKvxNNoUS8bMSo9XjQ8lqyMLx+Ox98p3DbqKShbyNiv\n3+b8vfXhaxu+H78Q95FlAWQApxv3jUCLRKjnKU1+g6sje2KA9KSsqjhOi+vj\nj9JjFxK8Pdf2pAzCYyJltOasV41uaXe+zmE/0OfXSdkWuLFuRCzWKj8ypTFq\nQlAuhbzCQSjmnqVJfx8oa88x96QZZc6uRBqz6hWXCtlv7hbyMdTJH68mCzqQ\nVGZnBEB5qjzEUeNm9Be5sR4kbsZQuH8x6aSeCQ5lVZE0b4hKeeMMV9XNFMdb\nBO41GS5y5l7Rz3SvQD/+S/Lsq8SygwApEyKuJYLjCnuy3ApzYzB8p3v5TJH0\n3ZunwUaCQsS4aIHUTEnyqWtQMcRAsSt6CGFjJXI9aNQgESKOWAAdkZ954Ddh\nX1LpcA7J53jn3xan+2PeB12A5YS3uNbK+a14W8ttEvhCkvGzXN0v97IJCM4e\nTE7G\r\n=IcoT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWNSmHAHIa3XKPJqWFuYHe566VmSYOuUrNRCcA0PMu7gIgbnNanDDvIZocYTkXHMxY2b8lwTftYSv5nt2EoOhvVbc="}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-beta.2_1547141683911_0.5434085066448049"},"_hasShrinkwrap":false},"3.0.0-beta.3":{"name":"react-appinsights","version":"3.0.0-beta.3","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","test-watch":"jest --config jestconfig.json --watch","pretest":"npm run build","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/enzyme":"^3.1.15","@types/enzyme-adapter-react-16":"^1.0.3","@types/history":"^4.7.2","@types/jest":"^23.3.10","@types/node":"^10.12.15","@types/react":"^16.7.17","@types/react-dom":"^16.0.11","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.7.1","jest":"^23.6.0","prettier":"^1.15.3","react-dom":"^16.7.0","rimraf":"^2.6.2","rollup":"^1.0.0","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-json":"^3.1.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^4.0.1","rollup-plugin-uglify":"^6.0.0","rollup-plugin-visualizer":"^0.9.2","ts-jest":"^23.10.5","tslint":"^5.12.0","tslint-config-prettier":"^1.17.0","typescript":"^3.2.2"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^1.0.0-beta.10","history":"^4.7.2","react":"^16.7.0"},"gitHead":"6108f411683314aedeae41aec6cf91a0b743a585","readme":"# react-appinsights\r\n\r\n[](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [](https://www.npmjs.com/package/react-appinsights) [](https://www.npmjs.com/package/react-appinsights) [](https://david-dm.org/Azure/react-appinsights) [](https://greenkeeper.io/)\r\n\r\nJavascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react]. \r\n`react-appinsights` extends Application Insights with additional React-specific features:\r\n\r\n- tracking of router changes\r\n- React components usage statistics\r\n- API to extend the standard telemetry with additional dimensions\r\n\r\n## Installation\r\n\r\nUsing npm:\r\n\r\n```bash\r\nnpm install --save react-appinsights\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights add the following to the entry point\r\nfile of your application (e.g. index.js):\r\n\r\n```javascript\r\nimport { ReactAI } from \"react-appinsights\";\r\nReactAI.initialize({ instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\" });\r\n```\r\n\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs]\r\nfor more details on how to obtain the instrumentation key.\r\n\r\nIn addition to `instrumentationKey`, `IReactAISettings` has following non-mandatory configuration options:\r\n\r\n```typescript\r\ninterface IReactAISettings {\r\n initialContext?: { [key: string]: any }; // Initial context to initialize with\r\n history?: History; // React router history - to enable page view tracking\r\n debug?: boolean; // Debug mode: displays debug messages from ReactAI in console\r\n}\r\n```\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n```javascript\r\nimport ReactAI from \"react-appinsights\";\r\nimport { Router } from \"react-router-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\n\r\nconst history = createBrowserHistory();\r\nReactAI.init({ instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\", history: history });\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Enable React components usage tracking\r\n\r\nTo enable React components usage tracking, apply the `withAITracking` higher-order\r\ncomponent function.\r\n\r\n```javascript\r\nimport { withAITracking } from 'react-appinsights';\r\n\r\nclass MyComponent extends React.Component {\r\n ...\r\n}\r\n\r\nexport default withAITracking(MyComponent);\r\n```\r\n\r\nTo change the name string of the component that appears in Application Insights,\r\nyou can pass a custom name as second argument of `withAITracking`.\r\n\r\n```javascript\r\nexport default withAITracking(MyComponent, \"CustomMyComponentName\");\r\n```\r\n\r\nIt will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.\r\nHowever, in order to make this more accurate, it will subtract the time in which the user was idle.\r\nIn other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.\r\n\r\nTo see this metric in the Azure portal you need to navigate to the Application Insights resource, select \"Metrics\" tab and configure the empty charts to display Custom metric named \"React Component Engaged Time (seconds)\", select aggregation (sum, avg, etc.) of your liking and apply split by \"Component Name\".\r\n\r\n\r\n\r\nYou can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select \"Analytics\" from the top menu of the Overview tab and run your query.\r\n\r\n\r\n\r\nPlease note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nReactAI.setContext({ CorrelationId: \"some-unique-correlation-id\", Referrer: document.referrer });\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = ReactAI.rootInstance;\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.\r\n\r\n## Advanced configuration\r\n\r\nThe initialization function is an [intersection type][intersection-types] made of `IReactAISettings & IConfiguration & IConfig` - with `IReactAISettings` provided by the `ReactAI` library and rest of the configuration provided by [Application Insights][appinsights-js].\r\n\r\nEssentially, `instrumentationKey` is the only mandatory configuration option but initialization with intersection type allows you to leverage features of both libraries, as in the following example:\r\n\r\n```javascript\r\nReactAI.initialize({\r\n // ReactAI config\r\n instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\",\r\n debug: true,\r\n history: history,\r\n // AI specific config\r\n disableCorrelationHeaders: false,\r\n disableFetchTracking: false,\r\n enableCorsCorrelation: true,\r\n isCookieUseDisabled: true\r\n});\r\n```\r\n\r\n[react]: https://reactjs.org/\r\n[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n[intersection-types]: https://www.typescriptlang.org/docs/handbook/advanced-types.html\r\n","readmeFilename":"README.md","_id":"react-appinsights@3.0.0-beta.3","_npmVersion":"6.5.0","_nodeVersion":"10.13.0","_npmUser":{"name":"hiraldesai","email":"hiraldesai@gmail.com"},"dist":{"integrity":"sha512-AI525RqSd0JIsTTPDai8xdaaUV/c/5fjL9cJ7zVyJI3u+JTacYigYB4oBwwDLywfu8sNrBZmy2Lh0/VQm3etYQ==","shasum":"1d800f33962841a5dd4676077fb9dc12b0d4d65a","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-beta.3.tgz","fileCount":39,"unpackedSize":993007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSNJzCRA9TVsSAnZWagAA+xsP+wbVqetOJcxcYouU6nJq\nbQCsVVNGWXjhrXMz6EMS8OfmP0JxG0BM9xwdJed2HM6PP/BKkTrkV5fKH+lh\niXUzY/krZa6fqdYlMDl6G/qr70ndcWQ6lpKS4Vw1ZMRbCKYT7VZ+v+i41gCM\n99DQzMafZ9Lcz5qWaPvyMD7723bszWRYT1flk7QbEKkVGjfOHbm9yU9rxvUk\nowpYGJ0hjrTB88CCITXryzdWIP9ao9RolF82Ys6Eec7XQJoZHy7Zxo5LRpse\nBV9kWT9cwO7SZ+r/nfQ0cP1X38ha/Y2aFlL5HUT2MOXUqvz9t+G/NcGZV/up\nRV0NvELZLXd/q4IshTHh+oJwlRu6lsty/0xj7JzLJBE6sIWEwnlBAcSKQT0i\nUl2810EnocvaVZT5ugnJsE9yXBYcTlCGRH5KsYcXETu7cTiXdlKBk7uyEGOh\nDWQaqQfMfWAKZJw6y8TBtDsDDy/WUkP8l4SnMeGuPbj3AlbnmAOXEae4AvW6\nswIbjih801jwb2iPBMwXQP99h3o77NX3FsRKFDKZhRMfyo0/652YCA9bQ+Q/\niN4WMMitQ31baHzJNlDzmAw5ip/fEXxeXktTco3PztMj9Ld/Sv4zztG2PnYj\nB16nbABPB+ozz803EoitzV7UiZvjO+H8Y5/Y/cY87FPmmI8sYXBJy+LjazOt\njx4M\r\n=7rZc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpilLZOJWBf2nJQWnHVzhx+3r1YkpVF57MqMF406+A2AiEA4qY/a/CMZ5UBxbJ45o5rXFohVcWn0c4ZsI5aawWdibw="}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-beta.3_1548276338652_0.910643764263452"},"_hasShrinkwrap":false},"2.0.2":{"name":"react-appinsights","version":"2.0.2","description":"Application Insights module for React applications","main":"dist/index.js","scripts":{"build":"babel src --out-dir dist-esm/src && babel test --out-dir dist-esm/test && rollup -c && rollup -c rollup.test.config.js","clean":"rimraf dist dist-* browser test-*","test":"jest","prepack":"npm install && npm run build","prettier":"prettier --write \"{src,test}/**/*.js\""},"husky":{"hooks":{"pre-commit":"pretty-quick --staged && npm test","post-commit":"git update-index -g"}},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","cloud","React","AppInsights","telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"homepage":"https://github.com/Azure/react-appinsights#readme","sideEffects":false,"dependencies":{"appinsights-usage":"^1.0.2","applicationinsights-js":"^1.0.20","away":"^1.0.0","history":"^4.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.3.3","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.1.0","babel-loader":"^8.0.5","babel-plugin-transform-amd-to-commonjs":"^1.4.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.9.1","husky":"^1.3.1","jest":"^24.1.0","prettier":"^1.16.4","pretty-quick":"^1.10.0","react":"^16.8.2","react-dom":"^16.8.2","rimraf":"^2.6.3","rollup":"^1.2.2","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^4.0.4","rollup-plugin-uglify":"^6.0.2","rollup-plugin-visualizer":"^0.9.2"},"typings":"./react-appinsights.d.ts","gitHead":"be95bea07895c1f1556542ac78fd365e1b4e8a8c","_id":"react-appinsights@2.0.2","_nodeVersion":"11.9.0","_npmVersion":"6.8.0","dist":{"integrity":"sha512-1zEWrmbD3YXtzvSaTmdzB+z7GuiMFe81Lok5WGX+TWVakrosyWH4TZL59WlqGczZX1oXX0XInkyFWD+OGyEOpg==","shasum":"09ef72f53b1712009b8947ec876b8d15991a255c","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-2.0.2.tgz","fileCount":22,"unpackedSize":544593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbU6qCRA9TVsSAnZWagAAjtQP/1mXgL2DlZZ8DTVi3WnW\nJ+DYL8wtia88g97BLmSaO+KE4lmFzwIVU0Y/QzU52Tsa0N20t0tcqdHLBlxP\nIB4LLam3Dmfa5Fdo7iedQx7zfXhsbKBws/pqvY/+ehIeVqcP0xJU4gBNjIvN\nPNAJI3FxgsLDsVMddTkc7B9W73RcYwFEMo1C/5AAoi0wiqPhTIbm2jEIByt8\nrP+2lB0Yi2ZAwVeBKJO1FXbldTlgGVl9eUTWzwv7QzhoeFv61+1hI56QTjxm\nIN5aEXg1xmwMHXOwa1oYimTo7Y1y50eWjA4teL/Ijtv6LKybIzFGZrKsAJJX\nLRs3qm1m0yEMVUoYYgijIYDk8Slum+/s4JcNA+bVi52rgdPasWnMgXrfOQ7I\nAJmGpKfw+ZBRJSEV1hGPuivSr1jzcNV54pXTHWtkkkU6YjbYOd360+cRqT1l\n67PiTQK1sRMkTywSSoxFGebyZsdp3U1QRSHlKURh93qVVJBRjFwqXFbuRE+V\n0oYbymqLR/uP6CVt35jPECb77Nu+MHj3fQfqcfVGgufrLN6pauAjqh/NAIik\n26b5kAzkBIqSHTm23KX9iBBojnuz6buaTLz0K/mxsDlHsLNBn0Q9YC1LGDwh\nOaI5n5daTp4jqSKG/THmBMqSsvR8fKa+Xmae84VZHEjiEuzND9jiT8szeJkh\nmrPu\r\n=6bJz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHaEUSJI/JzWNWzxhFb/FWmcOHPS2OWb6hsjcvr4pWDAIhAKDZGZu04KvC+lQ9dJ4UPKlY1szC1v+BHim4LGi900Bo"}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"_npmUser":{"name":"pviotti","email":"skypixel@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_2.0.2_1550667433528_0.6998934730622137"},"_hasShrinkwrap":false,"deprecated":"This package is no longer supported. Please use @microsoft/applicationinsights-react-js instead."},"3.0.0-beta.4":{"name":"react-appinsights","version":"3.0.0-beta.4","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","test-watch":"jest --config jestconfig.json --watch","pretest":"npm run build","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/enzyme":"^3.1.18","@types/enzyme-adapter-react-16":"^1.0.4","@types/history":"^4.7.2","@types/jest":"^23.3.14","@types/node":"^10.12.26","@types/react":"^16.8.4","@types/react-dom":"^16.8.2","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.9.1","jest":"^24.1.0","prettier":"^1.16.4","react-dom":"^16.8.2","rimraf":"^2.6.2","rollup":"^1.2.2","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-json":"^3.1.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^4.0.4","rollup-plugin-uglify":"^6.0.2","rollup-plugin-visualizer":"^0.9.2","ts-jest":"^24.0.0","tslint":"^5.12.1","tslint-config-prettier":"^1.18.0","typescript":"^3.3.3"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^1.0.0-beta.11","history":"^4.7.2","react":"^16.8.2"},"gitHead":"436364b6f6517cb2f615eb2eb372da05d69e6dfb","readme":"# react-appinsights\r\n\r\n[](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [](https://www.npmjs.com/package/react-appinsights) [](https://www.npmjs.com/package/react-appinsights) [](https://david-dm.org/Azure/react-appinsights) [](https://greenkeeper.io/)\r\n\r\nJavascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react]. \r\n`react-appinsights` extends Application Insights with additional React-specific features:\r\n\r\n- tracking of router changes\r\n- React components usage statistics\r\n- API to extend the standard telemetry with additional dimensions\r\n\r\n## Installation\r\n\r\nUsing npm:\r\n\r\n```bash\r\nnpm install --save react-appinsights\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights add the following to the entry point\r\nfile of your application (e.g. index.js):\r\n\r\n```javascript\r\nimport { ReactAI } from \"react-appinsights\";\r\nReactAI.initialize({ instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\" });\r\n```\r\n\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs]\r\nfor more details on how to obtain the instrumentation key.\r\n\r\nIn addition to `instrumentationKey`, `IReactAISettings` has following non-mandatory configuration options:\r\n\r\n```typescript\r\ninterface IReactAISettings {\r\n initialContext?: { [key: string]: any }; // Initial context to initialize with\r\n history?: History; // React router history - to enable page view tracking\r\n debug?: boolean; // Debug mode: displays debug messages from ReactAI in console\r\n}\r\n```\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n```javascript\r\nimport ReactAI from \"react-appinsights\";\r\nimport { Router } from \"react-router-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\n\r\nconst history = createBrowserHistory();\r\nReactAI.init({ instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\", history: history });\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Enable React components usage tracking\r\n\r\nTo enable React components usage tracking, apply the `withAITracking` higher-order\r\ncomponent function.\r\n\r\n```javascript\r\nimport { withAITracking } from 'react-appinsights';\r\n\r\nclass MyComponent extends React.Component {\r\n ...\r\n}\r\n\r\nexport default withAITracking(MyComponent);\r\n```\r\n\r\nTo change the name string of the component that appears in Application Insights,\r\nyou can pass a custom name as second argument of `withAITracking`.\r\n\r\n```javascript\r\nexport default withAITracking(MyComponent, \"CustomMyComponentName\");\r\n```\r\n\r\nIt will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.\r\nHowever, in order to make this more accurate, it will subtract the time in which the user was idle.\r\nIn other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.\r\n\r\nTo see this metric in the Azure portal you need to navigate to the Application Insights resource, select \"Metrics\" tab and configure the empty charts to display Custom metric named \"React Component Engaged Time (seconds)\", select aggregation (sum, avg, etc.) of your liking and apply split by \"Component Name\".\r\n\r\n\r\n\r\nYou can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select \"Analytics\" from the top menu of the Overview tab and run your query.\r\n\r\n\r\n\r\nPlease note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nReactAI.setContext({ CorrelationId: \"some-unique-correlation-id\", Referrer: document.referrer });\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = ReactAI.rootInstance;\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.\r\n\r\n## Advanced configuration\r\n\r\nThe initialization function is an [intersection type][intersection-types] made of `IReactAISettings & IConfiguration & IConfig` - with `IReactAISettings` provided by the `ReactAI` library and rest of the configuration provided by [Application Insights][appinsights-js].\r\n\r\nEssentially, `instrumentationKey` is the only mandatory configuration option but initialization with intersection type allows you to leverage features of both libraries, as in the following example:\r\n\r\n```javascript\r\nReactAI.initialize({\r\n // ReactAI config\r\n instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\",\r\n debug: true,\r\n history: history,\r\n // AI specific config\r\n disableCorrelationHeaders: false,\r\n disableFetchTracking: false,\r\n enableCorsCorrelation: true,\r\n isCookieUseDisabled: true\r\n});\r\n```\r\n\r\n[react]: https://reactjs.org/\r\n[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n[intersection-types]: https://www.typescriptlang.org/docs/handbook/advanced-types.html\r\n","readmeFilename":"README.md","_id":"react-appinsights@3.0.0-beta.4","_nodeVersion":"11.9.0","_npmVersion":"6.8.0","dist":{"integrity":"sha512-Fk8qbMLij3aablsLN8M3o6vZ2oduKJK0bH6AusmoTf1KSxb9DmpXc0MZHpHslyGmwEWedcIjAqlF1mIq/qc2uQ==","shasum":"d5530f8751c6762e124f9170d7522346dbef15f4","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-beta.4.tgz","fileCount":39,"unpackedSize":1003504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbY5tCRA9TVsSAnZWagAAUR4P+QGdwz/Ghj8UV3ITieAt\nHK/RyiW1KiHCOyVeiDi2MMxVX3kmRGGvrWnVNy2rJpkX35d17jsCoxkmJVk3\nJ3fPTwvEhSRmKDOOEsa9U+YUug1o4dw+w+eDR0U6RcVgCH7jqyaJ6Oh5KQPn\nSv5k1y9PPenhLdGUbCWZjJ5w4n0QtWIwtqPXNtChmQ9l1If5z8s0o1Ws7Gs2\nbJPSp//vACwWmgSh7iss3ezermIA3oWTiO5woVjyY1bxANmTQZ6G6/PnESTg\nZib0z7uWzZcLsTxdqs3F4iy9+O4IyaG/j9umlTJfP0qWuQJPqetX/O3on09L\n4hu4Jox2hAtQz9Xv4p5BnhXnubvAcpciXYV+3Drnuc2Ndpj0TCVet2L+jK+s\ndr+6oK1fMp8Z5pcyl9d067CquW63jpB4Q7WWt/fi1/KhfATF0ekPiqo32atQ\n6Gae4oexZtjTVyyG7qryF/AH9rZeyalm2wPTqcmj+A8pkoi8IlHQnleK+oqR\neaIrP7FUWTUsgwLAyvWhGlCKAWsqCw3alc9/NurhDHuqlAXF6+e1KtJj2yL9\nGxaI7UeMPvcl/t/WIpjwZ1gMdFItsQ8YuHRKo+xQeYvY/rW4or0o1oYuS5H+\nwuBrxa3x5K5HJzTTaMvRV7jwzYtneq99dUnzmqG3h5KnxDl020CZbbSWTSGu\nviG7\r\n=8TUu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF67a/AmXPWtqgP1h67jS+gBgwi6B/O/GFSLSH4a+dyfAiBGFlzyFBfNsYkQz/rXBUuOOyA1PaTD8+87XFGRcf0nSA=="}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"_npmUser":{"name":"pviotti","email":"skypixel@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-beta.4_1550683756506_0.17022127817111588"},"_hasShrinkwrap":false},"3.0.0-beta.5":{"name":"react-appinsights","version":"3.0.0-beta.5","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","test-watch":"jest --config jestconfig.json --watch","pretest":"npm run build","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/enzyme":"^3.1.18","@types/enzyme-adapter-react-16":"^1.0.4","@types/history":"^4.7.2","@types/jest":"^23.3.14","@types/node":"^10.12.26","@types/react":"^16.8.4","@types/react-dom":"^16.8.2","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.9.1","jest":"^24.1.0","prettier":"^1.16.4","react-dom":"^16.8.2","rimraf":"^2.6.2","rollup":"^1.2.2","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-json":"^3.1.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^4.0.4","rollup-plugin-uglify":"^6.0.2","rollup-plugin-visualizer":"^0.9.2","ts-jest":"^24.0.0","tslint":"^5.12.1","tslint-config-prettier":"^1.18.0","typescript":"^3.3.3"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^1.0.0-beta.11","history":"^4.7.2","react":"^16.8.2"},"gitHead":"dfbb9d9a3c04073c455343176614c3db7e889568","readme":"# react-appinsights\r\n\r\n[](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [](https://www.npmjs.com/package/react-appinsights) [](https://www.npmjs.com/package/react-appinsights) [](https://david-dm.org/Azure/react-appinsights) [](https://greenkeeper.io/)\r\n\r\nJavascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react]. \r\n`react-appinsights` extends Application Insights with additional React-specific features:\r\n\r\n- tracking of router changes\r\n- React components usage statistics\r\n- API to extend the standard telemetry with additional dimensions\r\n\r\n## Installation\r\n\r\nUsing npm:\r\n\r\n```bash\r\nnpm install --save react-appinsights\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights add the following to the entry point\r\nfile of your application (e.g. index.js):\r\n\r\n```javascript\r\nimport { ReactAI } from \"react-appinsights\";\r\nReactAI.initialize({ instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\" });\r\n```\r\n\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs]\r\nfor more details on how to obtain the instrumentation key.\r\n\r\nIn addition to `instrumentationKey`, `IReactAISettings` has following non-mandatory configuration options:\r\n\r\n```typescript\r\ninterface IReactAISettings {\r\n initialContext?: { [key: string]: any }; // Initial context to initialize with\r\n history?: History; // React router history - to enable page view tracking\r\n debug?: boolean; // Debug mode: displays debug messages from ReactAI in console\r\n}\r\n```\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n```javascript\r\nimport ReactAI from \"react-appinsights\";\r\nimport { Router } from \"react-router-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\n\r\nconst history = createBrowserHistory();\r\nReactAI.init({ instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\", history: history });\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Enable React components usage tracking\r\n\r\nTo enable React components usage tracking, apply the `withAITracking` higher-order\r\ncomponent function.\r\n\r\n```javascript\r\nimport { withAITracking } from 'react-appinsights';\r\n\r\nclass MyComponent extends React.Component {\r\n ...\r\n}\r\n\r\nexport default withAITracking(MyComponent);\r\n```\r\n\r\nTo change the name string of the component that appears in Application Insights,\r\nyou can pass a custom name as second argument of `withAITracking`.\r\n\r\n```javascript\r\nexport default withAITracking(MyComponent, \"CustomMyComponentName\");\r\n```\r\n\r\nIt will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.\r\nHowever, in order to make this more accurate, it will subtract the time in which the user was idle.\r\nIn other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.\r\n\r\nTo see this metric in the Azure portal you need to navigate to the Application Insights resource, select \"Metrics\" tab and configure the empty charts to display Custom metric named \"React Component Engaged Time (seconds)\", select aggregation (sum, avg, etc.) of your liking and apply split by \"Component Name\".\r\n\r\n\r\n\r\nYou can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select \"Analytics\" from the top menu of the Overview tab and run your query.\r\n\r\n\r\n\r\nPlease note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nReactAI.setContext({ CorrelationId: \"some-unique-correlation-id\", Referrer: document.referrer });\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = ReactAI.rootInstance;\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.\r\n\r\n## Advanced configuration\r\n\r\nThe initialization function is an [intersection type][intersection-types] made of `IReactAISettings & IConfiguration & IConfig` - with `IReactAISettings` provided by the `ReactAI` library and rest of the configuration provided by [Application Insights][appinsights-js].\r\n\r\nEssentially, `instrumentationKey` is the only mandatory configuration option but initialization with intersection type allows you to leverage features of both libraries, as in the following example:\r\n\r\n```javascript\r\nReactAI.initialize({\r\n // ReactAI config\r\n instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\",\r\n debug: true,\r\n history: history,\r\n // AI specific config\r\n disableCorrelationHeaders: false,\r\n disableFetchTracking: false,\r\n enableCorsCorrelation: true,\r\n isCookieUseDisabled: true\r\n});\r\n```\r\n\r\n[react]: https://reactjs.org/\r\n[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n[intersection-types]: https://www.typescriptlang.org/docs/handbook/advanced-types.html\r\n","readmeFilename":"README.md","_id":"react-appinsights@3.0.0-beta.5","_nodeVersion":"11.9.0","_npmVersion":"6.8.0","dist":{"integrity":"sha512-Wmt1EAWaJSOktOLw3yGSn4gbOeozSKezdJ++OvieZDpXWE+rXOTSJ9itG3LyQ38FAV9hGiyVYhXixat7QlUJ+w==","shasum":"43e945e09a70ee617b8ec912d82be96477cd7361","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-beta.5.tgz","fileCount":39,"unpackedSize":1006219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJccDyICRA9TVsSAnZWagAAImkP/1+eSefTwrMCQ5hYG77M\nc13EBIDc8sqAuMvrWRr09DKw/IQxp/+cqNMUZOzfA20VDjlLrTUDTcadIB8c\nn9KrwlJSPmJNefsnHIwX3JLOyaAXSuHpIBUGLCMfPk5d6XybgDAoYZHGONst\nzL2DMDmYzWrqw5ekLu/d0LS405tij2aEn/AGqfeXxdDo4RDGrtJhvs56CxK7\nPU8GnJZTU5ckGUSTA/wmATCLlNCHjTgFQkizX23RlFkSERj1jnVgxG/aCnTx\nejk0f1UDOVH8UKiRpnW8irYhcOl4AA6vfIhR00AdCpXnoJXbfeVl1AQ43rqW\nVRtNTKvNVNcWXDUxSAFkllb5Hzlom4Y+49wNey/N2pDxnNU4dqO+J9IxRBh4\naDcU+EUKM2TPC4Odo+p2W4CP/Le7nbkNQQMNC4kI5hiSWJjSz9TApOWG0iv/\ngoqcouHs5wrCybZQ+TGxe8Qfx0H2LCksUT/XFVs7fIe2oeZDV93+ixAye717\nmvDi6SooVbMUkr3edE+vdVBGrTsWaE7AoIatzzSbHZVzyVZVe8n//H9k4Uvr\nub5emlL8/SFBrHjp1P3S8z+fqXobJWqyjpv0j6uZD7QkYGv2s7dC0J7gCOKW\nSQiu7Cu93oPS9ygWUx048rVzTizSxSQE5MPaNSp7LY1RKmdYHW2GAqWs1zIb\nbt5w\r\n=R+7X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZjQirKRoKgv2fbQPdRhH5Cac1v51EcBGhX+lBYFqeMAiEAqmfBY7FGeIoNTPKwDULtzfbIk3wB+sKJ1zs9WmPxrTs="}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"_npmUser":{"name":"pviotti","email":"skypixel@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-beta.5_1550859399611_0.8733209171391993"},"_hasShrinkwrap":false},"3.0.0-rc.1":{"name":"react-appinsights","version":"3.0.0-rc.1","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","test-watch":"jest --config jestconfig.json --watch","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/enzyme":"^3.9.0","@types/enzyme-adapter-react-16":"^1.0.5","@types/history":"^4.7.2","@types/jest":"^24.0.9","@types/node":"^11.10.5","@types/react":"^16.8.7","@types/react-dom":"^16.8.2","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.10.0","jest":"^24.3.0","jest-junit-reporter":"^1.1.0","prettier":"^1.16.4","react-dom":"^16.8.4","rimraf":"^2.6.2","rollup":"^1.5.0","rollup-plugin-commonjs":"^9.2.1","rollup-plugin-json":"^3.1.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.1","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^4.0.4","rollup-plugin-uglify":"^6.0.2","rollup-plugin-visualizer":"^1.0.2","ts-jest":"^24.0.0","tslint":"^5.13.1","tslint-config-prettier":"^1.18.0","typescript":"^3.3.3333"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^1.0.0-beta.12","history":"^4.7.2","react":"^16.8.4"},"gitHead":"6c4c46b2722da25800141e40aef35b0134b76546","readme":"# react-appinsights\r\n\r\n[](https://www.npmjs.com/package/react-appinsights) [](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [](https://greenkeeper.io/) [](https://www.npmjs.com/package/react-appinsights) \r\n\r\nJavascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react]. \r\n`react-appinsights` extends Application Insights with additional React-specific features:\r\n\r\n- tracking of router changes\r\n- React components usage statistics\r\n- API to extend the standard telemetry with additional dimensions\r\n\r\n## Installation\r\n\r\nUsing npm:\r\n\r\n```bash\r\nnpm install react-appinsights\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights, add the following to the entry point\r\nfile of your application (e.g. `index.js`):\r\n\r\n```javascript\r\nimport { ReactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\n\r\nlet reactAI = new ReactAI();\r\nlet appInsights = new ApplicationInsights({\r\n config: {\r\n instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\",\r\n extensions: [reactAI],\r\n extensionConfig: {\r\n [ReactAI.extensionId]: { debug: false }\r\n }\r\n }\r\n});\r\nappInsights.loadAppInsights();\r\n```\r\n\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs]\r\nfor more details on how to obtain the instrumentation key.\r\n\r\n`IReactAISettings` has following non-mandatory configuration options to be passed into the `extensionConfig` object:\r\n\r\n```typescript\r\ninterface IReactAISettings {\r\n initialContext?: { [key: string]: any }; // Initial context to initialize with\r\n history?: History; // React router history - to enable page view tracking\r\n debug?: boolean; // Debug mode: displays debug messages from ReactAI in console\r\n}\r\n```\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n```javascript\r\nimport ReactAI from \"react-appinsights\";\r\nimport { Router } from \"react-router-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\n\r\nconst history = createBrowserHistory();\r\n\r\n/*\r\n * In the code sample above, set configuration as follows:\r\n * extensionConfig: {\r\n * [ReactAI.extensionId]: { history: history }\r\n * }\r\n */\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Enable React components usage tracking\r\n\r\nTo instrument various React components usage tracking, apply the `withAITracking` higher-order\r\ncomponent function.\r\n\r\n```javascript\r\nimport { withAITracking } from 'react-appinsights';\r\n\r\nclass MyComponent extends React.Component {\r\n ...\r\n}\r\n\r\nexport default withAITracking(MyComponent);\r\n```\r\n\r\nTo change the name string of the component that appears in Application Insights,\r\nyou can pass a custom name as second argument of `withAITracking`.\r\n\r\n```javascript\r\nexport default withAITracking(MyComponent, \"CustomMyComponentName\");\r\n```\r\n\r\nIt will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.\r\nHowever, in order to make this more accurate, it will subtract the time in which the user was idle.\r\nIn other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.\r\n\r\nTo see this metric in the Azure portal you need to navigate to the Application Insights resource, select \"Metrics\" tab and configure the empty charts to display Custom metric named \"React Component Engaged Time (seconds)\", select aggregation (sum, avg, etc.) of your liking and apply split by \"Component Name\".\r\n\r\n\r\n\r\nYou can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select \"Analytics\" from the top menu of the Overview tab and run your query.\r\n\r\n\r\n\r\nPlease note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nreactAI.setContext({ CorrelationId: \"some-unique-correlation-id\", Referrer: document.referrer });\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = ReactAI.appInsights;\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.\r\n\r\n\r\n[react]: https://reactjs.org/\r\n[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n","readmeFilename":"README.md","_id":"react-appinsights@3.0.0-rc.1","_nodeVersion":"11.9.0","_npmVersion":"6.8.0","dist":{"integrity":"sha512-sqwv0nEHBPCTofoVnhjJOiDzC3t3b54QIgnWty0KvkSruA/7GlGIG35qKGV5bnhqqLzyZe1ODUL7BYnlcHMb2A==","shasum":"03cc023582d158aaad54999f771090c66fcc44b1","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-rc.1.tgz","fileCount":54,"unpackedSize":661922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgk8QCRA9TVsSAnZWagAAUEQP/ReEDdSvA/XqDxc8HmYj\n3dULKhajJsGQl5t8wh6vBNRGI5zLEm9oq4381zTxPZio3X+SR16waAumOwng\nYgsFcKf+C/HdAjyWmb2XhgG3vDsy2BBsZ4Q47PzoG8DUHMSzxIrKHbmReX2s\nLh8GNmb3wdOikTfYkZdS2bcIr8uRG4PjTLJMJQhL5xPKKspcUZGYNSUnlfKu\nUNcMd0WF1ys71QW5HkJcwC5T5xITJN8iR8tqO/9qh4ruBesk7VX5CFjFiC27\nUSI7GTJTgTqsQXsNbVjIb9QbPjZXQ2ndG/i+HfLucOkQqVU/sWEHP/rywFV0\naJayIgm4NjLVVPznJ/SfN3GEc0l5pgCN3e/ZPGCrVnUW345tIq++eh4xM0py\n/j35DWFLZOJcUU6hAV/LWJ0O/TYsN/RbpU44abxaij+KIDkd/JZMp5Fop1fN\nIL2NCOcXOuOvyZyxhIdI7JMgdkkqE8/QkyVSEQm4uhSWvhGOn2h2MtrY7/l0\nlPw8oWM8ZTdZ7WrZontJj8jHcOfM13g/q66SK5f4U8v9oYYP/c7G1+WzfEIU\nnzmOBTpOsfoYxG3Cb+fdVxKmeVXP9R+jjhkRj2bIY/n+SOeKgxAqyzVIY+zW\nDes7yidTJJ564YnletNUQQTxsZnlB7oax/LgEuevj64+B0kfiL08+gxCSL6K\nMy6K\r\n=MOZ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQjDraNXNcLBS9QG/Fl7qsrCF5+xAcojBoH/XPb1AYFAIge+ww3K+zird3W9aNDKH8CW/+biW3lrTuMvuDtX9Sv38="}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"_npmUser":{"name":"pviotti","email":"skypixel@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-rc.1_1552043791461_0.40784036940495505"},"_hasShrinkwrap":false},"3.0.0-rc.2":{"name":"react-appinsights","version":"3.0.0-rc.2","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","test-watch":"jest --config jestconfig.json --watch","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/enzyme":"^3.9.0","@types/enzyme-adapter-react-16":"^1.0.5","@types/history":"^4.7.2","@types/jest":"^24.0.9","@types/node":"^11.10.5","@types/react":"^16.8.7","@types/react-dom":"^16.8.2","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.10.0","jest":"^24.3.0","jest-junit-reporter":"^1.1.0","prettier":"^1.16.4","react-dom":"^16.8.4","rimraf":"^2.6.2","rollup":"^1.5.0","rollup-plugin-commonjs":"^9.2.1","rollup-plugin-json":"^3.1.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.1","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^4.0.4","rollup-plugin-uglify":"^6.0.2","rollup-plugin-visualizer":"^1.0.2","ts-jest":"^24.0.0","tslint":"^5.13.1","tslint-config-prettier":"^1.18.0","typescript":"^3.3.3333"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^1.0.0-beta.12","history":"^4.7.2","react":"^16.8.4"},"gitHead":"6c4c46b2722da25800141e40aef35b0134b76546","readme":"# react-appinsights\r\n\r\n[](https://www.npmjs.com/package/react-appinsights) [](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [](https://greenkeeper.io/) [](https://www.npmjs.com/package/react-appinsights) \r\n\r\nJavascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react]. \r\n`react-appinsights` extends Application Insights with additional React-specific features:\r\n\r\n- tracking of router changes\r\n- React components usage statistics\r\n- API to extend the standard telemetry with additional dimensions\r\n\r\n## Installation\r\n\r\nUsing npm:\r\n\r\n```bash\r\nnpm install react-appinsights\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights, add the following to the entry point\r\nfile of your application (e.g. `index.js`):\r\n\r\n```javascript\r\nimport { ReactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\n\r\nlet reactAI = new ReactAI();\r\nlet appInsights = new ApplicationInsights({\r\n config: {\r\n instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\",\r\n extensions: [reactAI],\r\n extensionConfig: {\r\n [ReactAI.extensionId]: { debug: false }\r\n }\r\n }\r\n});\r\nappInsights.loadAppInsights();\r\n```\r\n\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs]\r\nfor more details on how to obtain the instrumentation key.\r\n\r\n`IReactAISettings` has following non-mandatory configuration options to be passed into the `extensionConfig` object:\r\n\r\n```typescript\r\ninterface IReactAISettings {\r\n initialContext?: { [key: string]: any }; // Initial context to initialize with\r\n history?: History; // React router history - to enable page view tracking\r\n debug?: boolean; // Debug mode: displays debug messages from ReactAI in console\r\n}\r\n```\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n```javascript\r\nimport ReactAI from \"react-appinsights\";\r\nimport { Router } from \"react-router-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\n\r\nconst history = createBrowserHistory();\r\n\r\n/*\r\n * In the code sample above, set configuration as follows:\r\n * extensionConfig: {\r\n * [ReactAI.extensionId]: { history: history }\r\n * }\r\n */\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Enable React components usage tracking\r\n\r\nTo instrument various React components usage tracking, apply the `withAITracking` higher-order\r\ncomponent function.\r\n\r\n```javascript\r\nimport { withAITracking } from 'react-appinsights';\r\n\r\nclass MyComponent extends React.Component {\r\n ...\r\n}\r\n\r\nexport default withAITracking(MyComponent);\r\n```\r\n\r\nTo change the name string of the component that appears in Application Insights,\r\nyou can pass a custom name as second argument of `withAITracking`.\r\n\r\n```javascript\r\nexport default withAITracking(MyComponent, \"CustomMyComponentName\");\r\n```\r\n\r\nIt will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.\r\nHowever, in order to make this more accurate, it will subtract the time in which the user was idle.\r\nIn other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.\r\n\r\nTo see this metric in the Azure portal you need to navigate to the Application Insights resource, select \"Metrics\" tab and configure the empty charts to display Custom metric named \"React Component Engaged Time (seconds)\", select aggregation (sum, avg, etc.) of your liking and apply split by \"Component Name\".\r\n\r\n\r\n\r\nYou can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select \"Analytics\" from the top menu of the Overview tab and run your query.\r\n\r\n\r\n\r\nPlease note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nreactAI.setContext({ CorrelationId: \"some-unique-correlation-id\", Referrer: document.referrer });\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = ReactAI.appInsights;\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.\r\n\r\n\r\n[react]: https://reactjs.org/\r\n[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n","readmeFilename":"README.md","_id":"react-appinsights@3.0.0-rc.2","_npmVersion":"6.5.0","_nodeVersion":"11.10.0","_npmUser":{"name":"pviotti","email":"skypixel@gmail.com"},"dist":{"integrity":"sha512-fWM1/EbQ9zIlwlsdijXNaqSvTnv6S9mRWmdG6p2WF/diN4AAfnNkMOp1XL4iJ18Eiuizkg7MKNi+pOPft+5Mzg==","shasum":"e4e22ac3077ab6ebb26eeafd0f3d3bbb6bafab3b","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-rc.2.tgz","fileCount":34,"unpackedSize":135384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchVRcCRA9TVsSAnZWagAAEpEQAKQ/1QiHQ60BrSQGmTuA\neuFuZMIYcRpdIF2YRSfO6YsL+BhLpPbmog7x/Jvc13ETCkAy8XPNc7RrbvzG\n98zlls4XIU7OVMD1SxX5LzYxluO3YCrfmv0zOhza4j7hocyeaajaDcSPxMMW\nWF9BEYInMxPEA5c5wTQT+LZYdah2bmi1roWwwDb6z3r8Q+y+fK9xd7Kb5uFj\n/HGMKhIwgHw0UbEQqFfRh1bxS00zHkNxj6ZdwLMfQVhCboo6xVZj/NxGrgF9\nrBUOtEmZQIpayDunaeSOUOW3mdYeBu7dD+Yy8C/ls5U4/EmRjdP2NsLjTxX0\nHw9MauUMBaqn5QSNWMGXE03cKvK3YELzqnysZvzeeexsow8pLpEEfozbjpEd\nCDCZlp0E+ejstXpp/f+Tw0M1s70DpYQ3b0YWo2gYEHtFjTk4qbPjaSieihZP\nbqiM5akyoK0YJMqW7IoXQtgjOyGUn7QAWHm6PXg+nnaW3TvAkXUL8FwDLXiB\nUJ/+elflJ8lQRVUixdB4tIExbgvXxZny/o5aQYmRYAlEzWlgA+kW+ZHlEBXz\nu4Vu/Q0Yd5QigGN1tX12lH+vuVeoH3nFV4KLLg+VtqC0LqzzwlXt6GqBCKoA\nvZJjLyJZYpMSdmI6w7FQapDUrc+Kt3huc3zlfpQ1AvQaLNjPxnyyQzwMgIOH\n/ryM\r\n=+f3G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5nwHNEgTnoN32itZxrigf0yJ9VlSjuljMxCwHqw+59AIhAJ47fQIWCz+8CoJZYusvdNPmh7H9rpzP4d8dcuZUPGWR"}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-rc.2_1552241755423_0.8992678781660322"},"_hasShrinkwrap":false},"3.0.0-rc.3":{"name":"react-appinsights","version":"3.0.0-rc.3","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","test-watch":"jest --config jestconfig.json --watch","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/enzyme":"^3.9.0","@types/enzyme-adapter-react-16":"^1.0.5","@types/history":"^4.7.2","@types/jest":"^24.0.9","@types/node":"^11.10.5","@types/react":"^16.8.7","@types/react-dom":"^16.8.2","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.10.0","jest":"^24.3.0","jest-junit-reporter":"^1.1.0","prettier":"^1.16.4","react-dom":"^16.8.4","rimraf":"^2.6.2","rollup":"^1.5.0","rollup-plugin-commonjs":"^9.2.1","rollup-plugin-json":"^3.1.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.1","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^4.0.4","rollup-plugin-uglify":"^6.0.2","rollup-plugin-visualizer":"^1.0.2","ts-jest":"^24.0.0","tslint":"^5.13.1","tslint-config-prettier":"^1.18.0","typescript":"^3.3.3333"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^1.0.0-beta.12","history":"^4.7.2","react":"^16.8.4"},"gitHead":"666395ac814999fdfd6d33ee6f191f09571d2bfc","readme":"# react-appinsights\r\n\r\n[](https://www.npmjs.com/package/react-appinsights) [](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [](https://greenkeeper.io/) [](https://www.npmjs.com/package/react-appinsights) \r\n\r\nJavascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react]. \r\n`react-appinsights` extends Application Insights with additional React-specific features:\r\n\r\n- tracking of router changes\r\n- React components usage statistics\r\n- API to extend the standard telemetry with additional dimensions\r\n\r\n## Installation\r\n\r\nUsing npm:\r\n\r\n```bash\r\nnpm install react-appinsights\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights, add the following to the entry point\r\nfile of your application (e.g. `index.js`):\r\n\r\n```javascript\r\nimport { reactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\n\r\nlet appInsights = new ApplicationInsights({\r\n config: {\r\n instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\",\r\n extensions: [reactAI],\r\n extensionConfig: {\r\n [reactAI.extensionId]: { debug: false }\r\n }\r\n }\r\n});\r\nappInsights.loadAppInsights();\r\n```\r\n\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs]\r\nfor more details on how to obtain the instrumentation key.\r\n\r\n`IReactAISettings` has following non-mandatory configuration options to be passed into the `extensionConfig` object:\r\n\r\n```typescript\r\ninterface IReactAISettings {\r\n initialContext?: { [key: string]: any }; // Initial context to initialize with\r\n history?: History; // React router history - to enable page view tracking\r\n debug?: boolean; // Debug mode: displays debug messages from ReactAI in console\r\n}\r\n```\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n```javascript\r\nimport { reactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\nimport { Router } from \"react-router-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\n\r\nconst history = createBrowserHistory();\r\n\r\n/*\r\n * In the code sample above, set configuration as follows:\r\n * extensionConfig: {\r\n * [ReactAI.extensionId]: { history: history }\r\n * }\r\n */\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Enable React components usage tracking\r\n\r\nTo instrument various React components usage tracking, apply the `withAITracking` higher-order\r\ncomponent function.\r\n\r\n```javascript\r\nimport { withAITracking } from 'react-appinsights';\r\n\r\nclass MyComponent extends React.Component {\r\n ...\r\n}\r\n\r\nexport default withAITracking(MyComponent);\r\n```\r\n\r\nTo change the name string of the component that appears in Application Insights,\r\nyou can pass a custom name as second argument of `withAITracking`.\r\n\r\n```javascript\r\nexport default withAITracking(MyComponent, \"CustomMyComponentName\");\r\n```\r\n\r\nIt will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.\r\nHowever, in order to make this more accurate, it will subtract the time in which the user was idle.\r\nIn other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.\r\n\r\nTo see this metric in the Azure portal you need to navigate to the Application Insights resource, select \"Metrics\" tab and configure the empty charts to display Custom metric named \"React Component Engaged Time (seconds)\", select aggregation (sum, avg, etc.) of your liking and apply split by \"Component Name\".\r\n\r\n\r\n\r\nYou can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select \"Analytics\" from the top menu of the Overview tab and run your query.\r\n\r\n\r\n\r\nPlease note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nreactAI.setContext({ CorrelationId: \"some-unique-correlation-id\", Referrer: document.referrer });\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = reactAI.appInsights;\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.\r\n\r\n\r\n[react]: https://reactjs.org/\r\n[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n","readmeFilename":"README.md","_id":"react-appinsights@3.0.0-rc.3","_nodeVersion":"10.13.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-WC/8CTUEafVpLEDJ7JF1Kct1GBKBqGdse40nM+mIG992APhz+N6BI8G8QoM0fLGYSPskZcYvXXhc7wjyG+0gtQ==","shasum":"bf0134cdf2c1eea5e51bc3470353bb944b9d57b9","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-rc.3.tgz","fileCount":53,"unpackedSize":649167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchqidCRA9TVsSAnZWagAAcq0P/3BivSiS208Ght9yr5GI\nysdOyHT094LwLKtleQB7WxDFB0Ph6CZKzJMShrmvhSxaYT/wQo4bgwOUa2JJ\njRIWcgKF56X5juP4SXcnBnn6/SQSstCcqaTLf8hIVrMNmgnRN5gFi0XSd894\ne6t75JnM+vwMOvDasGuz+ICdwlIZ6gMzp4Ylk5CL7kuuWV75+rn8NaXsasPC\n+vxywYF8zvlouw/3n1dcVZvnDYWf+aQH0DwqRZh9FklZ7x53ODxbZ6ONgggN\nIusQKzoFg2o86ktgQKqaYbmGKRy7feOqjydFD0JN0F5tWD9Jo9zhW1Q8wQJ8\n72dULQ++kWB+huDUYQBkE8LQgchwSAmBzu1Kh+wieEkbXtkd/ZXR1P5/ZeOv\nUEm5qzQVTxbSLSKe1Fbwr9A4s1bYx3/m+CVn8XRNW8i/yQmI7CElV+Z1WhUa\nQcTsMp+2IIuj2J7PLfKyyk0lV6qVlHpwuyKLDou2WAb9ktoBjSi5eJuukE/i\ns6D/WstKBbut4nBcaFjm6hN7VjPn99thXfEZ2KxTHUPLr5cZ8xidhmAqeTRU\nvM2btvsrRJqqy1Sp58V44PjhrE8yjQhecolnR3ptDCM7awvKVMH78RxnyMwp\nvw0rYC9BeW798+vpKE7eYlW/N9gDclM3wC1MyDUPXgSbAfDxm5dgCHIHxtKJ\nybLp\r\n=0DRY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFppgSRJ0QuOCJioMk7c1h1QYPNST0Amg1S/DIEJjD+jAiAe4HGORlPmEJDw/XfPSpk8hEr6FOUT7ElKjTQzu09PgA=="}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"_npmUser":{"name":"hiraldesai","email":"hiraldesai@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-rc.3_1552328861156_0.012083393815122134"},"_hasShrinkwrap":false},"3.0.0-rc.4":{"name":"react-appinsights","version":"3.0.0-rc.4","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","test-watch":"jest --config jestconfig.json --watch","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/enzyme":"^3.9.0","@types/enzyme-adapter-react-16":"^1.0.5","@types/history":"^4.7.2","@types/jest":"^24.0.9","@types/node":"^11.10.5","@types/react":"^16.8.7","@types/react-dom":"^16.8.2","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.10.0","jest":"^24.3.0","jest-junit-reporter":"^1.1.0","prettier":"^1.16.4","react-dom":"^16.8.4","rimraf":"^2.6.2","rollup":"^1.5.0","rollup-plugin-commonjs":"^9.2.1","rollup-plugin-json":"^3.1.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.1","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^4.0.4","rollup-plugin-uglify":"^6.0.2","rollup-plugin-visualizer":"^1.0.2","ts-jest":"^24.0.0","tslint":"^5.13.1","tslint-config-prettier":"^1.18.0","typescript":"^3.3.3333"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^2.0.0-beta.3","history":"^4.7.2","react":"^16.8.4"},"gitHead":"f2052c730b4f741e2fda897288936b320afe0730","readme":"# react-appinsights\r\n\r\n[](https://www.npmjs.com/package/react-appinsights) [](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [](https://greenkeeper.io/) [](https://www.npmjs.com/package/react-appinsights) \r\n\r\nJavascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react]. \r\n`react-appinsights` extends Application Insights with additional React-specific features:\r\n\r\n- tracking of router changes\r\n- React components usage statistics\r\n- API to extend the standard telemetry with additional dimensions\r\n\r\n## Installation\r\n\r\nUsing npm:\r\n\r\n```bash\r\nnpm install react-appinsights\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights, add the following to the entry point\r\nfile of your application (e.g. `index.js`):\r\n\r\n```javascript\r\nimport { reactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\n\r\nlet appInsights = new ApplicationInsights({\r\n config: {\r\n instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\",\r\n extensions: [reactAI],\r\n extensionConfig: {\r\n [reactAI.extensionId]: { debug: false }\r\n }\r\n }\r\n});\r\nappInsights.loadAppInsights();\r\n```\r\n\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs]\r\nfor more details on how to obtain the instrumentation key.\r\n\r\n`IReactAISettings` has following non-mandatory configuration options to be passed into the `extensionConfig` object:\r\n\r\n```typescript\r\ninterface IReactAISettings {\r\n initialContext?: { [key: string]: any }; // Initial context to initialize with\r\n history?: History; // React router history - to enable page view tracking\r\n debug?: boolean; // Debug mode: displays debug messages from ReactAI in console\r\n}\r\n```\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n```javascript\r\nimport { reactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\nimport { Router } from \"react-router-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\n\r\nconst history = createBrowserHistory();\r\n\r\n/*\r\n * In the code sample above, set configuration as follows:\r\n * extensionConfig: {\r\n * [ReactAI.extensionId]: { history: history }\r\n * }\r\n */\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Enable React components usage tracking\r\n\r\nTo instrument various React components usage tracking, apply the `withAITracking` higher-order\r\ncomponent function.\r\n\r\n```javascript\r\nimport { withAITracking } from 'react-appinsights';\r\n\r\nclass MyComponent extends React.Component {\r\n ...\r\n}\r\n\r\nexport default withAITracking(MyComponent);\r\n```\r\n\r\nTo change the name string of the component that appears in Application Insights,\r\nyou can pass a custom name as second argument of `withAITracking`.\r\n\r\n```javascript\r\nexport default withAITracking(MyComponent, \"CustomMyComponentName\");\r\n```\r\n\r\nIt will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.\r\nHowever, in order to make this more accurate, it will subtract the time in which the user was idle.\r\nIn other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.\r\n\r\nTo see this metric in the Azure portal you need to navigate to the Application Insights resource, select \"Metrics\" tab and configure the empty charts to display Custom metric named \"React Component Engaged Time (seconds)\", select aggregation (sum, avg, etc.) of your liking and apply split by \"Component Name\".\r\n\r\n\r\n\r\nYou can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select \"Analytics\" from the top menu of the Overview tab and run your query.\r\n\r\n\r\n\r\nPlease note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nreactAI.setContext({ CorrelationId: \"some-unique-correlation-id\", Referrer: document.referrer });\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = reactAI.appInsights;\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.\r\n\r\n\r\n[react]: https://reactjs.org/\r\n[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n","readmeFilename":"README.md","_id":"react-appinsights@3.0.0-rc.4","_nodeVersion":"11.9.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-vDVfiM8lZPmzDwn9J+59Xo2hP1v/5yOyQc8Dx0alwCoa1oj4sqR4uaex0GBgtJUFyy6TQ5ujH0q+syB3UDitjw==","shasum":"77486193bfd0476d4c700732cf8e8c140f087207","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-rc.4.tgz","fileCount":54,"unpackedSize":977897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcim8kCRA9TVsSAnZWagAA6acP/0tqQovZHWyn4Me0cHCO\nwzxO/dceOtc3whHU6BzL1BSWVwQsZSepsCQGOGJ9eRWIYIWnyiGmaR5KI0Y3\ntfOoYXP6Y1VxAgstIpU2Y7xPu17q/4stmrQax5121c6J1AHC/azMazYhB4Y1\nmNgicdafHdmoQr7f9UYKjCJQGRqm6OV0T+Hudc1Oivh5qsVQw3H3qguzt458\n+RQwLxOfOUJu+N/+LFVRWbFuDL205cLB2JyBsq/kUi4u4hnl3w5GS5JpDfJY\nmgLpINSE1sRw+ii6KEyB5eqW9EYA7dcgrxXQnARuiFcUKXY0lrULrewNrxML\nVefOfcvsfTzyqq52gfRT/Jf08SOvVzTmcXvK0O4+92VX8X1eYGHuqKjjnp89\nh3W25+auhoX07zLPLMhbMrbFy9lpwe/GlNqBGPC93/XbeMl5AOnV5N5O/R+V\nocJ0rp3jPPMdfHEie8ygcAymTV5FyTjk0R5rHp7gzJnl1xfUMrffVvwaCZTy\nk6G2w0ybzaB8AuvlXbFLsf+xdivxcfsSM5di4hdymulijQOGdwUrVpyGY/DR\ncdNQiA8T4xSesw1XMsdH2u+N9920VCJjLBlSmw4RS8ZTFGPPG+g1XRPk66d9\nbIyxx9bl2b6WtCXaPQTs9Pce971zRNwcG0mSgRmvcnkX/mYsEcrypovej5fB\nu8Gt\r\n=C6Kx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9/Ap5F8Hi6PX8X01AzXQdkJ0PFNfkOwS9/7WW/drj8QIhAIuJs7hmFhfsNXoUzS7cpWmdI77ckt6MMvsq3TM84xkO"}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"_npmUser":{"name":"pviotti","email":"skypixel@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-rc.4_1552576286056_0.10525773867769628"},"_hasShrinkwrap":false},"3.0.0-rc.5":{"name":"react-appinsights","version":"3.0.0-rc.5","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","test-watch":"jest --config jestconfig.json --watch","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/enzyme":"^3.9.0","@types/enzyme-adapter-react-16":"^1.0.5","@types/history":"^4.7.2","@types/jest":"^24.0.9","@types/node":"^11.10.5","@types/react":"^16.8.7","@types/react-dom":"^16.8.2","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.10.0","jest":"^24.3.0","jest-junit-reporter":"^1.1.0","prettier":"^1.16.4","react-dom":"^16.8.4","rimraf":"^2.6.2","rollup":"^1.5.0","rollup-plugin-commonjs":"^9.2.1","rollup-plugin-json":"^3.1.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.0.1","rollup-plugin-replace":"^2.1.0","rollup-plugin-terser":"^4.0.4","rollup-plugin-uglify":"^6.0.2","rollup-plugin-visualizer":"^1.0.2","ts-jest":"^24.0.0","tslint":"^5.13.1","tslint-config-prettier":"^1.18.0","typescript":"^3.3.3333"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^2.0.0-beta.3","history":"^4.7.2","react":"^16.8.4"},"readme":"# react-appinsights\r\n\r\n[](https://www.npmjs.com/package/react-appinsights) [](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [](https://greenkeeper.io/) [](https://www.npmjs.com/package/react-appinsights) \r\n\r\nJavascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react]. \r\n`react-appinsights` extends Application Insights with additional React-specific features:\r\n\r\n- tracking of router changes\r\n- React components usage statistics\r\n- API to extend the standard telemetry with additional dimensions\r\n\r\n## Installation\r\n\r\nUsing npm:\r\n\r\n```bash\r\nnpm install react-appinsights\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights, add the following to the entry point\r\nfile of your application (e.g. `index.js`):\r\n\r\n```javascript\r\nimport { reactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\n\r\nlet appInsights = new ApplicationInsights({\r\n config: {\r\n instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\",\r\n extensions: [reactAI],\r\n extensionConfig: {\r\n [reactAI.extensionId]: { debug: false }\r\n }\r\n }\r\n});\r\nappInsights.loadAppInsights();\r\n```\r\n\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs]\r\nfor more details on how to obtain the instrumentation key.\r\n\r\n`IReactAISettings` has following non-mandatory configuration options to be passed into the `extensionConfig` object:\r\n\r\n```typescript\r\ninterface IReactAISettings {\r\n initialContext?: { [key: string]: any }; // Initial context to initialize with\r\n history?: History; // React router history - to enable page view tracking\r\n debug?: boolean; // Debug mode: displays debug messages from ReactAI in console\r\n}\r\n```\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n```javascript\r\nimport { reactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\nimport { Router } from \"react-router-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\n\r\nconst history = createBrowserHistory();\r\n\r\n/*\r\n * In the code sample above, set configuration as follows:\r\n * extensionConfig: {\r\n * [ReactAI.extensionId]: { history: history }\r\n * }\r\n */\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Enable React components usage tracking\r\n\r\nTo instrument various React components usage tracking, apply the `withAITracking` higher-order\r\ncomponent function.\r\n\r\n```javascript\r\nimport { withAITracking } from 'react-appinsights';\r\n\r\nclass MyComponent extends React.Component {\r\n ...\r\n}\r\n\r\nexport default withAITracking(MyComponent);\r\n```\r\n\r\nTo change the name string of the component that appears in Application Insights,\r\nyou can pass a custom name as second argument of `withAITracking`.\r\n\r\n```javascript\r\nexport default withAITracking(MyComponent, \"CustomMyComponentName\");\r\n```\r\n\r\nIt will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.\r\nHowever, in order to make this more accurate, it will subtract the time in which the user was idle.\r\nIn other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.\r\n\r\nTo see this metric in the Azure portal you need to navigate to the Application Insights resource, select \"Metrics\" tab and configure the empty charts to display Custom metric named \"React Component Engaged Time (seconds)\", select aggregation (sum, avg, etc.) of your liking and apply split by \"Component Name\".\r\n\r\n\r\n\r\nYou can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select \"Analytics\" from the top menu of the Overview tab and run your query.\r\n\r\n\r\n\r\nPlease note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nreactAI.setContext({ CorrelationId: \"some-unique-correlation-id\", Referrer: document.referrer });\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = reactAI.appInsights;\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.\r\n\r\n\r\n[react]: https://reactjs.org/\r\n[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n","readmeFilename":"README.md","gitHead":"bf4d54406db9dbdf8ef884175280f621b221392c","_id":"react-appinsights@3.0.0-rc.5","_nodeVersion":"11.10.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-su36gr+PsMAUq60DSP8GBmIXm65W/U2f1tpPNsKhfTZ0unT1fVhNPf9zYemSPaOHlNbn/2B/vhYfCuPT1NfsGg==","shasum":"62dfda74541c2ba34b13f3ab19f3a8ebe427484f","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-rc.5.tgz","fileCount":53,"unpackedSize":967475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcj73cCRA9TVsSAnZWagAAF+4P/3Tn1L/JTKTsMLKuHjhb\nZG5MTl2IlyUlAR8ZH2nGOGe5z7KmADwYAnf0lfWG+rbg149E3bB7vEeWoJcF\nV7yp3OHzRGTiYuYKo4NwavjeCRh1EcscnsxXX08A9Bok+kFqZOkMCBqhvNIe\n3sCLPwrpYowRgauKBXxJF//x+e/9OIJ76NylYU/xM7eEow+tf4XvS8NJkRWo\nC5k5WHzER783mrCgjbnO11p9KOdDywQydTUj1zlNW7J4t585GHgbK8JlZ/T1\nb1zMa4qL+6jf2C6byQBKT5IbUdZqqwTE38l9EYPbt4smqVUyoXinbcOvOWLS\niRQpb44ADAN599Z2UnyOb/fVgqlqPGkZwZt9ncocR6gWmcRInWosMM8XgLM+\nRyT+rgGIYHwojvy04CvRaLOj/pYa4yjr4wEq4u2VhS7uXZ0rBzPXE3pAa6a2\n9pt0mz7QWJJfjz+3wKlBBxmXYv4yBdY8gb5Aoe8DYpDxsFumU+swMQl5XDlD\nxirq4aa1jJStJDGNib/mKSMHCgmSuGIWy0lccTOlOdHkVdRaBeDlMRgnmJNW\nsGB1EcboPJG7OEmhZsmIXYgzY75i/2AsDmQbZ0n/5F8inMxq/9ykxqEsaUvE\nNfR7nPTirfvKYt1fA3Vg02QhX5oIJQeyUDRXKxehAdJGkXguFpd22oahb8EC\nVWVp\r\n=Mpnv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvsu4wwKJp1x3GGGn9Z4S39iuRdkV736XfjtlYZ/SkAAiEAluKGciQpyITaoobMstO2aQhJ4sMRaI4OjAwkUl5dAfQ="}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"_npmUser":{"name":"pviotti","email":"skypixel@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-rc.5_1552924123331_0.02594240134798942"},"_hasShrinkwrap":false},"3.0.0-rc.6":{"name":"react-appinsights","version":"3.0.0-rc.6","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","test-watch":"jest --config jestconfig.json --watch","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/enzyme":"^3.9.1","@types/enzyme-adapter-react-16":"^1.0.5","@types/history":"^4.7.2","@types/jest":"^24.0.11","@types/node":"^11.13.2","@types/react":"^16.8.13","@types/react-dom":"^16.8.3","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.12.1","jest":"^24.7.1","jest-junit-reporter":"^1.1.0","prettier":"^1.16.4","react-dom":"^16.8.6","rimraf":"^2.6.3","rollup":"^1.9.0","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-json":"^4.0.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^4.2.1","rollup-plugin-replace":"^2.1.1","rollup-plugin-terser":"^4.0.4","rollup-plugin-uglify":"^6.0.2","rollup-plugin-visualizer":"^1.1.1","ts-jest":"^24.0.2","tslint":"^5.15.0","tslint-config-prettier":"^1.18.0","typescript":"^3.4.2"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-web":"^2.0.0-rc1","history":"^4.9.0","react":"^16.8.6"},"gitHead":"8a5d0d09f78e6abeeba09644e74cd428ff3e8cd1","readme":"# react-appinsights\r\n\r\n[](https://www.npmjs.com/package/react-appinsights) [](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [](https://greenkeeper.io/) [](https://www.npmjs.com/package/react-appinsights) \r\n\r\nJavascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react]. \r\n`react-appinsights` extends Application Insights with additional React-specific features:\r\n\r\n- tracking of router changes\r\n- React components usage statistics\r\n- API to extend the standard telemetry with additional dimensions\r\n\r\n## IMPORTANT - please read!\r\n\r\nPlease note that the latest stable version of this package is 2.0.2 and the corresponding documentation for this version resides [here][2-0-2]. However, the package is soon going to be upgraded to its next major version (3.0.0). The release candidate (3.0.0-rc6) for this version is published [here][3-0-0-rc-6]. The content of this readme refers to the next major version.\r\n\r\n## Installation\r\n\r\nUsing npm:\r\n\r\n```bash\r\nnpm install --save react-appinsights@beta\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights, add the following to the entry point\r\nfile of your application (e.g. `index.js`):\r\n\r\n```javascript\r\nimport { reactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\n\r\nlet appInsights = new ApplicationInsights({\r\n config: {\r\n instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\",\r\n extensions: [reactAI],\r\n extensionConfig: {\r\n [reactAI.extensionId]: { debug: false }\r\n }\r\n }\r\n});\r\nappInsights.loadAppInsights();\r\n```\r\n\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs]\r\nfor more details on how to obtain the instrumentation key.\r\n\r\n`IReactAISettings` has following non-mandatory configuration options to be passed into the `extensionConfig` object:\r\n\r\n```typescript\r\ninterface IReactAISettings {\r\n initialContext?: { [key: string]: any }; // Initial context to initialize with\r\n history?: History; // React router history - to enable page view tracking\r\n debug?: boolean; // Debug mode: displays debug messages from ReactAI in console\r\n}\r\n```\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n```javascript\r\nimport { reactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\nimport { Router } from \"react-router-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\n\r\nconst history = createBrowserHistory();\r\n\r\n/*\r\n * In the code sample above, set configuration as follows:\r\n * extensionConfig: {\r\n * [ReactAI.extensionId]: { history: history }\r\n * }\r\n */\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Enable React components usage tracking\r\n\r\nTo instrument various React components usage tracking, apply the `withAITracking` higher-order\r\ncomponent function.\r\n\r\n```javascript\r\nimport { withAITracking } from 'react-appinsights';\r\n\r\nclass MyComponent extends React.Component {\r\n ...\r\n}\r\n\r\nexport default withAITracking(MyComponent);\r\n```\r\n\r\nTo change the name string of the component that appears in Application Insights,\r\nyou can pass a custom name as second argument of `withAITracking`.\r\n\r\n```javascript\r\nexport default withAITracking(MyComponent, \"CustomMyComponentName\");\r\n```\r\n\r\nIt will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.\r\nHowever, in order to make this more accurate, it will subtract the time in which the user was idle.\r\nIn other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.\r\n\r\nTo see this metric in the Azure portal you need to navigate to the Application Insights resource, select \"Metrics\" tab and configure the empty charts to display Custom metric named \"React Component Engaged Time (seconds)\", select aggregation (sum, avg, etc.) of your liking and apply split by \"Component Name\".\r\n\r\n\r\n\r\nYou can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select \"Analytics\" from the top menu of the Overview tab and run your query.\r\n\r\n\r\n\r\nPlease note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nreactAI.setContext({ CorrelationId: \"some-unique-correlation-id\", Referrer: document.referrer });\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = reactAI.appInsights;\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.\r\n\r\n\r\n[react]: https://reactjs.org/\r\n[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n[2-0-2]: https://github.com/Azure/react-appinsights/tree/v2.0.2\r\n[3-0-0-rc-6]: https://www.npmjs.com/package/react-appinsights/v/3.0.0-rc.6","readmeFilename":"README.md","_id":"react-appinsights@3.0.0-rc.6","_nodeVersion":"10.13.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-4yLr+BTcK+J70uU9hd/J66gtMuAlhBb7dZuHyloRYyFJxr39hlvsfvhsNELoB8VyDAuj77xIB0fxVvNbrEQEdw==","shasum":"670070b87503766eb355b830d6cf153620a93b54","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0-rc.6.tgz","fileCount":53,"unpackedSize":958765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrOwWCRA9TVsSAnZWagAAs30P/RVnMaqWoNySHQZ74ARA\na72QWOfHR5bqcCsKlxoA4GMEwjj12/BCZmDj59xELJjk+bFzxPMNCa5AHMKE\nrN1j1zvdm+T+JCoRoBcqIFIk8+xJjlJ7sVzuyC10ZVStyMgoz4WQysohd2CJ\nIOEfSH/ma5F1mvCAnJwJJJ2/wM2nT0WwZD/7Q7m4yswkORFk/3pM+bhdYjxN\nBbP/67uruMpoV4lPc9KIEkykUKp2cvvT/NioQXT3GTmLb6Cfn90+0GB3nu7i\ncDvsHFqZ7cGGBTWCV9qbSJ+TIrpojv9FGBdXH9tCNwujxfDQVcTeQQc0Vr4x\nrNlTlgbSQSC6zT3pLmrkmHQf1A79WoS0ndL7n9FzL3KE14pDQsqrGyaWMijh\nN700VJRof6HhGLpqxNc/kpCY/O5iIqYa3Soe7f6eVcOqpkZqJbYcAOvWlukP\n/dqJSRxoiCWZ6TKba9nlbuWHmygk/AXCmZwoEXnCJWQvwrRvDqLuIRmgackN\n8Z2SucJvnXwXQIfrFyO7SWuhPv8dW9WJZZlwU4bS0qfHW1xPQHEZOjbbxtPG\nukCO3AbLAogvFvzWKESkYOUsX15gRLGxHVK6DO4H1qYPf2PQYMrO+lbkvmss\nsRxRdbezTgPKOBEvJ6c5USihjm0EwWocutiZOxcIzN/ASWsqcru5GnVJ81EM\ndoOW\r\n=yyKk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgB28vpzq58Lcj2uv4SFiK4YTn/4Raf42BDzAlAMci8wIhAKy6ds7cEmYGEyhGLau1XZaosC1kQkumPlzFS7d/ToEJ"}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"_npmUser":{"name":"hiraldesai","email":"hiraldesai@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0-rc.6_1554836501591_0.37846859991867765"},"_hasShrinkwrap":false},"3.0.0":{"name":"react-appinsights","version":"3.0.0","description":"Application Insights module for React applications","main":"dist/index.js","module":"dist-esm/src/index.js","browser":{"./dist/index.js":"./browser/index.js"},"types":"dist-esm/src/index.d.ts","scripts":{"clean":"rimraf dist dist-*","build":"tsc -p . && rollup -c && rollup -c rollup.test.config.js","test":"jest --config jestconfig.json","test-watch":"jest --config jestconfig.json --watch","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"author":{"name":"Microsoft Corporation"},"license":"MIT","bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"engine":{"node":">=8.0.0"},"homepage":"https://github.com/Azure/react-appinsights#readme","devDependencies":{"@types/enzyme":"^3.9.2","@types/enzyme-adapter-react-16":"^1.0.5","@types/history":"^4.7.2","@types/jest":"^24.0.13","@types/node":"^12.0.2","@types/react":"^16.8.18","@types/react-dom":"^16.8.4","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.13.1","jest":"^24.8.0","jest-junit-reporter":"^1.1.0","prettier":"^1.17.1","react-dom":"^16.8.6","rimraf":"^2.6.3","rollup":"1.12.3","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-json":"^4.0.0","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-multi-entry":"^2.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-resolve":"^5.0.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-terser":"^5.0.0","rollup-plugin-uglify":"^6.0.2","rollup-plugin-visualizer":"^1.1.1","ts-jest":"^24.0.2","tslint":"^5.16.0","tslint-config-prettier":"^1.18.0","typescript":"^3.4.5"},"sideEffects":false,"dependencies":{"@microsoft/applicationinsights-common":"^2.0.0","@microsoft/applicationinsights-web":"^2.0.0","history":"^4.9.0","react":"^16.8.6"},"gitHead":"ab601ff4f60e94215cb3ed5ddfaf7933ce3e78d0","_id":"react-appinsights@3.0.0","_nodeVersion":"11.14.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-nInrAoJLkPuY1D1rCyFPzsHOQhGf/EvTHAQA+o/5wv5jikVaenMX+l4NQ1pr0YT++cST7aAR1YU3ae6hDrQyHg==","shasum":"164208d26df13502a435eeede7089146bcc639a2","tarball":"https://registry.npmjs.org/react-appinsights/-/react-appinsights-3.0.0.tgz","fileCount":54,"unpackedSize":981643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5SnFCRA9TVsSAnZWagAAdSsP/0bnVHKo9btg+Ufy0xKE\nzXlwfEHSf2KcWTJkoGyFbQHAneqtCj+0/fwAnXazEX3dagYCLqGKYMJ0UyKA\nOClxthMviDMM3xjN7zNq44zhXEZfjvl9z49Wf3mGvbtizHsWrLGPbX5cLCUi\nyy6rF/mTH0WctBYlHdAnz/16JAZHMVGKnCa2rYj8dkYPneYaYk30Hf4GGWZs\nTYIauf5LePONdYnmIbtNBwqBXayH0CY3cnh5we3Zs30gUZ0iQqXfOL25ecVe\n4K2EIb9+K/pYqDrMUWj/2mKJzaxPtUNN++BtcfoX9l9FHki+Ld8fioF3tIwU\nyiH8gMxh441JjJoUAtCXRuopdvDz/VdCCNpXrVu+W4qLpIj4uqe0Ka2dhpA5\nNH8uF4lneD8giIGV+cwPEiKuYSOn17mwvHNUuNKJGA33JY6u8c6I11fPWciG\ni4k10P7WptSVcJcNB3X8ZJ6noWj2DW+GyplkCdz3+Kqg1mPBknS+ZHPNdVng\nrpHFZVY4+UiJnAJkoz1QUMYW5gVRBefPhwCRCWQV+4IZ5Dw40MhIJs2hK673\n1xzFC7Po2eiT7JFr8l3acsU5UfwA1EKb/aVOCY7bIqAv3O8nz1ge4H6j3sLW\ndGktkfWBzoo1RqKGH56AMZuJ/OBoGd3p96qjHrkjmAGv14KjHoiTtVt2r5PK\nN6UU\r\n=srNT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfkoPhaGTJtc0un4AvUyLn+YouGaZvT1IdwQQc6oK3lAiAtPZA7AYJrX8bwn9sKj0gq1KAwOdITKR1rFiVTZMb/fQ=="}]},"maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"_npmUser":{"name":"pviotti","email":"skypixel@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-appinsights_3.0.0_1558522308384_0.6356714358626634"},"_hasShrinkwrap":false,"deprecated":"This package is no longer supported. Please use @microsoft/applicationinsights-react-js instead."}},"readme":"# react-appinsights\r\n\r\n[](https://www.npmjs.com/package/react-appinsights) [](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [](https://greenkeeper.io/) [](https://www.npmjs.com/package/react-appinsights) \r\n\r\nJavascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react]. \r\n`react-appinsights` extends Application Insights with additional React-specific features:\r\n\r\n- tracking of router changes\r\n- React components usage statistics\r\n- API to extend the standard telemetry with additional dimensions\r\n\r\n## IMPORTANT - please read!\r\n\r\nPlease note that the latest stable version of this package is 2.0.2 and the corresponding documentation for this version resides [here][2-0-2]. However, the package is soon going to be upgraded to its next major version (3.0.0). The release candidate (3.0.0-rc6) for this version is published [here][3-0-0-rc-6]. The content of this readme refers to the next major version.\r\n\r\n## Installation\r\n\r\nUsing npm:\r\n\r\n```bash\r\nnpm install --save react-appinsights@beta\r\n```\r\n\r\n## Usage\r\n\r\nTo initialize Application Insights, add the following to the entry point\r\nfile of your application (e.g. `index.js`):\r\n\r\n```javascript\r\nimport { reactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\n\r\nlet appInsights = new ApplicationInsights({\r\n config: {\r\n instrumentationKey: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\",\r\n extensions: [reactAI],\r\n extensionConfig: {\r\n [reactAI.extensionId]: { debug: false }\r\n }\r\n }\r\n});\r\nappInsights.loadAppInsights();\r\n```\r\n\r\nSee [this Application Insights tutorial for Node.js][appinsights-nodejs]\r\nfor more details on how to obtain the instrumentation key.\r\n\r\n`IReactAISettings` has following non-mandatory configuration options to be passed into the `extensionConfig` object:\r\n\r\n```typescript\r\ninterface IReactAISettings {\r\n initialContext?: { [key: string]: any }; // Initial context to initialize with\r\n history?: History; // React router history - to enable page view tracking\r\n debug?: boolean; // Debug mode: displays debug messages from ReactAI in console\r\n}\r\n```\r\n\r\n#### Track router changes\r\n\r\nTo track page views, pass a history object to the init method. \r\nFor more information see the [documentation][react-router] of the `react-router` package.\r\n\r\n```javascript\r\nimport { reactAI } from \"react-appinsights\";\r\nimport { ApplicationInsights } from \"@microsoft/applicationinsights-web\";\r\nimport { Router } from \"react-router-dom\";\r\nimport { createBrowserHistory } from \"history\";\r\n\r\nconst history = createBrowserHistory();\r\n\r\n/*\r\n * In the code sample above, set configuration as follows:\r\n * extensionConfig: {\r\n * [ReactAI.extensionId]: { history: history }\r\n * }\r\n */\r\n\r\nReactDOM.render(\r\n \r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n```\r\n\r\n#### Enable React components usage tracking\r\n\r\nTo instrument various React components usage tracking, apply the `withAITracking` higher-order\r\ncomponent function.\r\n\r\n```javascript\r\nimport { withAITracking } from 'react-appinsights';\r\n\r\nclass MyComponent extends React.Component {\r\n ...\r\n}\r\n\r\nexport default withAITracking(MyComponent);\r\n```\r\n\r\nTo change the name string of the component that appears in Application Insights,\r\nyou can pass a custom name as second argument of `withAITracking`.\r\n\r\n```javascript\r\nexport default withAITracking(MyComponent, \"CustomMyComponentName\");\r\n```\r\n\r\nIt will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.\r\nHowever, in order to make this more accurate, it will subtract the time in which the user was idle.\r\nIn other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.\r\n\r\nTo see this metric in the Azure portal you need to navigate to the Application Insights resource, select \"Metrics\" tab and configure the empty charts to display Custom metric named \"React Component Engaged Time (seconds)\", select aggregation (sum, avg, etc.) of your liking and apply split by \"Component Name\".\r\n\r\n\r\n\r\nYou can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select \"Analytics\" from the top menu of the Overview tab and run your query.\r\n\r\n\r\n\r\nPlease note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.\r\n\r\n#### Set application context\r\n\r\nTo augment all telemetry with additional properties use `setContext` method. For instance:\r\n\r\n```javascript\r\nreactAI.setContext({ CorrelationId: \"some-unique-correlation-id\", Referrer: document.referrer });\r\n```\r\n\r\nThis will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.\r\n\r\n\r\n\r\n#### Get original AppInsights object\r\n\r\nUse the following method to get the original AppInsights object:\r\n\r\n```javascript\r\nvar appInsights = reactAI.appInsights;\r\n```\r\n\r\nRefer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.\r\n\r\n\r\n[react]: https://reactjs.org/\r\n[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript\r\n[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/\r\n[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md\r\n[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components\r\n[2-0-2]: https://github.com/Azure/react-appinsights/tree/v2.0.2\r\n[3-0-0-rc-6]: https://www.npmjs.com/package/react-appinsights/v/3.0.0-rc.6","maintainers":[{"email":"anastasiia.zolochevska@gmail.com","name":"anastasiia-zolochevska"},{"email":"skypixel@gmail.com","name":"pviotti"}],"time":{"modified":"2022-06-25T16:16:45.501Z","created":"2016-09-22T20:47:58.541Z","1.0.0":"2016-09-22T20:47:58.541Z","1.0.1":"2016-09-23T21:56:47.724Z","1.0.2":"2016-09-23T22:58:48.093Z","1.0.3":"2018-01-04T01:57:40.268Z","1.0.4":"2018-01-04T02:07:44.893Z","2.0.0":"2018-11-20T15:45:19.959Z","2.0.1":"2018-12-10T13:09:21.467Z","3.0.0-beta.0":"2018-12-13T17:08:12.167Z","3.0.0-beta.1":"2019-01-03T23:52:16.240Z","3.0.0-beta.2":"2019-01-10T17:34:44.087Z","3.0.0-beta.3":"2019-01-23T20:45:38.842Z","2.0.2":"2019-02-20T12:57:13.746Z","3.0.0-beta.4":"2019-02-20T17:29:16.678Z","3.0.0-beta.5":"2019-02-22T18:16:39.872Z","3.0.0-rc.1":"2019-03-08T11:16:31.637Z","3.0.0-rc.2":"2019-03-10T18:15:55.535Z","3.0.0-rc.3":"2019-03-11T18:27:41.334Z","3.0.0-rc.4":"2019-03-14T15:11:31.903Z","3.0.0-rc.5":"2019-03-18T15:48:43.581Z","3.0.0-rc.6":"2019-04-09T19:01:41.733Z","3.0.0":"2019-05-22T10:51:48.526Z"},"homepage":"https://github.com/Azure/react-appinsights#readme","keywords":["Azure","Cloud","React","ReactJS","AppInsights","Application Insights","Microsoft Application Insights","Telemetry"],"repository":{"type":"git","url":"git+https://github.com/Azure/react-appinsights.git"},"author":{"name":"Microsoft Corporation"},"bugs":{"url":"https://github.com/Azure/react-appinsights/issues"},"license":"MIT","readmeFilename":"README.md"}