chore: Add newrelic tracking spans to AppViewer engine and AppEditor engine

app/client/src/UITelemetry/generateTraces.ts

@@ -76,15 +76,15 @@ export function startNestedSpan(
   return generatorTrace.startSpan(spanName, spanOptions, parentContext);
 }
 
-export function endSpan(span: Span) {
-  span.end();
+export function endSpan(span?: Span) {
+  span?.end();
 }
 
 export function setAttributesToSpan(
-  span: Span,
-  spanAttributes: SpanAttributes,
+  span?: Span,
+  spanAttributes: SpanAttributes = {},
 ) {
-  span.setAttributes(spanAttributes);
+  span?.setAttributes(spanAttributes);
 }
 
 export function wrapFnWithParentTraceContext(parentSpan: Span, fn: () => any) {

app/client/src/entities/Engine/AppEditorEngine.ts

@@ -66,6 +66,8 @@ import {
   fetchAppThemesAction,
   fetchSelectedAppThemeAction,
 } from "actions/appThemingActions";
+import type { Span } from "@opentelemetry/api";
+import { endSpan, startNestedSpan } from "UITelemetry/generateTraces";
 
 export default class AppEditorEngine extends AppEngine {
   constructor(mode: APP_MODE) {
@@ -87,10 +89,17 @@ export default class AppEditorEngine extends AppEngine {
    * @param AppEnginePayload
    * @returns
    */
-  public *setupEngine(payload: AppEnginePayload): any {
-    yield* super.setupEngine.call(this, payload);
+  public *setupEngine(payload: AppEnginePayload, rootSpan: Span): any {
+    const editorSetupSpan = startNestedSpan(
+      "AppEditorEngine.setupEngine",
+      rootSpan,
+    );
+
+    yield* super.setupEngine.call(this, payload, rootSpan);
     yield put(resetEditorSuccess());
     CodemirrorTernService.resetServer();
+
+    endSpan(editorSetupSpan);
   }
 
   public startPerformanceTracking() {
@@ -109,7 +118,13 @@ export default class AppEditorEngine extends AppEngine {
     toLoadPageId: string,
     applicationId: string,
     allResponses: EditConsolidatedApi,
+    rootSpan: Span,
   ) {
+    const loadPageThemesAndActionsSpan = startNestedSpan(
+      "AppEditorEngine.loadPageThemesAndActions",
+      rootSpan,
+    );
+
     const {
       currentTheme,
       customJSLibraries,
@@ -157,13 +172,39 @@ export default class AppEditorEngine extends AppEngine {
         `Unable to fetch actions for the application: ${applicationId}`,
       );
 
+    const waitForUserSpan = startNestedSpan(
+      "AppEditorEngine.waitForFetchUserSuccess",
+      rootSpan,
+    );
     yield call(waitForFetchUserSuccess);
+    endSpan(waitForUserSpan);
+
+    const waitForSegmentInitSpan = startNestedSpan(
+      "AppEditorEngine.waitForSegmentInit",
+      rootSpan,
+    );
     yield call(waitForSegmentInit, true);
+    endSpan(waitForSegmentInitSpan);
+
+    const waitForFetchEnvironmentsSpan = startNestedSpan(
+      "AppEditorEngine.waitForFetchEnvironments",
+      rootSpan,
+    );
     yield call(waitForFetchEnvironments);
+    endSpan(waitForFetchEnvironmentsSpan);
+
     yield put(fetchAllPageEntityCompletion([executePageLoadActions()]));
+    endSpan(loadPageThemesAndActionsSpan);
   }
 
-  private *loadPluginsAndDatasources(allResponses: EditConsolidatedApi) {
+  private *loadPluginsAndDatasources(
+    allResponses: EditConsolidatedApi,
+    rootSpan: Span,
+  ) {
+    const loadPluginsAndDatasourcesSpan = startNestedSpan(
+      "AppEditorEngine.loadPluginsAndDatasources",
+      rootSpan,
+    );
     const { mockDatasources, pluginFormConfigs } = allResponses || {};
     const isAirgappedInstance = isAirgapped();
     const currentWorkspaceId: string = yield select(getCurrentWorkspaceId);
@@ -195,6 +236,9 @@ export default class AppEditorEngine extends AppEngine {
       [ReduxActionTypes.FETCH_PLUGIN_FORM_CONFIGS_SUCCESS],
       [ReduxActionErrorTypes.FETCH_PLUGIN_FORM_CONFIGS_ERROR],
     );
+
+    endSpan(loadPluginsAndDatasourcesSpan);
+
     if (!pluginFormCall)
       throw new PluginFormConfigsNotFoundError(
         "Unable to fetch plugin form configs",
@@ -205,17 +249,24 @@ export default class AppEditorEngine extends AppEngine {
     toLoadPageId: string,
     applicationId: string,
     allResponses: EditConsolidatedApi,
+    rootSpan: Span,
   ): any {
     yield call(
       this.loadPageThemesAndActions,
       toLoadPageId,
       applicationId,
       allResponses,
+      rootSpan,
     );
-    yield call(this.loadPluginsAndDatasources, allResponses);
+    yield call(this.loadPluginsAndDatasources, allResponses, rootSpan);
   }
 
-  public *completeChore() {
+  public *completeChore(rootSpan: Span) {
+    const completeChoreSpan = startNestedSpan(
+      "AppEditorEngine.completeChore",
+      rootSpan,
+    );
+
     const isFirstTimeUserOnboardingComplete: boolean = yield select(
       getFirstTimeUserOnboardingComplete,
     );
@@ -272,9 +323,13 @@ export default class AppEditorEngine extends AppEngine {
     yield put({
       type: ReduxActionTypes.INITIALIZE_EDITOR_SUCCESS,
     });
+
+    endSpan(completeChoreSpan);
   }
 
-  public *loadGit(applicationId: string) {
+  public *loadGit(applicationId: string, rootSpan: Span) {
+    const loadGitSpan = startNestedSpan("AppEditorEngine.loadGit", rootSpan);
+
     const branchInStore: string = yield select(getCurrentGitBranch);
     yield put(
       restoreRecentEntitiesRequest({
@@ -285,10 +340,13 @@ export default class AppEditorEngine extends AppEngine {
     // init of temporary remote url from old application
     yield put(remoteUrlInputValue({ tempRemoteUrl: "" }));
     // add branch query to path and fetch status
+
     if (branchInStore) {
       history.replace(addBranchParam(branchInStore));
       yield fork(this.loadGitInBackground);
     }
+
+    endSpan(loadGitSpan);
   }
 
   private *loadGitInBackground() {

app/client/src/entities/Engine/AppViewerEngine.ts

@@ -34,7 +34,8 @@ import {
   fetchAppThemesAction,
   fetchSelectedAppThemeAction,
 } from "actions/appThemingActions";
-
+import type { Span } from "@opentelemetry/api";
+import { endSpan, startNestedSpan } from "UITelemetry/generateTraces";
 export default class AppViewerEngine extends AppEngine {
   constructor(mode: APP_MODE) {
     super(mode);
@@ -50,16 +51,30 @@ export default class AppViewerEngine extends AppEngine {
     return;
   }
 
-  *completeChore() {
+  *completeChore(rootSpan: Span) {
+    const completeChoreSpan = startNestedSpan(
+      "AppViewerEngine.completeChore",
+      rootSpan,
+    );
+
     yield call(waitForWidgetConfigBuild);
     yield put({
       type: ReduxActionTypes.INITIALIZE_PAGE_VIEWER_SUCCESS,
     });
     yield spawn(reportSWStatus);
+
+    endSpan(completeChoreSpan);
   }
 
-  *setupEngine(payload: AppEnginePayload) {
-    yield call(super.setupEngine.bind(this), payload);
+  *setupEngine(payload: AppEnginePayload, rootSpan: Span) {
+    const viewerSetupSpan = startNestedSpan(
+      "AppViewerEngine.setupEngine",
+      rootSpan,
+    );
+
+    yield call(super.setupEngine.bind(this), payload, rootSpan);
+
+    endSpan(viewerSetupSpan);
   }
 
   startPerformanceTracking() {
@@ -78,7 +93,13 @@ export default class AppViewerEngine extends AppEngine {
     toLoadPageId: string,
     applicationId: string,
     allResponses: DeployConsolidatedApi,
+    rootSpan: Span,
   ): any {
+    const loadAppEntitiesSpan = startNestedSpan(
+      "AppViewerEngine.loadAppEntities",
+      rootSpan,
+    );
+
     const {
       currentTheme,
       customJSLibraries,
@@ -128,9 +149,29 @@ export default class AppViewerEngine extends AppEngine {
         `Unable to fetch actions for the application: ${applicationId}`,
       );
 
+    const waitForUserSpan = startNestedSpan(
+      "AppViewerEngine.waitForFetchUserSuccess",
+      rootSpan,
+    );
     yield call(waitForFetchUserSuccess);
+    endSpan(waitForUserSpan);
+
+    const waitForSegmentSpan = startNestedSpan(
+      "AppViewerEngine.waitForSegmentInit",
+      rootSpan,
+    );
     yield call(waitForSegmentInit, true);
+    endSpan(waitForSegmentSpan);
+
+    const waitForEnvironmentsSpan = startNestedSpan(
+      "AppViewerEngine.waitForFetchEnvironments",
+      rootSpan,
+    );
     yield call(waitForFetchEnvironments);
+    endSpan(waitForEnvironmentsSpan);
+
     yield put(fetchAllPageEntityCompletion([executePageLoadActions()]));
+
+    endSpan(loadAppEntitiesSpan);
   }
 }

app/client/src/entities/Engine/index.ts

@@ -19,6 +19,8 @@ import URLGeneratorFactory from "entities/URLRedirect/factory";
 import { updateBranchLocally } from "actions/gitSyncActions";
 import { getCurrentGitBranch } from "selectors/gitSyncSelectors";
 import { restoreIDEEditorViewMode } from "actions/ideActions";
+import type { Span } from "@opentelemetry/api";
+import { endSpan, startNestedSpan } from "UITelemetry/generateTraces";
 
 export interface AppEnginePayload {
   applicationId?: string;
@@ -29,10 +31,14 @@ export interface AppEnginePayload {
 }
 
 export interface IAppEngine {
-  setupEngine(payload: AppEnginePayload): any;
-  loadAppData(payload: AppEnginePayload): any;
+  setupEngine(payload: AppEnginePayload, rootSpan: Span): any;
+  loadAppData(payload: AppEnginePayload, rootSpan: Span): any;
   loadAppURL(pageId: string, pageIdInUrl?: string): any;
-  loadAppEntities(toLoadPageId: string, applicationId: string): any;
+  loadAppEntities(
+    toLoadPageId: string,
+    applicationId: string,
+    rootSpan: Span,
+  ): any;
   loadGit(applicationId: string): any;
   completeChore(): any;
 }
@@ -55,13 +61,19 @@ export default abstract class AppEngine {
     toLoadPageId: string,
     applicationId: string,
     allResponses: InitConsolidatedApi,
+    rootSpan: Span,
   ): any;
-  abstract loadGit(applicationId: string): any;
+  abstract loadGit(applicationId: string, rootSpan: Span): any;
   abstract startPerformanceTracking(): any;
   abstract stopPerformanceTracking(): any;
-  abstract completeChore(): any;
+  abstract completeChore(rootSpan: Span): any;
 
-  *loadAppData(payload: AppEnginePayload, allResponses: InitConsolidatedApi) {
+  *loadAppData(
+    payload: AppEnginePayload,
+    allResponses: InitConsolidatedApi,
+    rootSpan: Span,
+  ) {
+    const loadAppDataSpan = startNestedSpan("AppEngine.loadAppData", rootSpan);
     const { applicationId, branch, pageId } = payload;
     const { pages } = allResponses;
     const apiCalls: boolean = yield failFastApiCalls(
@@ -82,8 +94,11 @@ export default abstract class AppEngine {
         ReduxActionErrorTypes.FETCH_PAGE_LIST_ERROR,
       ],
     );
-    if (!apiCalls)
+
+    if (!apiCalls) {
       throw new PageNotFoundError(`Cannot find page with id: ${pageId}`);
+    }
+
     const application: ApplicationPayload = yield select(getCurrentApplication);
     const currentGitBranch: ReturnType<typeof getCurrentGitBranch> =
       yield select(getCurrentGitBranch);
@@ -97,25 +112,36 @@ export default abstract class AppEngine {
       application.applicationVersion,
       this._mode,
     );
+
+    endSpan(loadAppDataSpan);
     return { toLoadPageId, applicationId: application.id };
   }
 
-  *setupEngine(payload: AppEnginePayload): any {
+  *setupEngine(payload: AppEnginePayload, rootSpan: Span): any {
+    const setupEngineSpan = startNestedSpan("AppEngine.setupEngine", rootSpan);
+
     const { branch } = payload;
     yield put(updateBranchLocally(branch || ""));
     yield put(setAppMode(this._mode));
     yield put(restoreIDEEditorViewMode());
     yield put({ type: ReduxActionTypes.START_EVALUATION });
+
+    endSpan(setupEngineSpan);
   }
 
-  *loadAppURL(pageId: string, pageIdInUrl?: string) {
+  *loadAppURL(pageId: string, pageIdInUrl: string = "", rootSpan: Span) {
     try {
+      const loadAppUrlSpan = startNestedSpan("AppEngine.loadAppURL", rootSpan);
+
       if (!this._urlRedirect) return;
       const newURL: string = yield call(
         this._urlRedirect.generateRedirectURL.bind(this),
         pageId,
         pageIdInUrl,
       );
+
+      endSpan(loadAppUrlSpan);
+
       if (!newURL) return;
       history.replace(newURL);
     } catch (e) {