Track time it takes to get a response from DevX API

src/app/services/actions/permissions-action-creator.ts

@@ -72,12 +72,14 @@ export function fetchScopes(query?: IQuery): Function {
  }
  throw (response);
  } catch (error) {
+ const errorMessage = error instanceof Response ?
+ `ApiError: ${error.status}` : `${error}`;
  telemetry.trackException(
  new Error(errorTypes.NETWORK_ERROR),
  SeverityLevel.Error,
  {
  ComponentName: componentNames.FETCH_PERMISSIONS_ACTION,
- Message: `${error}`
+ Message: errorMessage
  });
  return dispatch(fetchScopesError(error));
  }

src/app/services/actions/query-action-creator-util.ts

@@ -1,13 +1,15 @@
-import { AuthenticationHandlerOptions, ResponseType } from '@microsoft/microsoft-graph-client';
-import { MSALAuthenticationProviderOptions } from
- '@microsoft/microsoft-graph-client/lib/src/MSALAuthenticationProviderOptions';
+import {
+ AuthenticationHandlerOptions,
+ ResponseType,
+} from '@microsoft/microsoft-graph-client';
+import { MSALAuthenticationProviderOptions } from '@microsoft/microsoft-graph-client/lib/src/MSALAuthenticationProviderOptions';
 import { IAction } from '../../../types/action';
 import { ContentType } from '../../../types/enums';
 import { IQuery } from '../../../types/query-runner';
 import { IRequestOptions } from '../../../types/request';
 import { GraphClient } from '../graph-client';
 import { authProvider } from '../graph-client/msal-agent';
-import { DEFAULT_USER_SCOPES } from '../graph-constants';
+import { DEFAULT_USER_SCOPES, GRAPH_API_SANDBOX_URL } from '../graph-constants';
 import { QUERY_GRAPH_SUCCESS } from '../redux-constants';
 import { queryRunningStatus } from './query-loading-action-creators';
 
@@ -19,22 +21,21 @@ export function queryResponse(response: object): IAction {
 }
 
 export async function anonymousRequest(dispatch: Function, query: IQuery) {
-
  const authToken = '{token:https://graph.microsoft.com/}';
  const escapedUrl = encodeURIComponent(query.sampleUrl);
- const graphUrl = `https://proxy.apisandbox.msdn.microsoft.com/svc?url=${escapedUrl}`;
+ const graphUrl = `${GRAPH_API_SANDBOX_URL}/svc?url=${escapedUrl}`;
  const sampleHeaders: any = {};
  if (query.sampleHeaders && query.sampleHeaders.length > 0) {
- query.sampleHeaders.forEach(header => {
+ query.sampleHeaders.forEach((header) => {
  sampleHeaders[header.name] = header.value;
  });
  }
 
  const headers = {
- 'Authorization': `Bearer ${authToken}`,
+ Authorization: `Bearer ${authToken}`,
  'Content-Type': 'application/json',
- 'SdkVersion': 'GraphExplorer/4.0',
- ...sampleHeaders
+ SdkVersion: 'GraphExplorer/4.0',
+ ...sampleHeaders,
  };
 
  const options: IRequestOptions = { method: query.selectedVerb, headers };
@@ -44,16 +45,20 @@ export async function anonymousRequest(dispatch: Function, query: IQuery) {
  return fetch(graphUrl, options);
 }
 
-export function authenticatedRequest(dispatch: Function, query: IQuery,
- scopes: string[] = DEFAULT_USER_SCOPES.split(' ')) {
+export function authenticatedRequest(
+ dispatch: Function,
+ query: IQuery,
+ scopes: string[] = DEFAULT_USER_SCOPES.split(' ')
+) {
  return makeRequest(query.selectedVerb, scopes)(dispatch, query);
 }
 
 export function isImageResponse(contentType: string | undefined) {
- if (!contentType) { return false; }
+ if (!contentType) {
+ return false;
+ }
  return (
- contentType === 'application/octet-stream' ||
- contentType.includes('image/')
+ contentType === 'application/octet-stream' || contentType.includes('image/')
  );
 }
 
@@ -98,13 +103,16 @@ const makeRequest = (httpVerb: string, scopes: string[]): Function => {
  sampleHeaders.SdkVersion = 'GraphExplorer/4.0';
 
  if (query.sampleHeaders && query.sampleHeaders.length > 0) {
- query.sampleHeaders.forEach(header => {
+ query.sampleHeaders.forEach((header) => {
  sampleHeaders[header.name] = header.value;
  });
  }
 
  const msalAuthOptions = new MSALAuthenticationProviderOptions(scopes);
- const middlewareOptions = new AuthenticationHandlerOptions(authProvider, msalAuthOptions);
+ const middlewareOptions = new AuthenticationHandlerOptions(
+ authProvider,
+ msalAuthOptions
+ );
  const client = GraphClient.getInstance()
  .api(query.sampleUrl)
  .middlewareOptions([middlewareOptions])

src/app/services/actions/samples-action-creators.ts

@@ -49,12 +49,14 @@ export function fetchSamples(): Function {
  const res = await response.json();
  return dispatch(fetchSamplesSuccess(res.sampleQueries));
  } catch (error) {
+ const errorMessage = error instanceof Response ?
+ `ApiError: ${error.status}` : `${error}`;
  telemetry.trackException(
  new Error(errorTypes.NETWORK_ERROR),
  SeverityLevel.Error,
  {
  ComponentName: componentNames.FETCH_SAMPLES_ACTION,
- Message: `${error}`
+ Message: errorMessage
  });
  return dispatch(fetchSamplesError({ error }));
  }

src/app/services/actions/snippet-action-creator.ts

@@ -1,6 +1,7 @@
 import { SeverityLevel } from '@microsoft/applicationinsights-web';
 import { componentNames, errorTypes, telemetry } from '../../../telemetry';
 import { IAction } from '../../../types/action';
+import { IRequestOptions } from '../../../types/request';
 import { sanitizeQueryUrl } from '../../utils/query-url-sanitization';
 import { parseSampleUrl } from '../../utils/sample-url-generation';
 import { GET_SNIPPET_ERROR, GET_SNIPPET_PENDING, GET_SNIPPET_SUCCESS } from '../redux-constants';
@@ -41,31 +42,34 @@ export function getSnippet(language: string): Function {
 
  dispatch(getSnippetPending());
 
+ const method = 'POST';
+ const headers = {
+ 'Content-Type': 'application/http'
+ };
  // tslint:disable-next-line: max-line-length
  const body = `${sampleQuery.selectedVerb} /${queryVersion}/${requestUrl + search} HTTP/1.1\r\nHost: graph.microsoft.com\r\nContent-Type: application/json\r\n\r\n${JSON.stringify(sampleQuery.sampleBody)}`;
+ const options: IRequestOptions = { method, headers, body };
  const obj: any = {};
- const response = await fetch(snippetsUrl, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/http'
- },
- body
- });
+
+ const response = await fetch(snippetsUrl, options);
  if (response.ok) {
  const result = await response.text();
  obj[language] = result;
  return dispatch(getSnippetSuccess(obj));
  }
  throw (response);
  } catch (error) {
+ const errorMessage = error instanceof Response ?
+ `ApiError: ${error.status}` : `${error}`;
  const sanitizedUrl = sanitizeQueryUrl(sampleQuery.sampleUrl);
  telemetry.trackException(
  new Error(errorTypes.NETWORK_ERROR),
  SeverityLevel.Error,
  {
  ComponentName: componentNames.GET_SNIPPET_ACTION,
  QuerySignature: `${sampleQuery.selectedVerb} ${sanitizedUrl}`,
- Message: `${error}`
+ Language: language,
+ Message: errorMessage
  }
  );
  return dispatch(getSnippetError(error));

src/app/services/graph-constants.ts

@@ -6,3 +6,4 @@ export const ADMIN_AUTH_URL = 'https://signIn.microsoftonline.com/common/adminco
 export const TOKEN_URL = 'https://signIn.microsoftonline.com/common/oauth2/v2.0/token';
 export const DEFAULT_USER_SCOPES = 'openid profile User.Read';
 export const DEVX_API_URL = 'https://graphexplorerapi.azurewebsites.net';
+export const GRAPH_API_SANDBOX_URL = 'https://proxy.apisandbox.msdn.microsoft.com';

src/app/utils/open-api-parser.ts

@@ -1,10 +1,19 @@
 import {
- IOpenApiParseContent, IParameters, IParameterValue,
- IParsedOpenApiResponse, IPathValue, IQueryParameter
+ IOpenApiParseContent,
+ IParameters,
+ IParameterValue,
+ IParsedOpenApiResponse,
+ IPathValue,
+ IQueryParameter,
 } from '../../types/open-api';
 
-export function parseOpenApiResponse(params: IOpenApiParseContent): IParsedOpenApiResponse {
- const { response: { paths }, url } = params;
+export function parseOpenApiResponse(
+ params: IOpenApiParseContent
+): IParsedOpenApiResponse {
+ const {
+ response: { paths },
+ url,
+ } = params;
 
  try {
  const parameters: IParameters[] = [];
@@ -16,7 +25,7 @@ export function parseOpenApiResponse(params: IOpenApiParseContent): IParsedOpenA
  parameters.push({
  verb,
  values: getVerbParameterValues(pathValues[`${verb}`]),
- links: getLinkValues(pathValues[`${verb}`])
+ links: getLinkValues(pathValues[`${verb}`]),
  });
  });
 
@@ -35,7 +44,10 @@ function getVerbParameterValues(values: IPathValue): IParameterValue[] {
  if (parameter.name && parameter.in === 'query') {
  parameterValues.push({
  name: parameter.name,
- items: (parameter.schema && parameter.schema.items) ? parameter.schema.items.enum : []
+ items:
+ parameter.schema && parameter.schema.items
+ ? parameter.schema.items.enum
+ : [],
  });
  }
  });
@@ -52,4 +64,4 @@ function getLinkValues(values: IPathValue): string[] {
  }
  }
  return [];
-}
+}

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

@@ -1,6 +1,9 @@
 /* eslint-disable no-useless-escape */
 import { GRAPH_URL } from '../services/graph-constants';
-import { isAllAlpha, sanitizeQueryParameter } from './query-parameter-sanitization';
+import {
+ isAllAlpha,
+ sanitizeQueryParameter,
+} from './query-parameter-sanitization';
 import { parseSampleUrl } from './sample-url-generation';
 
 // Matches strings with deprecation identifier
@@ -33,25 +36,48 @@ export function isFunctionCall(segment: string): boolean {
 }
 
 /**
- * @param url - query url to be sanitized e.g. https://graph.microsoft.com/v1.0/users/{user-id}
+ * Sanitize Graph API Sandbox URL used when a user is not signed in
+ * @param url - URL to be sanitized
+ */
+export function sanitizeGraphAPISandboxUrl(url: string): string {
+ const urlObject = new URL(url);
+ const queryParams = urlObject.searchParams;
+ // This query parameter holds Graph query URL
+ const queryUrl = queryParams.get('url');
+ if (queryUrl) {
+ queryParams.set('url', sanitizeQueryUrl(queryUrl));
+ }
+ return urlObject.toString();
+}
+
+/**
+ * @param url - query URL to be sanitized e.g. https://graph.microsoft.com/v1.0/users/{user-id}
  */
 export function sanitizeQueryUrl(url: string): string {
  url = decodeURIComponent(url);
 
  const { search, queryVersion, requestUrl } = parseSampleUrl(url);
- const queryString: string = search ? `?${sanitizeQueryParameters(search)}` : '';
+ const queryString: string = search
+ ? `?${sanitizeQueryParameters(search)}`
+ : '';
 
  // Sanitize item path specified in query url
  let resourceUrl = requestUrl;
  if (resourceUrl) {
- resourceUrl = requestUrl.replace(ITEM_PATH_REGEX, (match: string): string => {
- return `${match.substring(0, match.indexOf(':'))}:<value>`;
- });
+ resourceUrl = requestUrl.replace(
+ ITEM_PATH_REGEX,
+ (match: string): string => {
+ return `${match.substring(0, match.indexOf(':'))}:<value>`;
+ }
+ );
 
  // Split requestUrl into segments that can be sanitized individually
  const urlSegments = resourceUrl.split('/');
  urlSegments.forEach((segment, index) => {
- const sanitizedSegment = sanitizePathSegment(urlSegments[index - 1], segment);
+ const sanitizedSegment = sanitizePathSegment(
+ urlSegments[index - 1],
+ segment
+ );
  resourceUrl = resourceUrl.replace(segment, sanitizedSegment);
  });
  }
@@ -69,23 +95,34 @@ export function sanitizeQueryUrl(url: string): string {
 function sanitizePathSegment(previousSegment: string, segment: string): string {
  const segmentsToIgnore = ['$value', '$count', '$ref'];
 
- if (isAllAlpha(segment) || isDeprecation(segment) || SANITIZED_ITEM_PATH_REGEX.test(segment)
- || segmentsToIgnore.includes(segment.toLowerCase()) || ENTITY_NAME_REGEX.test(segment)) {
+ if (
+ isAllAlpha(segment) ||
+ isDeprecation(segment) ||
+ SANITIZED_ITEM_PATH_REGEX.test(segment) ||
+ segmentsToIgnore.includes(segment.toLowerCase()) ||
+ ENTITY_NAME_REGEX.test(segment)
+ ) {
  return segment;
  }
 
  // Check if segment is in this form: users('<some-id>|<UPN>') and tranform to users(<value>)
  if (isFunctionCall(segment)) {
  const openingBracketIndex = segment.indexOf('(');
- const textWithinBrackets = segment.substr(openingBracketIndex + 1, segment.length - 2);
- const sanitizedText = textWithinBrackets.split(',').map(text => {
- if (text.includes('=')) {
- let key = text.split('=')[0];
- key = !isAllAlpha(key) ? '<key>' : key;
- return `${key}=<value>`;
- }
- return '<value>';
- }).join(',');
+ const textWithinBrackets = segment.substr(
+ openingBracketIndex + 1,
+ segment.length - 2
+ );
+ const sanitizedText = textWithinBrackets
+ .split(',')
+ .map((text) => {
+ if (text.includes('=')) {
+ let key = text.split('=')[0];
+ key = !isAllAlpha(key) ? '<key>' : key;
+ return `${key}=<value>`;
+ }
+ return '<value>';
+ })
+ .join(',');
  return `${segment.substring(0, openingBracketIndex)}(${sanitizedText})`;
  }
 

src/app/views/query-response/snippets/snippets-helper.tsx

@@ -70,7 +70,7 @@ function Snippet(props: ISnippetProps) {
  iconProps={copyIcon}
  onClick={async () => {
  genericCopy(snippet);
- trackCopyEvent(sampleQuery, language);
+ trackSnippetCopyEvent(sampleQuery, language);
  }}
  />
  <Monaco
@@ -90,7 +90,7 @@ function Snippet(props: ISnippetProps) {
  );
 }
 
-function trackCopyEvent(query: IQuery, language: string) {
+function trackSnippetCopyEvent(query: IQuery, language: string) {
  const sanitizedUrl = sanitizeQueryUrl(query.sampleUrl);
  telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT,
  {

src/app/views/query-runner/request/auth/Auth.tsx

@@ -20,7 +20,7 @@ export function Auth(props: any) {
 
  const handleCopy = async () => {
  await genericCopy(accessToken!);
- trackCopyEvent();
+ trackTokenCopyEvent();
  };
 
  useEffect(() => {
@@ -70,7 +70,7 @@ export function Auth(props: any) {
  </div>);
 }
 
-function trackCopyEvent() {
+function trackTokenCopyEvent() {
  telemetry.trackEvent(
  eventTypes.BUTTON_CLICK_EVENT,
  {

src/telemetry/ITelemetry.ts

@@ -1,12 +1,13 @@
 import { SeverityLevel } from '@microsoft/applicationinsights-web';
 import { ComponentType } from 'react';
 import { IQuery } from '../types/query-runner';
+import { IRequestOptions } from '../types/request';
 
 export default interface ITelemetry {
  initialize(): void;
  trackEvent(name: string, properties: {}): void;
  trackReactComponent(Component: ComponentType, componentName?: string): ComponentType;
- trackTabClickEvent(tabKey: string, sampleQuery: IQuery): void;
+ trackTabClickEvent(tabKey: string, sampleQuery?: IQuery): void;
  trackLinkClickEvent(url: string, componentName: string): void;
  trackException(error: Error, severityLevel: SeverityLevel, properties: {}): void;
 }