[Discover][APM] Check for undefined data from useFetcher in TraceWaterfallEmbeddable by iblancof · Pull Request #240843 · elastic/kibana

iblancof · 2025-10-27T15:13:26Z

Summary

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.

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).

This ensures that the UI behaves safely even if traceItems is unexpectedly undefined.

Before	After

I also took the chance to update the UI, so the error message is more visible:

Before	After

The same error has been now added to the TraceWaterfallEmbeddable:

…erfallContextProvider

elasticmachine · 2025-10-27T15:13:31Z

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

cauemarcondes · 2025-10-27T17:42:27Z

...servability/plugins/apm/public/components/shared/trace_waterfall/trace_waterfall_context.tsx

  const { duration, traceWaterfall, maxDepth, rootItem, legends, colorBy, traceState } =
    useTraceWaterfall({
-      traceItems,
+      traceItems: traceItems || [],


Wouldn't it be better if we could investigate why the API is returning undefined and fix it there?

Specially as you mentioned that TS is not expecting it to be undefined.

Hey @cauemarcondes, thanks for the feedback!

Looking at this from a different angle, I realized where the critical point was.

It’s not that TS didn’t expect undefined, but that we were bypassing it in TraceWaterfallEmbeddable with traceItems={data?.traceItems!}, assuming data (and traceItems) would always be there.

When I checked FocusedWaterfallEmbeddable, I saw it does a proper check for data before rendering, so I added the same here to keep things consistent.

kibana/x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/focused_trace_waterfall_embeddable.tsx

Lines 32 to 47 in 8e62b74

if (isPending(status)) {

return <Loading />;

}

if (data === undefined) {

return (

<EuiText>

{i18n.translate(

'xpack.apm.focusedTraceWaterfallEmbeddable.traceWaterfallCouldNotTextLabel',

{ defaultMessage: 'Trace waterfall could not be loaded' }

)}

</EuiText>

);

}

return <FocusedTraceWaterfall items={data} isEmbeddable />;

We need this because useFetcher can return undefined for data.

Was it an API problem on our side?
No, it wasn’t.

Looking at the code, we show <Loading /> if the useFetcher status is isPending (loading or not_initiated). But if the status is failure, the code just continues running, which can result in data being undefined according to how useFetcher works.

kibana/x-pack/solutions/observability/plugins/apm/public/hooks/use_fetcher.tsx

Lines 184 to 188 in 8e62b74

setResult({

data: undefined,

status: FETCH_STATUS.FAILURE,

error: e,

});

…-of-undefined-reading-map

elasticmachine · 2025-10-28T12:03:31Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 606d746

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #16 / Core Analysis - Entity Store @ess @skipInServerlessMKI Entity Store APIs get and list "before all" hook in "get and list"
[job] [logs] FTR Configs #73 / serverless observability UI Dataset Quality Dataset quality details navigate to dataset details should navigate to details page from a main page

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`apm`	2.8MB	2.8MB	+4.0B

History

💔 Build #355266 failed 2f467cd

cc @iblancof

…able

cauemarcondes

LGTM

kibanamachine · 2025-10-29T08:51:55Z

Starting backport for target branches: 8.19, 9.1, 9.2

https://github.com/elastic/kibana/actions/runs/18902197083

…fall (elastic#240843) ## Summary Closes elastic#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. <img width="809" height="121" alt="Screenshot 2025-10-27 at 16 03 48" src="https://github.com/user-attachments/assets/042a4118-8294-4701-8d0b-590321a2bde8" /> 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](elastic#240843 (comment))). 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)|<img width="1405" height="968" alt="Screenshot 2025-10-28 at 14 26 04" src="https://github.com/user-attachments/assets/1d4453df-25b5-4573-b29f-0da76f42b064" />| I also took the chance to update the UI, so the error message is more visible: |Before|After| |-|-| |<img width="1405" height="968" alt="Screenshot 2025-10-28 at 14 26 04" src="https://github.com/user-attachments/assets/1d4453df-25b5-4573-b29f-0da76f42b064" />|<img width="1405" height="966" alt="Screenshot 2025-10-28 at 14 24 51" src="https://github.com/user-attachments/assets/3426defd-58fc-4ea8-950c-1163bb11cb20" />| The same error has been now added to the `TraceWaterfallEmbeddable`: <img width="1387" height="135" alt="Screenshot 2025-10-28 at 14 27 31" src="https://github.com/user-attachments/assets/3bd01cb3-b716-4216-82de-ec02d7f01bdf" /> (cherry picked from commit 7d2975b)

kibanamachine · 2025-10-29T08:59:30Z

💔 Some backports could not be created

Status	Branch	Result
❌	8.19	Backport failed because of merge conflicts
❌	9.1	Backport failed because of merge conflicts
✅	9.2

Note: Successful backport PRs will be merged automatically after passing CI.

Manual backport

To create the backport manually run:

node scripts/backport --pr 240843

Questions ?

Please refer to the Backport tool documentation

iblancof · 2025-10-29T10:14:01Z

💚 All backports created successfully

Status	Branch	Result
✅	9.1
✅	8.19

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

…fall (elastic#240843) ## Summary Closes elastic#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. <img width="809" height="121" alt="Screenshot 2025-10-27 at 16 03 48" src="https://github.com/user-attachments/assets/042a4118-8294-4701-8d0b-590321a2bde8" /> 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](elastic#240843 (comment))). 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)|<img width="1405" height="968" alt="Screenshot 2025-10-28 at 14 26 04" src="https://github.com/user-attachments/assets/1d4453df-25b5-4573-b29f-0da76f42b064" />| I also took the chance to update the UI, so the error message is more visible: |Before|After| |-|-| |<img width="1405" height="968" alt="Screenshot 2025-10-28 at 14 26 04" src="https://github.com/user-attachments/assets/1d4453df-25b5-4573-b29f-0da76f42b064" />|<img width="1405" height="966" alt="Screenshot 2025-10-28 at 14 24 51" src="https://github.com/user-attachments/assets/3426defd-58fc-4ea8-950c-1163bb11cb20" />| The same error has been now added to the `TraceWaterfallEmbeddable`: <img width="1387" height="135" alt="Screenshot 2025-10-28 at 14 27 31" src="https://github.com/user-attachments/assets/3bd01cb3-b716-4216-82de-ec02d7f01bdf" /> (cherry picked from commit 7d2975b) # Conflicts: # x-pack/solutions/observability/plugins/apm/public/embeddable/trace_waterfall/trace_waterfall_embeddable.tsx

…eWaterfall (#240843) (#241079) # Backport This will backport the following commits from `main` to `9.2`: - [[Discover][APM] Add fallback to traceItems when calling useTraceWaterfall (#240843)](#240843)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Irene Blanco <irene.blanco@elastic.co>

…fall (elastic#240843) ## Summary Closes elastic#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. <img width="809" height="121" alt="Screenshot 2025-10-27 at 16 03 48" src="https://github.com/user-attachments/assets/042a4118-8294-4701-8d0b-590321a2bde8" /> 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](elastic#240843 (comment))). 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)|<img width="1405" height="968" alt="Screenshot 2025-10-28 at 14 26 04" src="https://github.com/user-attachments/assets/1d4453df-25b5-4573-b29f-0da76f42b064" />| I also took the chance to update the UI, so the error message is more visible: |Before|After| |-|-| |<img width="1405" height="968" alt="Screenshot 2025-10-28 at 14 26 04" src="https://github.com/user-attachments/assets/1d4453df-25b5-4573-b29f-0da76f42b064" />|<img width="1405" height="966" alt="Screenshot 2025-10-28 at 14 24 51" src="https://github.com/user-attachments/assets/3426defd-58fc-4ea8-950c-1163bb11cb20" />| The same error has been now added to the `TraceWaterfallEmbeddable`: <img width="1387" height="135" alt="Screenshot 2025-10-28 at 14 27 31" src="https://github.com/user-attachments/assets/3bd01cb3-b716-4216-82de-ec02d7f01bdf" />

…ceWaterfallEmbeddable (#240843) (#241095) # Backport This will backport the following commits from `main` to `9.1`: - [[Discover][APM] Add fallback to traceItems when calling useTraceWaterfall (#240843)](#240843)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)

…aceWaterfallEmbeddable (#240843) (#241099) # Backport This will backport the following commits from `main` to `8.19`: - [[Discover][APM] Add fallback to traceItems when calling useTraceWaterfall (#240843)](#240843)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)

…fall (elastic#240843) ## Summary Closes elastic#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. <img width="809" height="121" alt="Screenshot 2025-10-27 at 16 03 48" src="https://github.com/user-attachments/assets/042a4118-8294-4701-8d0b-590321a2bde8" /> 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](elastic#240843 (comment))). 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)|<img width="1405" height="968" alt="Screenshot 2025-10-28 at 14 26 04" src="https://github.com/user-attachments/assets/1d4453df-25b5-4573-b29f-0da76f42b064" />| I also took the chance to update the UI, so the error message is more visible: |Before|After| |-|-| |<img width="1405" height="968" alt="Screenshot 2025-10-28 at 14 26 04" src="https://github.com/user-attachments/assets/1d4453df-25b5-4573-b29f-0da76f42b064" />|<img width="1405" height="966" alt="Screenshot 2025-10-28 at 14 24 51" src="https://github.com/user-attachments/assets/3426defd-58fc-4ea8-950c-1163bb11cb20" />| The same error has been now added to the `TraceWaterfallEmbeddable`: <img width="1387" height="135" alt="Screenshot 2025-10-28 at 14 27 31" src="https://github.com/user-attachments/assets/3bd01cb3-b716-4216-82de-ec02d7f01bdf" />

Add fallback to traceItems when calling useTraceWaterfall in TraceWat…

2f467cd

…erfallContextProvider

iblancof self-assigned this Oct 27, 2025

iblancof requested a review from a team October 27, 2025 15:13

iblancof added v9.1.0 v8.19.0 v9.2.1 and removed v9.1.0 v8.19.0 v9.2.0 labels Oct 27, 2025

cauemarcondes reviewed Oct 27, 2025

View reviewed changes

Merge branch 'main' into 238405-discovertraces-cannot-read-properties…

606d746

…-of-undefined-reading-map

iblancof added 3 commits October 28, 2025 14:21

Undo default value for traceItems on useTraceWaterfall

c85ffbb

Add undefined safetycheck for useFetcher data in TraceWaterfallEmbedd…

11eb8a6

…able

Update FocusedTraceWaterfallEmbeddable to use EuiCallout

553a876

iblancof requested a review from cauemarcondes October 28, 2025 14:05

cauemarcondes approved these changes Oct 28, 2025

View reviewed changes

iblancof merged commit 7d2975b into elastic:main Oct 29, 2025
13 checks passed

kibanamachine mentioned this pull request Oct 29, 2025

[9.2] [Discover][APM] Add fallback to traceItems when calling useTraceWaterfall (#240843) #241079

Merged

This was referenced Oct 29, 2025

[9.1] [Discover][APM] Check for undefined data from useFetcher in TraceWaterfallEmbeddable (#240843) #241095

Merged

[8.19] [Discover][APM] Check for undefined data from useFetcher in TraceWaterfallEmbeddable (#240843) #241099

Merged

iblancof changed the title ~~[Discover][APM] Add fallback to traceItems when calling useTraceWaterfall~~ [Discover][APM] Check for undefined data from useFetcher in TraceWaterfallEmbeddable Oct 29, 2025

iblancof deleted the 238405-discovertraces-cannot-read-properties-of-undefined-reading-map branch March 13, 2026 10:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover][APM] Check for undefined data from useFetcher in TraceWaterfallEmbeddable#240843

[Discover][APM] Check for undefined data from useFetcher in TraceWaterfallEmbeddable#240843
iblancof merged 5 commits intoelastic:mainfrom
iblancof:238405-discovertraces-cannot-read-properties-of-undefined-reading-map

iblancof commented Oct 27, 2025 •

edited by kibanamachine

Loading

Uh oh!

elasticmachine commented Oct 27, 2025

Uh oh!

cauemarcondes Oct 27, 2025

Uh oh!

cauemarcondes Oct 27, 2025

Uh oh!

iblancof Oct 28, 2025

Uh oh!

elasticmachine commented Oct 28, 2025

Uh oh!

cauemarcondes left a comment

Uh oh!

Uh oh!

kibanamachine commented Oct 29, 2025

Uh oh!

kibanamachine commented Oct 29, 2025

Uh oh!

iblancof commented Oct 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	if (isPending(status)) {
	return <Loading />;
	}

	if (data === undefined) {
	return (
	<EuiText>
	{i18n.translate(
	'xpack.apm.focusedTraceWaterfallEmbeddable.traceWaterfallCouldNotTextLabel',
	{ defaultMessage: 'Trace waterfall could not be loaded' }
	)}
	</EuiText>
	);
	}

	return <FocusedTraceWaterfall items={data} isEmbeddable />;

	setResult({
	data: undefined,
	status: FETCH_STATUS.FAILURE,
	error: e,
	});

Conversation

iblancof commented Oct 27, 2025 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

elasticmachine commented Oct 27, 2025

Uh oh!

cauemarcondes Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

cauemarcondes Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

iblancof Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Oct 28, 2025

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Async chunks

History

Uh oh!

cauemarcondes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kibanamachine commented Oct 29, 2025

Uh oh!

kibanamachine commented Oct 29, 2025

💔 Some backports could not be created

Manual backport

Questions ?

Uh oh!

iblancof commented Oct 29, 2025

💚 All backports created successfully

Questions ?

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

iblancof commented Oct 27, 2025 •

edited by kibanamachine

Loading