Skip to content
This repository was archived by the owner on May 22, 2019. It is now read-only.

Commit bc42456

Browse files
pviottipviotti
authored
Merge pull request #76 from Azure/typescript-rewrite
Move typescript rewrite (3.0-rc version) to master branch
2 parents 370f04a + bfdd751 commit bc42456

31 files changed

Lines changed: 4093 additions & 10549 deletions

‎.gitignore‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ logs
44
npm-debug.log*
55
yarn-debug.log*
66
yarn-error.log*
7+
test-report.xml
78

89
# Runtime data
910
pids
@@ -36,6 +37,8 @@ build/Release
3637
node_modules/
3738
jspm_packages/
3839

40+
# TypeScript v1 declaration files
41+
typings/
3942

4043
# Optional npm cache directory
4144
.npm
@@ -52,6 +55,12 @@ jspm_packages/
5255
# Yarn Integrity file
5356
.yarn-integrity
5457

58+
# dotenv environment variables file
59+
.env
60+
61+
# next.js build output
62+
.next
63+
5564
# built output
5665
dist
5766
dist-*

‎.npmignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
dist-esm/test
22
test
33
test-browser
4-
test-dist
4+
test-dist
5+
legacy

‎.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"printWidth": 120,
3+
"tabWidth": 2
4+
}

‎.prettierrc.json‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎.vscode/launch.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"type": "node",
6+
"request": "launch",
7+
"name": "Jest All",
8+
"program": "${workspaceFolder}/node_modules/.bin/jest",
9+
"args": [
10+
"--runInBand",
11+
"--config",
12+
"jestconfig.json"
13+
],
14+
"console": "integratedTerminal",
15+
"internalConsoleOptions": "neverOpen",
16+
"disableOptimisticBPs": true,
17+
"windows": {
18+
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
19+
}
20+
},
21+
{
22+
"type": "node",
23+
"request": "launch",
24+
"name": "Jest Current File",
25+
"program": "${workspaceFolder}/node_modules/.bin/jest",
26+
"args": [
27+
"${relativeFile}",
28+
"--config",
29+
"jestconfig.json"
30+
],
31+
"console": "integratedTerminal",
32+
"internalConsoleOptions": "neverOpen",
33+
"disableOptimisticBPs": true,
34+
"windows": {
35+
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
36+
}
37+
}
38+
]
39+
}

‎.vscode/settings.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"editor.codeActionsOnSave": {
3+
"source.organizeImports": true
4+
},
5+
"prettier.printWidth": 120,
6+
"typescript.updateImportsOnFileMove.enabled": "always",
7+
"editor.formatOnSave": true,
8+
"[markdown]": {
9+
"editor.formatOnSave": false
10+
}
11+
}

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
All notable changes to this project are documented in this file.
44
The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
55

6+
## [3.0.0] beta branch
7+
8+
### Change
9+
- rewrite in Typescript
10+
- support for Application Insights Javascript SDK
11+
612
## [Unreleased]
713

814
## [2.0.2] - 2019-01-20
@@ -48,3 +54,4 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
4854
[2.0.0]: https://github.com/Azure/react-appinsights/compare/v1.0.4...v2.0.0
4955
[2.0.1]: https://github.com/Azure/react-appinsights/compare/v2.0.0...v2.0.1
5056
[2.0.2]: https://github.com/Azure/react-appinsights/compare/v2.0.1...v2.0.2
57+
[3.0.0]: https://github.com/Azure/react-appinsights/compare/v2.0.1...typescript-rewrite

‎README.md‎

Lines changed: 79 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,75 @@
11
# react-appinsights
22

3-
[![Build Status](https://dev.azure.com/azure-public/react-appinsights/_apis/build/status/Azure.react-appinsights)](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16)
4-
[![npm](https://img.shields.io/npm/v/react-appinsights.svg)](https://www.npmjs.com/package/react-appinsights)
5-
[![Downloads per month](https://img.shields.io/npm/dm/react-appinsights.svg)](https://www.npmjs.com/package/react-appinsights)
6-
[![dependencies](https://david-dm.org/Azure/react-appinsights.svg)](https://david-dm.org/Azure/react-appinsights)
7-
[![Greenkeeper badge](https://badges.greenkeeper.io/Azure/react-appinsights.svg)](https://greenkeeper.io/)
8-
9-
Javascript module to include [Application Insights][appinsights-js] in applications built with [React][react].
10-
It extends Application Insights with additional React-specific features:
11-
* tracking of router changes
12-
* React components usage statistics
13-
* API to extend the standard telemetry with additional dimensions
3+
[![npm](https://img.shields.io/npm/v/react-appinsights.svg)](https://www.npmjs.com/package/react-appinsights) [![Build Status](https://dev.azure.com/azure-public/react-appinsights/_apis/build/status/Azure.react-appinsights)](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [![Greenkeeper badge](https://badges.greenkeeper.io/Azure/react-appinsights.svg)](https://greenkeeper.io/) [![Downloads per month](https://img.shields.io/npm/dm/react-appinsights.svg)](https://www.npmjs.com/package/react-appinsights)
4+
5+
Javascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react].
6+
`react-appinsights` extends Application Insights with additional React-specific features:
7+
8+
- tracking of router changes
9+
- React components usage statistics
10+
- API to extend the standard telemetry with additional dimensions
1411

1512
## Installation
1613

17-
With npm:
14+
Using npm:
15+
1816
```bash
19-
npm install --save react-appinsights
17+
npm install --save react-appinsights@beta
2018
```
2119

2220
## Usage
2321

24-
To initialize Application Insights add the following to the entry point
25-
file of your application (e.g. index.js):
22+
To initialize Application Insights, add the following to the entry point
23+
file of your application (e.g. `index.js`):
2624

2725
```javascript
28-
import ReactAI from 'react-appinsights';
29-
ReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'});
26+
import { reactAI } from "react-appinsights";
27+
import { ApplicationInsights } from "@microsoft/applicationinsights-web";
28+
29+
let appInsights = new ApplicationInsights({
30+
config: {
31+
instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx",
32+
extensions: [reactAI],
33+
extensionConfig: {
34+
[reactAI.extensionId]: { debug: false }
35+
}
36+
}
37+
});
38+
appInsights.loadAppInsights();
3039
```
31-
See [this Application Insights tutorial for Node.js][appinsights-nodejs]
40+
41+
See [this Application Insights tutorial for Node.js][appinsights-nodejs]
3242
for more details on how to obtain the instrumentation key.
3343

44+
`IReactAISettings` has following non-mandatory configuration options to be passed into the `extensionConfig` object:
45+
46+
```typescript
47+
interface IReactAISettings {
48+
initialContext?: { [key: string]: any }; // Initial context to initialize with
49+
history?: History; // React router history - to enable page view tracking
50+
debug?: boolean; // Debug mode: displays debug messages from ReactAI in console
51+
}
52+
```
53+
3454
#### Track router changes
3555

3656
To track page views, pass a history object to the init method.
3757
For more information see the [documentation][react-router] of the `react-router` package.
3858

39-
4059
```javascript
41-
import ReactAI from 'react-appinsights';
42-
import { Router } from 'react-router-dom';
43-
import { createBrowserHistory } from 'history';
60+
import { reactAI } from "react-appinsights";
61+
import { ApplicationInsights } from "@microsoft/applicationinsights-web";
62+
import { Router } from "react-router-dom";
63+
import { createBrowserHistory } from "history";
64+
65+
const history = createBrowserHistory();
4466

45-
const history = createBrowserHistory()
46-
ReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'}, history);
67+
/*
68+
* In the code sample above, set configuration as follows:
69+
* extensionConfig: {
70+
* [ReactAI.extensionId]: { history: history }
71+
* }
72+
*/
4773

4874
ReactDOM.render(
4975
<Router history={history}>
@@ -55,64 +81,65 @@ ReactDOM.render(
5581

5682
#### Enable React components usage tracking
5783

58-
To enable React components usage tracking, apply the `withTracking` higher-order
84+
To instrument various React components usage tracking, apply the `withAITracking` higher-order
5985
component function.
6086

6187
```javascript
62-
import ReactAI from 'react-appinsights';
88+
import { withAITracking } from 'react-appinsights';
6389

6490
class MyComponent extends React.Component {
65-
...
91+
...
6692
}
6793

68-
export default ReactAI.withTracking(MyComponent);
94+
export default withAITracking(MyComponent);
6995
```
7096

71-
If, for any reason, you want to change the name string of the component
72-
that appears in Application Insights,
73-
you can pass in a custom name as second argument of `withTracking`.
97+
To change the name string of the component that appears in Application Insights,
98+
you can pass a custom name as second argument of `withAITracking`.
7499

75100
```javascript
76-
export default ReactAI.withTracking(MyComponent, "CustomMyComponentName");
101+
export default withAITracking(MyComponent, "CustomMyComponentName");
77102
```
78103

79-
It will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.
80-
However, in order to make this time more accurate it will subtract idle time.
81-
In other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.
104+
It will measure time from the `ComponentDidMount` event through the `ComponentWillUnmount` event.
105+
However, in order to make this more accurate, it will subtract the time in which the user was idle.
106+
In other words, `React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time`.
107+
108+
To 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".
109+
110+
![image](https://user-images.githubusercontent.com/1005174/51357010-c168ac80-1a71-11e9-8df9-348febd2d6dd.png)
111+
112+
You 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.
82113

83-
To see this metric in Azure portal you need to navigate to Application Insights resource,
84-
select Metrics Explorer from the top menu
85-
and configure one of the empty charts to display Custom metrics "React Component Engaged Time"
86-
grouped by Component Name.
87-
It can take up to 10 minutes for new custom metric to appear in Azure Portal.
114+
![image](https://user-images.githubusercontent.com/1005174/51356821-e872ae80-1a70-11e9-9e12-e56a1edcde68.png)
88115

89-
<img width="550" src="https://cloud.githubusercontent.com/assets/3801171/18735093/eeac0496-802f-11e6-9403-50c6fe8aaf9e.png"/>
116+
Please note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.
90117

91118
#### Set application context
92119

93-
To augment all telemetry with additional properties use `setAppContext` method. For instance:
120+
To augment all telemetry with additional properties use `setContext` method. For instance:
94121

95122
```javascript
96-
ReactAI.setAppContext({urlReferrer: document.referrer});
123+
reactAI.setContext({ CorrelationId: "some-unique-correlation-id", Referrer: document.referrer });
97124
```
98125

99-
This will add urlReferrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights:
126+
This will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.
100127

101128
<img width="600" src="https://cloud.githubusercontent.com/assets/3801171/18721651/43c4861e-7fe6-11e6-8541-3614111acc8f.png"/>
102129

103-
#### Get AppInsights object
130+
#### Get original AppInsights object
104131

105132
Use the following method to get the original AppInsights object:
106133

107134
```javascript
108-
var appInsights = ReactAI.ai();
135+
var appInsights = reactAI.appInsights;
109136
```
110137

111-
Refer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.
138+
Refer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.
112139

113140

114-
[react]: https://reactjs.org/
115-
[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript
116-
[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/
117-
[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md
118-
[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components
141+
[react]: https://reactjs.org/
142+
[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript
143+
[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/
144+
[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md
145+
[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components

‎azure-pipelines.yml‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ pool:
88

99
strategy:
1010
matrix:
11-
node_6_x:
12-
node_version: 6.x
1311
node_8_x:
1412
node_version: 8.x
1513
node_10_x:
@@ -28,3 +26,13 @@ steps:
2826
npm run build
2927
npm test
3028
displayName: 'npm install, build and test'
29+
30+
- task: PublishTestResults@2
31+
inputs:
32+
testResultsFiles: '**/test-report.xml'
33+
34+
- task: PublishCodeCoverageResults@1
35+
inputs:
36+
codeCoverageTool: Cobertura
37+
summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml'
38+
reportDirectory: '$(System.DefaultWorkingDirectory)/coverage/lcov-report'

‎babel.config.js‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

0 commit comments

Comments
 (0)