add response time profiling code, add response time profiling to /pro…

…jects (#222)

* add response time profiling code, add profile to /projects

* add profiling api endpoint

* remove report name assignment from startTimeRecord method

* remove explicit return from startRimeRecord method

* bump version -> v1.0.17

.env.next

@@ -1,4 +1,5 @@
 GA_TRACKING_ID="UA-123456789-0"
 GATSBY_API_ENDPOINT="https://pub-api-test.azurewebsites.net/api"
+GATSBY_PROFILING_API_ENDPOINT="https://pub-profiler-collector-test.azurewebsites.net"
 BUILD_PATH_PREFIX="/"
 BUILD_SITE_URL="https://projectunicorn-next.surge.sh"

.env.release

@@ -1,3 +1,4 @@
 GATSBY_API_ENDPOINT="https://pub-api.azurewebsites.net/api"
+GATSBY_PROFILING_API_ENDPOINT="https://pub-profiler-collector.azurewebsites.net"
 BUILD_PATH_PREFIX="/"
 BUILD_SITE_URL="https://projectunicorn.net"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pub",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "private": true,
   "scripts": {
     "build": "gatsby build --prefix-paths",
@@ -44,7 +44,7 @@
     "gatsby-transformer-remark": "2.7.1",
     "gatsby-transformer-sharp": "2.4.4",
     "gatsby-transformer-yaml": "2.3.1",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.19",
     "prismjs": "1.20.0",
     "prop-types": "15.7.2",
     "react": "16.13.1",

src/api/index.ts

@@ -1,6 +1,7 @@
 export * from './types';
 export * from './api-service';
 export * from './auth-service';
+export * from './profiling-service';
 export * from './http-client';
 export * from './service-resolver';
 export * from './stack-exchange-service';

src/api/profiling-service.ts

@@ -0,0 +1,28 @@
+import { HttpClient } from './http-client';
+
+export interface ProfilingReport {
+  name: string;
+  value: number;
+  additionalInfo: string;
+}
+
+export class ProfilingService {
+  private headers = {
+    Accept: 'application/json',
+    'Content-Type': 'application/json; charset=utf-8',
+  };
+
+  private apiEndpoint: string;
+
+  public constructor() {
+    this.apiEndpoint = process.env.GATSBY_PROFILING_API_ENDPOINT || '';
+  }
+
+  public async sendReport(report: ProfilingReport) {
+    return await HttpClient.post(
+      `${this.apiEndpoint}/report`,
+      this.headers,
+      report,
+    );
+  }
+}

src/api/service-resolver.ts

@@ -1,15 +1,22 @@
-import { ApiService } from './api-service';
-import { AuthService } from './auth-service';
-import { StackExchangeService } from './stack-exchange-service';
+import {
+  ApiService,
+  AuthService,
+  ProfilingService,
+  StackExchangeService,
+} from './';
 import {
   MockApiService,
   MockAuthService,
+  MockProfilingService,
   MockStackExchangeService,
 } from '@mocks';
 
 export class ServiceResolver {
   private static apiServiceInstance?: MockApiService | ApiService;
   private static authServiceInstance?: MockAuthService | AuthService;
+  private static profilingServiceInstance?:
+    | MockProfilingService
+    | ProfilingService;
   private static stackExchangeServiceInstance?:
     | MockStackExchangeService
     | StackExchangeService;
@@ -22,6 +29,10 @@ export class ServiceResolver {
     return this.getAuthServiceInstance();
   }
 
+  public static profilingResolver() {
+    return this.getProfilingServiceInstancxe();
+  }
+
   public static stackExchangeResolver() {
     return this.getStackExchangeServiceInstance();
   }
@@ -44,6 +55,15 @@ export class ServiceResolver {
     return this.authServiceInstance;
   }
 
+  private static getProfilingServiceInstancxe() {
+    if (this.profilingServiceInstance === undefined) {
+      this.profilingServiceInstance = this.useMock()
+        ? new MockProfilingService()
+        : new ProfilingService();
+    }
+    return this.profilingServiceInstance;
+  }
+
   private static getStackExchangeServiceInstance() {
     if (this.stackExchangeServiceInstance === undefined) {
       this.stackExchangeServiceInstance = this.useMock()

src/components/projects/project-gallery/project-gallery.tsx

@@ -6,6 +6,7 @@ import { ApiResponse, ErrorResponse, Project, ServiceResolver } from '@api';
 import { FeedbackForm } from '@components/shared/form';
 import { CloseButton, Ribbon } from '@components/shared/ribbons';
 import { Loader, Seo, Wrapper } from '@components/shared';
+import { ProfilingUtils } from '@utils';
 
 type OwnProps = {};
 type ProjectGalleryProps = OwnProps & RouteComponentProps;
@@ -19,6 +20,11 @@ const ProjectGallery: FC<ProjectGalleryProps> = () => {
 
   useEffect(() => {
     const api = ServiceResolver.apiResolver();
+    const profiler = new ProfilingUtils(
+      'pub-ui-projects-response-time',
+      'measure the response time of /projects from client-side.',
+    );
+    profiler.startTimeRecord();
 
     async function fetchContent() {
       try {
@@ -29,6 +35,7 @@ const ProjectGallery: FC<ProjectGalleryProps> = () => {
         if (response.ok) {
           const projects = response.data as Project[];
           setProjects(projects);
+          profiler.endTimeRecord();
         } else {
           // TODO: remove, currently this will never execute.
           setError((response.data as ErrorResponse).message);

src/mocks/index.ts

@@ -1,5 +1,6 @@
 export * from './responses';
 export * from './mock-api-service';
 export * from './mock-auth-service';
+export * from './mock-profiling-service';
 export * from './mock-stack-exchange-service';
 export * from './mock-theme-provider';

src/mocks/mock-profiling-service.ts

@@ -0,0 +1,7 @@
+import { ProfilingReport } from '@api/profiling-service';
+
+export class MockProfilingService {
+  public sendReport(report: ProfilingReport) {
+    return report;
+  }
+}

src/utils/index.ts

@@ -4,3 +4,4 @@ export * from './string-utils';
 export * from './url-utils';
 export * from './form-validation';
 export * from './general-utils';
+export * from './profiling-utils';

src/utils/profiling-utils.ts

@@ -0,0 +1,44 @@
+/**
+ * general profiling utility class to
+ * measure and report application performance
+ * based on report identifier - 'reportName'
+ */
+import { ProfilingReport, ProfilingService } from '@api/profiling-service';
+import { ServiceResolver } from '@api';
+import { MockProfilingService } from '@mocks';
+
+export class ProfilingUtils {
+  private startTime: number;
+  private endTime: number;
+  private reportName: string;
+  private additionalReportInfo: string;
+  private profilingService: MockProfilingService | ProfilingService;
+
+  constructor(reportName: string, additionalReportInfo: string) {
+    this.startTime = 0;
+    this.endTime = 0;
+    this.reportName = reportName;
+    this.additionalReportInfo = additionalReportInfo;
+    this.profilingService = ServiceResolver.profilingResolver();
+  }
+
+  public startTimeRecord(): void {
+    this.startTime = Date.now();
+  }
+
+  public endTimeRecord(): void {
+    this.endTime = Date.now();
+    const elapsedTime = this.endTime - this.startTime;
+    const report: ProfilingReport = {
+      name: this.reportName,
+      value: elapsedTime,
+      additionalInfo: this.additionalReportInfo,
+    };
+
+    this.sendReport(report);
+  }
+
+  private sendReport(report: ProfilingReport) {
+    this.profilingService.sendReport(report);
+  }
+}