chore: Switch from OTLP HTTP/protobuf (New Relic) to HTTP/JSON (Grafa…

…na) (#37404)

## Description
> [!TIP]  
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._


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=""

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!WARNING]
> Tests have not run on the HEAD
065cddc yet
> <hr>Fri, 15 Nov 2024 11:48:13 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced new monitoring paths for telemetry data exports:
`/monitoring/traces` and `/monitoring/metrics`.
	- Added a function to streamline URL management for telemetry exports.

- **Bug Fixes**
- Updated telemetry export protocols to enhance reliability and
performance.

- **Chores**
- Updated multiple OpenTelemetry dependencies to their latest versions
for improved functionality and security.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/package.json

@@ -72,16 +72,16 @@
     "@mantine/hooks": "^5.10.1",
     "@newrelic/browser-agent": "^1.255.0",
     "@opentelemetry/api": "^1.9.0",
-    "@opentelemetry/auto-instrumentations-web": "^0.41.0",
-    "@opentelemetry/context-zone": "1.25.1",
-    "@opentelemetry/core": "^1.26.0",
-    "@opentelemetry/exporter-metrics-otlp-http": "0.52.1",
-    "@opentelemetry/exporter-trace-otlp-proto": "0.52.1",
-    "@opentelemetry/instrumentation": "0.52.1",
-    "@opentelemetry/resources": "1.25.1",
-    "@opentelemetry/sdk-metrics": "1.25.1",
-    "@opentelemetry/sdk-trace-base": "1.25.1",
-    "@opentelemetry/sdk-trace-web": "1.25.1",
+    "@opentelemetry/auto-instrumentations-web": "^0.42.0",
+    "@opentelemetry/context-zone": "^1.27.0",
+    "@opentelemetry/core": "^1.27.0",
+    "@opentelemetry/exporter-metrics-otlp-http": "^0.54.2",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.54.2",
+    "@opentelemetry/instrumentation": "^0.54.2",
+    "@opentelemetry/resources": "^1.27.0",
+    "@opentelemetry/sdk-metrics": "^1.27.0",
+    "@opentelemetry/sdk-trace-base": "^1.27.0",
+    "@opentelemetry/sdk-trace-web": "^1.27.0",
     "@opentelemetry/semantic-conventions": "^1.27.0",
     "@react-spring/web": "^9.7.4",
     "@react-types/shared": "^3.23.0",

app/client/packages/rts/package.json

@@ -15,8 +15,11 @@
     "start": "./start-server.sh"
   },
   "dependencies": {
-    "@opentelemetry/instrumentation-http": "^0.53.0",
-    "@opentelemetry/sdk-trace-node": "^1.26.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.54.2",
+    "@opentelemetry/instrumentation": "^0.54.2",
+    "@opentelemetry/instrumentation-http": "^0.54.2",
+    "@opentelemetry/resources": "^1.27.0",
+    "@opentelemetry/sdk-trace-node": "^1.27.0",
     "@opentelemetry/semantic-conventions": "^1.27.0",
     "@shared/ast": "workspace:^",
     "axios": "^1.7.4",

app/client/packages/rts/src/instrumentation.ts

@@ -10,7 +10,11 @@ import {
 import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
 import { registerInstrumentations } from "@opentelemetry/instrumentation";
 import { HttpInstrumentation } from "@opentelemetry/instrumentation-http";
-import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";
+import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
+
+const APPSMITH_NEW_RELIC_OTEL_EXPORTER_OTLP_ENDPOINT =
+  process.env.APPSMITH_NEW_RELIC_OTEL_EXPORTER_OTLP_ENDPOINT ||
+  "http://localhost:4318";
 
 const provider = new NodeTracerProvider({
   resource: new Resource({
@@ -21,7 +25,7 @@ const provider = new NodeTracerProvider({
 });
 
 const nrTracesExporter = new OTLPTraceExporter({
-  url: `${process.env.APPSMITH_NEW_RELIC_OTEL_EXPORTER_OTLP_ENDPOINT}/v1/traces`,
+  url: `${APPSMITH_NEW_RELIC_OTEL_EXPORTER_OTLP_ENDPOINT}/v1/traces`,
   headers: {
     "api-key": `${process.env.APPSMITH_NEW_RELIC_OTLP_LICENSE_KEY}`,
   },

app/client/src/UITelemetry/auto-otel-web.ts

@@ -1,7 +1,7 @@
 import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-base";
 import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
 import { ZoneContextManager } from "@opentelemetry/context-zone";
-import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";
+import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
 import { Resource } from "@opentelemetry/resources";
 import {
   ATTR_DEPLOYMENT_NAME,
@@ -14,8 +14,8 @@ import {
   PeriodicExportingMetricReader,
 } from "@opentelemetry/sdk-metrics";
 import {
-  OTLPMetricExporter,
   AggregationTemporalityPreference,
+  OTLPMetricExporter,
 } from "@opentelemetry/exporter-metrics-otlp-http";
 import { metrics } from "@opentelemetry/api";
 import { registerInstrumentations } from "@opentelemetry/instrumentation";
@@ -27,7 +27,7 @@ enum CompressionAlgorithm {
   GZIP = "gzip",
 }
 const { newRelic, observability } = getAppsmithConfigs();
-const { browserAgentEndpoint, otlpEndpoint, otlpLicenseKey } = newRelic;
+const { browserAgentEndpoint, otlpLicenseKey } = newRelic;
 
 const { deploymentName, serviceInstanceId, serviceName } = observability;
 
@@ -44,7 +44,7 @@ const tracerProvider = new WebTracerProvider({
 });
 
 const nrTracesExporter = new OTLPTraceExporter({
-  url: `${otlpEndpoint}/v1/traces`,
+  url: addPathToCurrentUrl("/monitoring/traces"),
   compression: CompressionAlgorithm.GZIP,
   headers: {
     "api-key": otlpLicenseKey,
@@ -74,7 +74,7 @@ tracerProvider.register({
 const nrMetricsExporter = new OTLPMetricExporter({
   compression: CompressionAlgorithm.GZIP,
   temporalityPreference: AggregationTemporalityPreference.DELTA,
-  url: `${otlpEndpoint}/v1/metrics`,
+  url: addPathToCurrentUrl("/monitoring/metrics"),
   headers: {
     "api-key": otlpLicenseKey,
   },
@@ -104,7 +104,8 @@ registerInstrumentations({
     new PageLoadInstrumentation({
       ignoreResourceUrls: [
         browserAgentEndpoint,
-        otlpEndpoint,
+        addPathToCurrentUrl("/monitoring/traces"),
+        addPathToCurrentUrl("/monitoring/metrics"),
         smartlookBaseDomain,
       ],
     }),
@@ -115,3 +116,14 @@ registerInstrumentations({
     }),
   ],
 });
+
+// Replaces the pathname of the current URL with the provided path.
+function addPathToCurrentUrl(path: string) {
+  const origin = window.location.origin;
+
+  const currentUrl = new URL(origin);
+
+  currentUrl.pathname = path.startsWith("/") ? path : `/${path}`;
+
+  return currentUrl.toString();
+}