Track time it takes to get a response from DevX API #875

millicentachieng · 2021-03-03T06:12:13Z

Overview

Add a custom event which allows us to capture the time it takes for a call to our DevX API to return a response.

Application Insights JS SDK offers two methods to use to track events:

appInsights.startTrackEvent(eventName), to be called just before the tracked call
appInsights.stopTrackEvent(eventName, properties) to be called just after the tracked call

Application Insights will add a custom property duration with the API call duration in milliseconds.

Testing Instructions

Open Developer Tools on browser then go Network tab
Fetching samples, code snippets, permissions or autocomplete options should trigger a tracked API call
Inspect data sent to Application Insights. Below is an example of how the data should look like:

github-actions · 2021-03-03T06:17:25Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net

github-actions · 2021-03-03T07:08:13Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net

jobala

Suggestion

Instead of using trackApiCallEvent to make network requests consider overriding fetch because developers won't have to remember to use trackApiCallEvent instead of fetch and this approach also maintains the intuitiveness of using fetch for network calls.

You can override fetch with the following snippet.

windows.fetch = telemetry.trackedApiCall

Remember to do this in App.tsx and to change the signature of trackApiCallEvent so that the componentName param is last that way you'll avoid breaking calls to fetch that you are not interested in tracking.

zengin · 2021-03-03T17:13:37Z

@jobala I wouldn't recommend changing a global function at the JavaScript API level. trackApiCallEvent is a descriptive name implying what it is doing. This way, we also make sure that telemetry is "opt-in". Otherwise developers may start emitting telemetry unintentionally if fetch is redefined. I understand that optional componentName can act as the arbiter of this decision, but that is more implicit and easy to cause a mistake.

@millicentachieng network calls to DevX API are failing when I use the static deployment. Constructed URL seems to be wrong. Is that expected?

Request URL: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net/[object%20Object]/api/graphexplorersnippets?lang=javascript

millicentachieng · 2021-03-03T17:49:54Z

Thanks for the feedback @zengin and @jobala.

I'm leaning towards having the tracking being opt-in as well. @ddyett, what's your take?

Regarding the API call for fetching snippets, it's an issue that's been fixed not too long ago. I'll merge the fix into this branch.

…ph-explorer-v4 into feature/trackDevXAPICalls

github-actions · 2021-03-03T17:56:15Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net

src/telemetry/telemetry.ts

ddyett · 2021-03-03T21:49:06Z

I'm leaning towards having the tracking being opt-in as well. @ddyett, what's your take?

Whether it's opt in depends on comfort level that we are properly sanitized. I think there's benefit in telemetry automatically being available provided we trust it's sanitized and it doesn't generate massive increases in data costs. The typical pattern I've seen in the past is that we actually put this as part of middleware in the http pipeline which generally automatically covers everyone. I don't have a problem with this current approach but when someone wants to add a new call the answer will probably be yes we should track it so the pure fetch call should almost never be used.

My expectation would have been that trackApiCallEvent accepts the function so it's explicit what's been called. That way you can just expose from telelmetry class a trackevent and it becomes non-specific to making a web call or some other action we want to track. I see though that you want information from the parameters and response so that limits that.

thewahome

Suggestion 2: Middleware

We can take advantage of redux middleware which will allow us to keep the code as-is and add the side-effects in a more react way.

Middleware has access to the state and action properties which would be useful to create the custom event. It would also give us the advantage of one source of truth for when we need to change/add/remove a parameter to track.

Here is a short introduction to redux middleware.

jobala · 2021-03-08T06:38:46Z

@millicentachieng

It makes sense for users to explicitly opt in to track requests and we can make the design better by separating the tracking and network request functionality because it is not obivous from the name that trackApiCallEvent also makes a network call.

The tracking and network call can be separated using the decorator pattern and we'll have the added advantage of not modifying fetch calls to trackApiCallEvent calls. The code is show below

@telemetry.trackApiCallEvent
fetch(...)

The decorator implementation below shows how you can use a decorator to get the elapsed time.

const trackApiCallEvent = (
  target: Object,
  propertyKey: string,
  descriptor: PropertyDescriptor
) => {
  const method = descriptor.value;

  descriptor.value = function (...args) {
    const start = ...
    const result = method.apply(this, args);
    const finish = ...
    const elapsedTime = finish - start
    return result;
  };

EDIT:
I just realized this is what @ddyett was talking about in his comment. Another advantage of this approach is you get the paramaters and response as well.

My expectation would have been that trackApiCallEvent accepts the function so it's explicit what's been called. That way you can just expose from telelmetry class a trackevent and it becomes non-specific to making a web call or some other action we want to track. I see though that you want information from the parameters and response so that limits that.

millicentachieng · 2021-03-12T13:59:27Z

@jobala, @thewahome I've reviewed your comments on using a decorator or middleware but I have another suggestion. Application Insights has a setting where you can enable auto-tracking of fetch calls. The result is what we are looking for. Here's a sample of the data collected:

{
    "baseType": "RemoteDependencyData",
    "baseData": {
        "id": "|eca9e4e2d022464eb9291ffe5cb60194.e3e36b21410349b5",
        "ver": 2,
        "name": "GET https://graphexplorerapi.azurewebsites.net/samples",
        "resultCode": "200",
        "duration": "00:00:01.835",
        "success": true,
        "data": "GET https://graphexplorerapi.azurewebsites.net/samples",
        "target": "graphexplorerapi.azurewebsites.net",
        "type": "Fetch",
        "properties": {
            "HttpMethod": "GET",
            "ApplicationName": "Graph Explorer v4",
            "IsAuthenticated": "true"
        },
        "measurements": {}
    }
}

We can then have a processor that filter's out fetch requests that we do not need.

thewahome · 2021-03-12T14:16:40Z

This looks good!! Would the preprocessor be able to also filter out the url contents for PII?

thewahome · 2021-03-12T14:18:26Z

Do we plan on using it for all our external calls? Including the run query?

millicentachieng · 2021-03-12T14:19:05Z

@thewahome Yes, the processor will sanitize the urls.

millicentachieng · 2021-03-12T14:23:43Z

It also captures results from run query. I'm thinking that can be an important metric too to see which queries have a high failure rate, whether caused by missing permissions or wrongly formatted query.

github-actions · 2021-03-12T18:59:45Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net

github-actions · 2021-03-12T19:03:47Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net

millicentachieng · 2021-03-15T08:51:04Z

@thewahome, @jobala Please review the new changes

src/telemetry/telemetry.ts

github-actions · 2021-03-16T07:17:00Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net

src/telemetry/filters.ts

MIchaelMainer

Have we performed a review of the Application Insights data captured with these changes to verify that we aren't capturing customer data? What were the user actions in the staging site and did they exercise all of the changes in the this PR?

src/app/utils/query-url-sanitization.ts

src/telemetry/filters.ts

src/telemetry/telemetry.ts

github-actions · 2021-03-25T17:57:56Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net

github-actions · 2021-03-26T15:29:01Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net

thewahome · 2021-03-29T10:32:41Z

@millicentachieng If you'd like to test the telemetry on the staging site, you can:

go to the workflow file
in the Build And Deploy stage, add.

- name: Build And Deploy
        env:
          REACT_APP_INSTRUMENTATION_KEY: ${{ secrets.REACT_APP_INSTRUMENTATION_KEY }}

in the secrets page you can add a new secret: REACT_APP_INSTRUMENTATION_KEY

Once the staging environment is created, you will be able to test your changes

github-actions · 2021-03-29T13:33:46Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net

github-actions · 2021-03-31T12:46:23Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net

github-actions · 2021-04-01T09:17:14Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-875.centralus.azurestaticapps.net

* Chore(deps): Bump elliptic from 6.5.3 to 6.5.4 (#917) * Chore(deps): Bump y18n from 3.2.1 to 3.2.2 (#919) * Track time it takes to get a response from DevX API (#875) * Fix: javascript injection (#925)

Track time it takes to get a response from DevX API

e9ac3a3

millicentachieng requested review from zengin, MIchaelMainer, jobala and thewahome March 3, 2021 06:12

Merge branch 'dev' into feature/trackDevXAPICalls

a103fc5

jobala reviewed Mar 3, 2021

View reviewed changes

millicentachieng requested a review from ddyett March 3, 2021 17:40

Merge branch 'dev' of https://github.com/microsoftgraph/microsoft-gra…

5a2740a

…ph-explorer-v4 into feature/trackDevXAPICalls

ddyett reviewed Mar 3, 2021

View reviewed changes

src/telemetry/telemetry.ts Outdated Show resolved Hide resolved

thewahome reviewed Mar 4, 2021

View reviewed changes

millicentachieng requested a review from irvinesunday March 8, 2021 16:30

Millicent Achieng added 2 commits March 12, 2021 21:36

Enable AppInsights tracking of external API calls

4a16515

Merge branch 'dev' into feature/trackDevXAPICalls

daeb51b

millicentachieng force-pushed the feature/trackDevXAPICalls branch from 71b1323 to daeb51b Compare March 12, 2021 18:51

Remove unused import

eb5a618

thewahome reviewed Mar 15, 2021

View reviewed changes

src/telemetry/telemetry.ts Outdated Show resolved Hide resolved

Move all telemetry filter functions to a separate file

075cee1

thewahome reviewed Mar 17, 2021

View reviewed changes

src/telemetry/filters.ts Show resolved Hide resolved

MIchaelMainer reviewed Mar 19, 2021

View reviewed changes

src/app/utils/query-url-sanitization.ts Show resolved Hide resolved

src/telemetry/filters.ts Outdated Show resolved Hide resolved

src/telemetry/filters.ts Show resolved Hide resolved

MIchaelMainer reviewed Mar 19, 2021

View reviewed changes

src/telemetry/filters.ts Show resolved Hide resolved

src/telemetry/telemetry.ts Outdated Show resolved Hide resolved

Add comments and rename method to capture what it does

ddf4028

jobala approved these changes Mar 26, 2021

View reviewed changes

Linting updates

aee368e

thewahome self-requested a review March 29, 2021 10:25

thewahome approved these changes Mar 29, 2021

View reviewed changes

Merge branch 'dev' into feature/trackDevXAPICalls

ec19d82

Merge branch 'dev' into feature/trackDevXAPICalls

5612cb2

millicentachieng merged commit 3fb99df into dev Apr 1, 2021

millicentachieng deleted the feature/trackDevXAPICalls branch April 1, 2021 13:42

millicentachieng linked an issue May 20, 2021 that may be closed by this pull request

We should add instrumentation for outgoingservicerequest #839

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Track time it takes to get a response from DevX API #875

Track time it takes to get a response from DevX API #875

millicentachieng commented Mar 3, 2021 •

edited

Loading

github-actions bot commented Mar 3, 2021

github-actions bot commented Mar 3, 2021

jobala left a comment •

edited

Loading

zengin commented Mar 3, 2021

millicentachieng commented Mar 3, 2021

github-actions bot commented Mar 3, 2021

ddyett commented Mar 3, 2021 •

edited

Loading

thewahome left a comment

jobala commented Mar 8, 2021 •

edited

Loading

millicentachieng commented Mar 12, 2021 •

edited

Loading

thewahome commented Mar 12, 2021

thewahome commented Mar 12, 2021

millicentachieng commented Mar 12, 2021

millicentachieng commented Mar 12, 2021

github-actions bot commented Mar 12, 2021

github-actions bot commented Mar 12, 2021

millicentachieng commented Mar 15, 2021

github-actions bot commented Mar 16, 2021

MIchaelMainer left a comment

github-actions bot commented Mar 25, 2021

github-actions bot commented Mar 26, 2021

thewahome commented Mar 29, 2021

github-actions bot commented Mar 29, 2021

github-actions bot commented Mar 31, 2021

github-actions bot commented Apr 1, 2021

Track time it takes to get a response from DevX API #875

Track time it takes to get a response from DevX API #875

Conversation

millicentachieng commented Mar 3, 2021 • edited Loading

Overview

Testing Instructions

github-actions bot commented Mar 3, 2021

github-actions bot commented Mar 3, 2021

jobala left a comment • edited Loading

Choose a reason for hiding this comment

Suggestion

zengin commented Mar 3, 2021

millicentachieng commented Mar 3, 2021

github-actions bot commented Mar 3, 2021

ddyett commented Mar 3, 2021 • edited Loading

thewahome left a comment

Choose a reason for hiding this comment

Suggestion 2: Middleware

jobala commented Mar 8, 2021 • edited Loading

millicentachieng commented Mar 12, 2021 • edited Loading

thewahome commented Mar 12, 2021

thewahome commented Mar 12, 2021

millicentachieng commented Mar 12, 2021

millicentachieng commented Mar 12, 2021

github-actions bot commented Mar 12, 2021

github-actions bot commented Mar 12, 2021

millicentachieng commented Mar 15, 2021

github-actions bot commented Mar 16, 2021

MIchaelMainer left a comment

Choose a reason for hiding this comment

github-actions bot commented Mar 25, 2021

github-actions bot commented Mar 26, 2021

thewahome commented Mar 29, 2021

github-actions bot commented Mar 29, 2021

github-actions bot commented Mar 31, 2021

github-actions bot commented Apr 1, 2021

millicentachieng commented Mar 3, 2021 •

edited

Loading

jobala left a comment •

edited

Loading

ddyett commented Mar 3, 2021 •

edited

Loading

jobala commented Mar 8, 2021 •

edited

Loading

millicentachieng commented Mar 12, 2021 •

edited

Loading