From 54c7ccb7720807c1eff91f598c5b3882aabbb395 Mon Sep 17 00:00:00 2001 From: Irene Blanco Date: Wed, 29 Oct 2025 09:51:15 +0100 Subject: [PATCH 1/2] [Discover][APM] Add fallback to traceItems when calling useTraceWaterfall (#240843) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Closes https://github.com/elastic/kibana/issues/238405 Since we upgraded the error handling strategy to catch Fatal React Errors, we’ve started seeing `TypeError: Cannot read properties of undefined (reading 'map')` in versions 8.19.x and 9.1.x. Screenshot 2025-10-27 at 16 03 48 After reviewing the error stack, we found that this occurs because `traceItems` is occasionally arrive as `undefined`. Although TS enforces that it should always be defined, a potential API malfunction may cause this scenario. To prevent users from encountering an uncontrolled error, this PR adds a check for `undefined` for `data` coming from the `useFetcher` (more details in [this comment](https://github.com/elastic/kibana/pull/240843#discussion_r2469707226)). This ensures that the UI behaves safely even if `traceItems` is unexpectedly `undefined`. |Before|After| |-|-| |![Screen Recording 2025-10-27 at 15 33 39](https://github.com/user-attachments/assets/6753ed8c-1e37-4117-8ba0-112d996e2066)|Screenshot 2025-10-28 at 14 26 04| I also took the chance to update the UI, so the error message is more visible: |Before|After| |-|-| |Screenshot 2025-10-28 at 14 26 04|Screenshot 2025-10-28 at 14 24 51| The same error has been now added to the `TraceWaterfallEmbeddable`: Screenshot 2025-10-28 at 14 27 31 (cherry picked from commit 7d2975b2ece67ff9b1c99be7d98bb422099065e1) # Conflicts: # x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/trace_waterfall_embeddable.tsx --- .../focused_trace_waterfall_embeddable.tsx | 17 ++++++++++------- .../trace_waterfall_embeddable.tsx | 17 ++++++++++++++++- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/focused_trace_waterfall_embeddable.tsx b/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/focused_trace_waterfall_embeddable.tsx index 9a2cced00dc14..5e69fe57d19f2 100644 --- a/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/focused_trace_waterfall_embeddable.tsx +++ b/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/focused_trace_waterfall_embeddable.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { EuiText } from '@elastic/eui'; +import { EuiCallOut } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { FocusedTraceWaterfall } from '../../components/shared/focused_trace_waterfall'; @@ -35,12 +35,15 @@ export function FocusedTraceWaterfallEmbeddable({ if (data === undefined) { return ( - - {i18n.translate( - 'xpack.apm.focusedTraceWaterfallEmbeddable.traceWaterfallCouldNotTextLabel', - { defaultMessage: 'Trace waterfall could not be loaded' } - )} - + ); } diff --git a/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/trace_waterfall_embeddable.tsx b/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/trace_waterfall_embeddable.tsx index d3ec0ec1f1d81..507292597d18c 100644 --- a/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/trace_waterfall_embeddable.tsx +++ b/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/trace_waterfall_embeddable.tsx @@ -6,13 +6,15 @@ */ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import React from 'react'; -import { WaterfallLegends } from '../../components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall_legends'; +import { EuiCallOut } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import { isPending, useFetcher } from '../../hooks/use_fetcher'; import { Loading } from './loading'; import type { ApmTraceWaterfallEmbeddableEntryProps } from './react_embeddable_factory'; import { TraceWaterfall } from '../../components/shared/trace_waterfall'; import { getServiceLegends } from '../../components/shared/trace_waterfall/use_trace_waterfall'; import { WaterfallLegendType } from '../../components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_helpers/waterfall_helpers'; +import { WaterfallLegends } from '../../components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall_legends'; export function TraceWaterfallEmbeddable({ serviceName, @@ -43,6 +45,19 @@ export function TraceWaterfallEmbeddable({ return ; } + if (data === undefined) { + return ( + + ); + } + return ( From a32ee76cefa290a00ceefcb8051787da77bd27f6 Mon Sep 17 00:00:00 2001 From: iblancof Date: Wed, 29 Oct 2025 11:58:21 +0100 Subject: [PATCH 2/2] Remove unknown announceOnMount prop --- .../trace_waterfall/focused_trace_waterfall_embeddable.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/focused_trace_waterfall_embeddable.tsx b/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/focused_trace_waterfall_embeddable.tsx index 5e69fe57d19f2..dba9eca786744 100644 --- a/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/focused_trace_waterfall_embeddable.tsx +++ b/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/focused_trace_waterfall_embeddable.tsx @@ -36,7 +36,6 @@ export function FocusedTraceWaterfallEmbeddable({ if (data === undefined) { return (