diff --git a/desktop/plugins/public/ui-debugger/components/shared/FrameworkEventsTreeSelect.tsx b/desktop/plugins/public/ui-debugger/components/shared/FrameworkEventsTreeSelect.tsx
index b457ca338..f7031f2ed 100644
--- a/desktop/plugins/public/ui-debugger/components/shared/FrameworkEventsTreeSelect.tsx
+++ b/desktop/plugins/public/ui-debugger/components/shared/FrameworkEventsTreeSelect.tsx
@@ -78,6 +78,7 @@ function getAllLeaves(treeSelectNode: TreeSelectNode) {
   return result;
 }
 
+export const frameworkEventSeparator = '.';
 /**
  * transformed flat event type data structure into tree
  */
@@ -85,7 +86,7 @@ export function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
   const root: TreeSelectNode = buildTreeSelectNode('root', 'root');
 
   eventTypes.forEach((eventType) => {
-    const eventSubtypes = eventType.split(':');
+    const eventSubtypes = eventType.split(frameworkEventSeparator);
     let currentNode = root;
 
     // Find the parent node for the current id
@@ -101,7 +102,7 @@ export function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
       if (!foundChild) {
         const newNode: TreeSelectNode = buildTreeSelectNode(
           eventSubtypes[i],
-          eventSubtypes.slice(0, i + 1).join(':'),
+          eventSubtypes.slice(0, i + 1).join(frameworkEventSeparator),
         );
 
         currentNode.children.push(newNode);
@@ -112,7 +113,9 @@ export function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
     currentNode.children.push(
       buildTreeSelectNode(
         eventSubtypes[eventSubtypes.length - 1],
-        eventSubtypes.slice(0, eventSubtypes.length).join(':'),
+        eventSubtypes
+          .slice(0, eventSubtypes.length)
+          .join(frameworkEventSeparator),
       ),
     );
   });
diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
index 2305b3dea..7bc20c192 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
@@ -17,6 +17,7 @@ import {FrameworkEvent, ClientNode} from '../../../ClientTypes';
 import React, {ReactNode} from 'react';
 import {StackTraceInspector} from './StackTraceInspector';
 import {Descriptions, Tag} from 'antd';
+import {frameworkEventSeparator} from '../../shared/FrameworkEventsTreeSelect';
 
 type Props = {
   node: ClientNode;
@@ -131,7 +132,7 @@ function formatDuration(nanoseconds: number): string {
   }
 }
 function eventTypeToName(eventType: string) {
-  return eventType.slice(eventType.lastIndexOf('.') + 1);
+  return eventType.slice(eventType.lastIndexOf(frameworkEventSeparator) + 1);
 }
 
 function threadToColor(thread?: string) {