chore: add pageId and applicationSlug to all traces (#37219)

## Description
Add pageId and applicationSlug as common attributes to all spans


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
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]
> 🟣 🟣 🟣 Your tests are running.
> Tests running at:
<https://github.com/appsmithorg/appsmith/actions/runs/11679770316>
> Commit: de6069395a4e0c6a92ad1604742f8e525b47ad28
> Workflow: `PR Automation test suite`
> Tags: `@tag.Sanity`
> Spec: ``
> <hr>Tue, 05 Nov 2024 07:52:37 UTC
<!-- end of auto-generated comment: Cypress test results  -->


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

app/client/src/UITelemetry/generateTraces.ts

@@ -14,10 +14,9 @@ import {
   osName,
   osVersion,
 } from "react-device-detect";
-import { APP_MODE } from "entities/App";
-import { matchBuilderPath, matchViewerPath } from "constants/routes";
 import nanoid from "nanoid";
 import memoizeOne from "memoize-one";
+import { getApplicationParamsFromUrl } from "ee/utils/serviceWorkerUtils";
 
 const GENERATOR_TRACE = "generator-tracer";
 
@@ -26,25 +25,36 @@ export type SpanAttributes = Attributes;
 
 const OTLP_SESSION_ID = nanoid();
 
-const getAppMode = memoizeOne((pathname: string) => {
-  const isEditorUrl = matchBuilderPath(pathname);
-  const isViewerUrl = matchViewerPath(pathname);
+const getAppParams = memoizeOne(
+  (origin: string, pathname: string, search: string) => {
+    const applicationParams = getApplicationParamsFromUrl({
+      origin,
+      pathname,
+      search,
+    });
 
-  const appMode = isEditorUrl
-    ? APP_MODE.EDIT
-    : isViewerUrl
-      ? APP_MODE.PUBLISHED
-      : "";
-
-  return appMode;
-});
-
-export const getCommonTelemetryAttributes = () => {
-  const pathname = window.location.pathname;
-  const appMode = getAppMode(pathname);
+    const {
+      applicationSlug,
+      appMode = "",
+      basePageId: pageId,
+      branchName,
+    } = applicationParams || {};
 
     return {
       appMode,
+      pageId,
+      branchName,
+      applicationSlug,
+    };
+  },
+);
+
+export const getCommonTelemetryAttributes = () => {
+  const { origin, pathname, search } = window.location;
+  const appParams = getAppParams(origin, pathname, search);
+
+  return {
+    ...appParams,
     deviceType,
     browserName,
     browserVersion,

app/client/src/ce/utils/serviceWorkerUtils.test.ts

@@ -212,6 +212,7 @@ describe("serviceWorkerUtils", () => {
       const expectedParams: TApplicationParams = {
         origin: "https://app.appsmith.com",
         basePageId,
+        applicationSlug: "my-app",
         baseApplicationId: undefined,
         branchName: "main",
         appMode: APP_MODE.EDIT,
@@ -227,6 +228,7 @@ describe("serviceWorkerUtils", () => {
       const expectedParams: TApplicationParams = {
         origin: "https://app.appsmith.com",
         basePageId,
+        applicationSlug: "my-app",
         baseApplicationId: undefined,
         branchName: "main",
         appMode: APP_MODE.PUBLISHED,
@@ -307,6 +309,7 @@ describe("serviceWorkerUtils", () => {
       );
       const expectedParams: TApplicationParams = {
         origin: "https://app.appsmith.com",
+        applicationSlug: "my-app",
         basePageId,
         baseApplicationId: undefined,
         branchName: "",

app/client/src/ce/utils/serviceWorkerUtils.ts

@@ -14,6 +14,7 @@ import {
 interface TMatchResult {
   basePageId?: string;
   baseApplicationId?: string;
+  applicationSlug?: string;
 }
 
 export interface TApplicationParams {
@@ -22,6 +23,7 @@ export interface TApplicationParams {
   baseApplicationId?: string;
   branchName: string;
   appMode: APP_MODE;
+  applicationSlug?: string;
 }
 
 type TApplicationParamsOrNull = TApplicationParams | null;
@@ -57,33 +59,36 @@ export const getSearchQuery = (search = "", key: string) => {
 };
 
 export const getApplicationParamsFromUrl = (
-  url: URL,
+  urlParams: Pick<URL, "origin" | "pathname" | "search">,
 ): TApplicationParamsOrNull => {
+  const { origin, pathname, search } = urlParams;
   // Get the branch name from the query string
-  const branchName = getSearchQuery(url.search, "branch");
+  const branchName = getSearchQuery(search, "branch");
 
-  const matchedBuilder: Match<TMatchResult> = matchBuilderPath(url.pathname, {
+  const matchedBuilder: Match<TMatchResult> = matchBuilderPath(pathname, {
     end: false,
   });
-  const matchedViewer: Match<TMatchResult> = matchViewerPath(url.pathname);
+  const matchedViewer: Match<TMatchResult> = matchViewerPath(pathname);
 
   if (matchedBuilder) {
     return {
-      origin: url.origin,
+      origin,
       basePageId: matchedBuilder.params.basePageId,
       baseApplicationId: matchedBuilder.params.baseApplicationId,
       branchName,
       appMode: APP_MODE.EDIT,
+      applicationSlug: matchedBuilder.params.applicationSlug,
     };
   }
 
   if (matchedViewer) {
     return {
-      origin: url.origin,
+      origin,
       basePageId: matchedViewer.params.basePageId,
       baseApplicationId: matchedViewer.params.baseApplicationId,
       branchName,
       appMode: APP_MODE.PUBLISHED,
+      applicationSlug: matchedViewer.params.applicationSlug,
     };
   }