fix: use encodedGroupId to prevent navigation/api calls issues

elastic · Jan 31, 2025 · 15703a8 · 15703a8
1 parent 5774e8d
commit 15703a8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/...servability/plugins/apm/public/components/app/error_group_details/error_sampler/index.tsx b/...servability/plugins/apm/public/components/app/error_group_details/error_sampler/index.tsx
@@ -35,7 +35,7 @@ export function ErrorSampler({ errorSampleIds, errorSamplesFetchStatus, occurren
     '/mobile-services/{serviceName}/errors-and-crashes/errors/{groupId}',
     '/mobile-services/{serviceName}/errors-and-crashes/crashes/{groupId}'
   );
-
+  const encodedGroupId = encodeURIComponent(groupId);
   const { observabilityAIAssistant } = useApmPluginContext();
 
   const { rangeFrom, rangeTo, environment, kuery, errorId } = query;
@@ -51,7 +51,7 @@ export function ErrorSampler({ errorSampleIds, errorSamplesFetchStatus, occurren
             params: {
               path: {
                 serviceName,
-                groupId,
+                groupId: encodedGroupId,
                 errorId,
               },
               query: {
@@ -65,7 +65,7 @@ export function ErrorSampler({ errorSampleIds, errorSamplesFetchStatus, occurren
         );
       }
     },
-    [environment, kuery, serviceName, start, end, groupId, errorId]
+    [environment, kuery, serviceName, start, end, encodedGroupId, errorId]
   );
   const onSampleClick = (sample: string) => {
     history.push({

diff --git a/...k/solutions/observability/plugins/apm/public/components/app/error_group_details/index.tsx b/...k/solutions/observability/plugins/apm/public/components/app/error_group_details/index.tsx
@@ -91,14 +91,14 @@ export function ErrorGroupDetails() {
   } = useApmParams('/services/{serviceName}/errors/{groupId}');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
-
+  const encodedGroupId = encodeURIComponent(groupId);
   useBreadcrumb(
     () => ({
       title: groupId,
       href: apmRouter.link('/services/{serviceName}/errors/{groupId}', {
         path: {
           serviceName,
-          groupId,
+          groupId: encodedGroupId,
         },
         query: {
           rangeFrom,
@@ -115,6 +115,7 @@ export function ErrorGroupDetails() {
       comparisonEnabled,
       environment,
       groupId,
+      encodedGroupId,
       kuery,
       rangeFrom,
       rangeTo,
@@ -131,7 +132,7 @@ export function ErrorGroupDetails() {
             params: {
               path: {
                 serviceName,
-                groupId,
+                groupId: encodedGroupId,
               },
               query: {
                 environment,
@@ -143,12 +144,12 @@ export function ErrorGroupDetails() {
           });
         }
       },
-      [environment, kuery, serviceName, start, end, groupId]
+      [environment, kuery, serviceName, start, end, encodedGroupId]
     );
 
   const { errorDistributionData, errorDistributionStatus } = useErrorGroupDistributionFetcher({
     serviceName,
-    groupId,
+    groupId: encodedGroupId,
     environment,
     kuery,
   });

diff --git a/...lugins/apm/public/components/app/error_group_details/top_erroneous_transactions/index.tsx b/...lugins/apm/public/components/app/error_group_details/top_erroneous_transactions/index.tsx
@@ -42,6 +42,7 @@ export function TopErroneousTransactions({ serviceName }: Props) {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
+  const encodedGroupId = encodeURIComponent(groupId);
   const { data = INITIAL_STATE, status } = useFetcher(
     (callApmApi) => {
       if (start && end) {
@@ -51,7 +52,7 @@ export function TopErroneousTransactions({ serviceName }: Props) {
             params: {
               path: {
                 serviceName,
-                groupId,
+                groupId: encodedGroupId,
               },
               query: {
                 environment,
@@ -66,7 +67,7 @@ export function TopErroneousTransactions({ serviceName }: Props) {
         );
       }
     },
-    [environment, kuery, serviceName, start, end, groupId, comparisonEnabled, offset]
+    [environment, kuery, serviceName, start, end, encodedGroupId, comparisonEnabled, offset]
   );
 
   const loading = isPending(status);

diff --git a/...utions/observability/plugins/apm/public/components/shared/links/apm/error_detail_link.tsx b/...utions/observability/plugins/apm/public/components/shared/links/apm/error_detail_link.tsx
@@ -15,7 +15,12 @@ interface Props extends APMLinkExtendProps {
 }
 
 function ErrorDetailLink({ serviceName, errorGroupId, ...rest }: Props) {
-  return <LegacyAPMLink path={`/services/${serviceName}/errors/${errorGroupId}`} {...rest} />;
+  return (
+    <LegacyAPMLink
+      path={`/services/${serviceName}/errors/${encodeURIComponent(errorGroupId)}`}
+      {...rest}
+    />
+  );
 }
 
 export { ErrorDetailLink };