chore: Fix bugs in logic for capturing web vitals for client (#32371)

## Description This PR fixes logic to capture traces only when both end time and start time are available for a span. The hypothesis is that if a span is captured but its end time is missing, new relic will add current time as end time. This end time may be added after a few minutes. This is skewing the metrics for evaluation traces. The PR also does refactor of the traces code for general better readability. Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Sanity" ### 🔍 Cypress test results  > [!IMPORTANT] > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/8612102498> > Commit: `64b79261b44cc96c16429bf043565cc92d9d7992` > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8612102498&attempt=1" target="_blank">Click here!</a> > All cypress tests have passed 🎉🎉🎉   ## Summary by CodeRabbit - **Refactor** - Unified span creation for telemetry with improved parameter handling and attribute management. - Enhanced span timing and nesting logic for better performance tracking. - **Chores** - Simplified telemetry tracing logic across various modules by standardizing the use of new span management functions.
2024-04-09 14:25:46 +05:30 · 2024-04-09 14:25:46 +05:30 · 021b4177ea
commit 021b4177ea
parent 5870bd399d
10 changed files with 157 additions and 71 deletions
--- a/app/client/docker/templates/nginx-app.conf.template
+++ b/app/client/docker/templates/nginx-app.conf.template
@ -49,6 +49,7 @@ server {
        sub_filter __APPSMITH_NEW_RELIC_ACCOUNT_ID__ '${APPSMITH_NEW_RELIC_ACCOUNT_ID}';
        sub_filter __APPSMITH_NEW_RELIC_APPLICATION_ID__ '${APPSMITH_NEW_RELIC_APPLICATION_ID}';
        sub_filter __APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY__ '${APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY}';
+        sub_filter __APPSMITH_NEW_RELIC_BROWSER_AGENT_ENDPOINT__ '${APPSMITH_NEW_RELIC_BROWSER_AGENT_ENDPOINT}';
        sub_filter __APPSMITH_NEW_RELIC_ACCOUNT_ENABLE__ '${APPSMITH_NEW_RELIC_ACCOUNT_ENABLE}';
        sub_filter __APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY__ '${APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY}';
        sub_filter __APPSMITH_NEW_RELIC_OTEL_SERVICE_NAME__ '${APPSMITH_NEW_RELIC_OTEL_SERVICE_NAME}';
--- a/app/client/jest.config.js
+++ b/app/client/jest.config.js
@ -89,6 +89,9 @@ module.exports = {
        browserAgentlicenseKey: parseConfig(
          "__APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY__",
        ),
+        browserAgentEndpoint:  parseConfig(
+          "__APPSMITH_NEW_RELIC_BROWSER_AGENT_ENDPOINT__",
+        ),
        otlpLicenseKey: parseConfig("__APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY__"),
        otlpServiceName: parseConfig(
          "__APPSMITH_NEW_RELIC_OTEL_SERVICE_NAME__",
--- a/app/client/package.json
+++ b/app/client/package.json
@ -64,6 +64,7 @@
    "@loadable/component": "^5.15.3",
    "@manaflair/redux-batch": "^1.0.0",
    "@mantine/hooks": "^5.10.1",
+    "@newrelic/browser-agent": "^1.255.0",
    "@opentelemetry/auto-instrumentations-web": "^0.33.2",
    "@opentelemetry/context-zone": "^1.17.1",
    "@opentelemetry/exporter-trace-otlp-proto": "^0.44.0",
--- a/app/client/public/index.html
+++ b/app/client/public/index.html
@ -43,27 +43,6 @@
        // NREUM variable is required when we are we are are dynamically loading new relic browser agent script
        NREUM = undefined
      </script>
-      <script>
-
-        const enableNewRelic=parseConfig("__APPSMITH_NEW_RELIC_ACCOUNT_ENABLE__");
-      //only when newRelic is enabled do we load the browser agent script
-      if (!!enableNewRelic) {
-          const accountId = parseConfig("__APPSMITH_NEW_RELIC_ACCOUNT_ID__");
-          const applicationId = parseConfig("__APPSMITH_NEW_RELIC_APPLICATION_ID__");
-          const browserAgentlicenseKey = parseConfig("__APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY__");
-          const script = document.createElement("script");
-          //we load the new relic browser agent script from our CDN.
-          script.src = "https://assets.appsmith.com/newRelicBrowserAgent1.js";
-          script.onload = () => {
-            // we have defined and init function within the Browser agent script.
-            // This init fn gets assigned to a global var called NEW_RELIC_BROWSER_AGENT, when the script tag element loads
-            // we call the init fn with all env vars. Through this step browser agent has the required license key to push telemetry info to new relic.
-            NEW_RELIC_BROWSER_AGENT && NEW_RELIC_BROWSER_AGENT.init([accountId,applicationId,browserAgentlicenseKey]);
-          };
-          const head = document.getElementsByTagName("head")[0];
-          head && head.appendChild(script);
-        }
-      </script>
    <script>
        window.__APPSMITH_CHUNKS_TO_PRELOAD =
      <%=
@ -246,6 +225,7 @@
          accountId: parseConfig("__APPSMITH_NEW_RELIC_ACCOUNT_ID__"),
          applicationId: parseConfig("__APPSMITH_NEW_RELIC_APPLICATION_ID__"),
          browserAgentlicenseKey: parseConfig("__APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY__"),
+          browserAgentEndpoint: parseConfig("__APPSMITH_NEW_RELIC_BROWSER_AGENT_ENDPOINT__"),
          otlpLicenseKey: parseConfig("__APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY__"),
          //OTLP following the naming convention of Sdk initialisation
          otlpServiceName: parseConfig("__APPSMITH_NEW_RELIC_OTEL_SERVICE_NAME__"),
--- a/app/client/src/UITelemetry/auto-otel-web.js
+++ b/app/client/src/UITelemetry/auto-otel-web.js
@ -1,6 +1,5 @@
 import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-base";
 import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
-import { getWebAutoInstrumentations } from "@opentelemetry/auto-instrumentations-web";
 import { registerInstrumentations } from "@opentelemetry/instrumentation";
 import { ZoneContextManager } from "@opentelemetry/context-zone";
 import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";
@ -67,17 +66,5 @@ provider.register({
 });

 registerInstrumentations({
-  instrumentations: [
-    getWebAutoInstrumentations({
-      "@opentelemetry/instrumentation-xml-http-request": {
-        enabled: true,
-      },
-      "@opentelemetry/instrumentation-document-load": {
-        enabled: true,
-      },
-      "@opentelemetry/instrumentation-user-interaction": {
-        enabled: true,
-      },
-    }),
-  ],
+  instrumentations: [],
 });
--- a/app/client/src/UITelemetry/generateTraces.ts
+++ b/app/client/src/UITelemetry/generateTraces.ts
@ -1,4 +1,4 @@
-import type { Span, Attributes, HrTime, TimeInput } from "@opentelemetry/api";
+import type { Span, Attributes, TimeInput } from "@opentelemetry/api";
 import { SpanKind } from "@opentelemetry/api";
 import { context } from "@opentelemetry/api";
 import { trace } from "@opentelemetry/api";
@ -38,38 +38,10 @@ export function startNestedSpan(
  return generatorTrace.startSpan(spanName, attributes, parentContext);
 }

-function convertHighResolutionTimeToEpoch(hr: HrTime) {
-  const epochInSeconds = hr[0];
-  const millisecondFragment = Math.round(hr[1] / 1000000);
-  const epochInMilliseconds = epochInSeconds * 1000 + millisecondFragment;
-  return epochInMilliseconds;
-}
-
-function addTraceToNewRelicSession(span: any) {
-  if (
-    !span ||
-    !span.startTime ||
-    !span.endTime ||
-    !span.name ||
-    !(window as any)?.newrelic
-  ) {
-    return;
-  }
-
-  //extract timestamp details from the span
-  //we have to convert it from HR timestamp to a regular epoch
-  const start = convertHighResolutionTimeToEpoch(span.startTime);
-  const end = convertHighResolutionTimeToEpoch(span.endTime);
-  const spanName = span.name;
-
-  //the new relic window object is attached when the browser script
-  (window as any).newrelic.addToTrace({ name: spanName, start, end });
-}
 export function endSpan(span?: Span) {
  span?.end();
-
-  addTraceToNewRelicSession(span);
 }
+
 export function setAttributesToSpan(span: Span, spanAttributes: Attributes) {
  if (!span) {
    return;
--- a/app/client/src/ce/configs/index.ts
+++ b/app/client/src/ce/configs/index.ts
@ -21,6 +21,7 @@ export interface INJECTED_CONFIGS {
    accountId: string;
    applicationId: string;
    browserAgentlicenseKey: string;
+    browserAgentEndpoint: string;
    otlpLicenseKey: string;
    otlpServiceName: string;
    otlpEndpoint: string;
@ -93,6 +94,8 @@ export const getConfigsFromEnvVars = (): INJECTED_CONFIGS => {
      applicationId: process.env.APPSMITH_NEW_RELIC_APPLICATION_ID || "",
      browserAgentlicenseKey:
        process.env.APPSMITH_NEW_RELIC_BROWSER_AGENT_LICENSE_KEY || "",
+      browserAgentEndpoint:
+        process.env.APPSMITH_NEW_RELIC_BROWSER_AGENT_ENDPOINT || "",
      otlpLicenseKey: process.env.APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY || "",
      otlpEndpoint: process.env.APPSMITH_NEW_RELIC_OTEL_SERVICE_NAME || "",
      otlpServiceName:
@ -171,6 +174,10 @@ export const getAppsmithConfigs = (): AppsmithUIConfigs => {
    ENV_CONFIG.newRelic.browserAgentlicenseKey,
    APPSMITH_FEATURE_CONFIGS?.newRelic.browserAgentlicenseKey,
  );
+  const newRelicBrowserAgentEndpoint = getConfig(
+    ENV_CONFIG.newRelic.browserAgentEndpoint,
+    APPSMITH_FEATURE_CONFIGS?.newRelic.browserAgentEndpoint,
+  );
  const newRelicOtlpLicenseKey = getConfig(
    ENV_CONFIG.newRelic.otlpLicenseKey,
    APPSMITH_FEATURE_CONFIGS?.newRelic.otlpLicenseKey,
@ -263,6 +270,7 @@ export const getAppsmithConfigs = (): AppsmithUIConfigs => {
      accountId: newRelicAccountId.value,
      applicationId: newRelicApplicationId.value,
      browserAgentlicenseKey: newRelicBrowserLicenseKey.value,
+      browserAgentEndpoint: newRelicBrowserAgentEndpoint.value,
      otlpLicenseKey: newRelicOtlpLicenseKey.value,
      otlpEndpoint: newRelicOtlpEndpoint.value,
      otlpServiceName: newRelicOtlpServiceName.value,
--- a/app/client/src/ce/configs/types.ts
+++ b/app/client/src/ce/configs/types.ts
@ -26,6 +26,7 @@ export interface AppsmithUIConfigs {
    accountId: string;
    applicationId: string;
    browserAgentlicenseKey: string;
+    browserAgentEndpoint: string;
    otlpLicenseKey: string;
    otlpServiceName: string;
    otlpEndpoint: string;
--- a/app/client/src/index.tsx
+++ b/app/client/src/index.tsx
@ -24,15 +24,45 @@ import { setAutoFreeze } from "immer";
 import AppErrorBoundary from "./AppErrorBoundry";
 import log from "loglevel";
 import { getAppsmithConfigs } from "@appsmith/configs";
+import { BrowserAgent } from "@newrelic/browser-agent/loaders/browser-agent";
+
+const { newRelic } = getAppsmithConfigs();
+const { enableNewRelic } = newRelic;
+
+const newRelicBrowserAgentConfig = {
+  init: {
+    distributed_tracing: { enabled: true },
+    privacy: { cookies_enabled: true },
+    ajax: { deny_list: [newRelic.browserAgentEndpoint] },
+  },
+  info: {
+    beacon: newRelic.browserAgentEndpoint,
+    errorBeacon: newRelic.browserAgentEndpoint,
+    licenseKey: newRelic.browserAgentlicenseKey,
+    applicationID: newRelic.applicationId,
+    sa: 1,
+  },
+  loader_config: {
+    accountID: newRelic.accountId,
+    trustKey: newRelic.accountId,
+    agentID: newRelic.applicationId,
+    licenseKey: newRelic.browserAgentlicenseKey,
+    applicationID: newRelic.applicationId,
+  },
+};
+
+// The agent loader code executes immediately on instantiation.
+if (enableNewRelic) {
+  new BrowserAgent(newRelicBrowserAgentConfig);
+}

 const shouldAutoFreeze = process.env.NODE_ENV === "development";
-const { newRelic } = getAppsmithConfigs();

 setAutoFreeze(shouldAutoFreeze);
 runSagaMiddleware();

 appInitializer();
-const { enableNewRelic } = newRelic;
+
 enableNewRelic &&
  (async () => {
    try {
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@ -4759,6 +4759,18 @@ __metadata:
  languageName: node
  linkType: hard

+"@newrelic/browser-agent@npm:^1.255.0":
+  version: 1.255.0
+  resolution: "@newrelic/browser-agent@npm:1.255.0"
+  dependencies:
+    core-js: ^3.26.0
+    fflate: ^0.7.4
+    rrweb: 2.0.0-alpha.11
+    web-vitals: ^3.1.0
+  checksum: 33c91b16e8db6ffc28a376b85bd69ba76d69427e6265162d6f1c7d2c3e9e7a862d041242823996383cb117816da0373380e9eda79b818a9d530b757d2b6d09f6
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
  version: 2.1.5
  resolution: "@nodelib/fs.scandir@npm:2.1.5"
@ -8323,6 +8335,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@rrweb/types@npm:^2.0.0-alpha.11":
+  version: 2.0.0-alpha.12
+  resolution: "@rrweb/types@npm:2.0.0-alpha.12"
+  dependencies:
+    rrweb-snapshot: ^2.0.0-alpha.12
+  checksum: 9764d04dde006e65b0dfef32265a6365cdf1095e5a05fc129ba23f24143e3b967afc450ea401220f23bbd87cd24a6c45866d525096849fdb81831122adee1e91
+  languageName: node
+  linkType: hard
+
 "@rushstack/eslint-patch@npm:^1.1.0":
  version: 1.1.3
  resolution: "@rushstack/eslint-patch@npm:1.1.3"
@ -10570,6 +10591,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/css-font-loading-module@npm:0.0.7":
+  version: 0.0.7
+  resolution: "@types/css-font-loading-module@npm:0.0.7"
+  checksum: a074d3b824b2232160f2353daf1cc62937e4a24154d13607f14f93feaaac6abcf069c8ae02c1396840950fa02c1b3f19ce0f119321f9735905bfb3cd4b9b2021
+  languageName: node
+  linkType: hard
+
 "@types/d3-geo@npm:^3.1.0":
  version: 3.1.0
  resolution: "@types/d3-geo@npm:3.1.0"
@ -12513,6 +12541,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@xstate/fsm@npm:^1.4.0":
+  version: 1.6.5
+  resolution: "@xstate/fsm@npm:1.6.5"
+  checksum: da24fa4f40479223da34714640cea64ec894bbfeb2281a0a870af68882ae1d6fb6d724d6e5c0d4e6929728c699b92858f7389ef7d6a5d00ac66ba8cde3934eed
+  languageName: node
+  linkType: hard
+
 "@xstyled/core@npm:^3.8.0":
  version: 3.8.0
  resolution: "@xstyled/core@npm:3.8.0"
@ -13102,6 +13137,7 @@ __metadata:
    "@loadable/component": ^5.15.3
    "@manaflair/redux-batch": ^1.0.0
    "@mantine/hooks": ^5.10.1
+    "@newrelic/browser-agent": ^1.255.0
    "@octokit/rest": ^20.0.1
    "@opentelemetry/auto-instrumentations-web": ^0.33.2
    "@opentelemetry/context-zone": ^1.17.1
@ -14238,6 +14274,13 @@ __metadata:
  languageName: node
  linkType: hard

+"base64-arraybuffer@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "base64-arraybuffer@npm:1.0.2"
+  checksum: 15e6400d2d028bf18be4ed97702b11418f8f8779fb8c743251c863b726638d52f69571d4cc1843224da7838abef0949c670bde46936663c45ad078e89fee5c62
+  languageName: node
+  linkType: hard
+
 "base64-js@npm:^1.0.2, base64-js@npm:^1.3.1, base64-js@npm:^1.5.1":
  version: 1.5.1
  resolution: "base64-js@npm:1.5.1"
@ -15970,10 +16013,10 @@ __metadata:
  languageName: node
  linkType: hard

-"core-js@npm:^3.0.1, core-js@npm:^3.19.2, core-js@npm:^3.9.1":
-  version: 3.29.0
-  resolution: "core-js@npm:3.29.0"
-  checksum: 2bd69d783efcd2ef9197ce892a8b91d7b2fd86dddce805a3be0ff721013a2342eeab0f7d0b4b5548c1377b9846a8fb81485054efd39618b9d1a1fca04af81ccf
+"core-js@npm:^3.0.1, core-js@npm:^3.19.2, core-js@npm:^3.26.0, core-js@npm:^3.9.1":
+  version: 3.36.1
+  resolution: "core-js@npm:3.36.1"
+  checksum: 6f6c152179bd0673da34e67a82c6a5c37f31f9fbe908e9caf93749dc62a25b6e07fbff2411de3b74bb2d0661b7f9fb247115ba8efabf9904f5fef26edead515e
  languageName: node
  linkType: hard

@ -19425,6 +19468,20 @@ __metadata:
  languageName: node
  linkType: hard

+"fflate@npm:^0.4.4":
+  version: 0.4.8
+  resolution: "fflate@npm:0.4.8"
+  checksum: 29d8cbe44d5e7f53e7f5a160ac7f9cc025480c7b3bfd85c5f898cbe20dfa2dad4732daa534982664bf30b35896a90af44ea33ede5d94c5ffd1b8b0c0a0a56ca2
+  languageName: node
+  linkType: hard
+
+"fflate@npm:^0.7.4":
+  version: 0.7.4
+  resolution: "fflate@npm:0.7.4"
+  checksum: b812ab26047432db70ff4c73eb45ad53bd0774575b4818b9c61c2921e89ec65d1259f06ec1618f2ac55e6a2f2e29b6dc09173d213b46580bc69efae5344bf8f1
+  languageName: node
+  linkType: hard
+
 "figures@npm:^3.0.0, figures@npm:^3.2.0":
  version: 3.2.0
  resolution: "figures@npm:3.2.0"
@ -24897,6 +24954,13 @@ __metadata:
  languageName: node
  linkType: hard

+"mitt@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "mitt@npm:3.0.1"
+  checksum: b55a489ac9c2949ab166b7f060601d3b6d893a852515ae9eca4e11df01c013876df777ea109317622b5c1c60e8aae252558e33c8c94e14124db38f64a39614b1
+  languageName: node
+  linkType: hard
+
 "mkdirp-classic@npm:^0.5.2":
  version: 0.5.3
  resolution: "mkdirp-classic@npm:0.5.3"
@ -30600,6 +30664,38 @@ __metadata:
  languageName: node
  linkType: hard

+"rrdom@npm:^2.0.0-alpha.11":
+  version: 2.0.0-alpha.12
+  resolution: "rrdom@npm:2.0.0-alpha.12"
+  dependencies:
+    rrweb-snapshot: ^2.0.0-alpha.12
+  checksum: 64647547f099eaf0f77d207a83498b321c3bf76e6aa12c17dd1543e1019145bd7e564dd1c16439d3f9029e472e4d1d25c1d6717e4b37af1d8c0d42c8452c96f2
+  languageName: node
+  linkType: hard
+
+"rrweb-snapshot@npm:^2.0.0-alpha.11, rrweb-snapshot@npm:^2.0.0-alpha.12":
+  version: 2.0.0-alpha.12
+  resolution: "rrweb-snapshot@npm:2.0.0-alpha.12"
+  checksum: de8a7f8208ac9834d6cef1cea41d91782f6199ea101dde1eb9016e7253d79531444fe63466dfd42249b278ba0022c610e3806c2846df3a1cbe4328c5e88ce3a4
+  languageName: node
+  linkType: hard
+
+"rrweb@npm:2.0.0-alpha.11":
+  version: 2.0.0-alpha.11
+  resolution: "rrweb@npm:2.0.0-alpha.11"
+  dependencies:
+    "@rrweb/types": ^2.0.0-alpha.11
+    "@types/css-font-loading-module": 0.0.7
+    "@xstate/fsm": ^1.4.0
+    base64-arraybuffer: ^1.0.1
+    fflate: ^0.4.4
+    mitt: ^3.0.0
+    rrdom: ^2.0.0-alpha.11
+    rrweb-snapshot: ^2.0.0-alpha.11
+  checksum: f601d1b96f3a3622551b5f12f08d53cee272ebc23a61ed722a8687b2b8cb89ff6f7813a44eaa905afcaadd3e37e6055201474de0bd010720f45ecaaf2a0b4d01
+  languageName: node
+  linkType: hard
+
 "run-applescript@npm:^5.0.0":
  version: 5.0.0
  resolution: "run-applescript@npm:5.0.0"
@ -34114,6 +34210,13 @@ __metadata:
  languageName: node
  linkType: hard

+"web-vitals@npm:^3.1.0":
+  version: 3.5.2
+  resolution: "web-vitals@npm:3.5.2"
+  checksum: 4c208bb9384073c772055e9265a4cad4560dbbaeb111ec615ee23e71bbb952aacdf4e6bb8ffbfbe02b23540ac4f08d569d49fc0cd1e5d29c6c0ced566965320a
+  languageName: node
+  linkType: hard
+
 "webcrypto-core@npm:^1.7.7":
  version: 1.7.7
  resolution: "webcrypto-core@npm:1.7.7"