Skip to content

HeaderMenuPortal error when navigating between observability and APM #97140

@smith

Description

@smith

On the alerts table in Observability there are links to the APM app for APM-related alerts in the table.

When you have the popover for an alert open then click the link on the table behind the popover, you get the following errors:

Some messages have been moved to the Issues panel.
react_devtools_backend.js:2556 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in InPortal (created by HeaderMenuPortal)
    in HeaderMenuPortal (created by HeaderMenuPortal)
    in Suspense (created by HeaderMenuPortal)
    in HeaderMenuPortal (created by ApmHeader)
 ...
react_devtools_backend.js:2556 Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React. 
    at HeaderActionMenu (http://localhost:5701/kbn/9007199254740991/bundles/core/core.entry.js:9968:3)
    at div
    at EuiHeaderSectionItem (http://localhost:5701/kbn/9007199254740991/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.@elastic.js:83470:26)
...
react_devtools_backend.js:2556 Warning: render(...): It looks like the React-rendered content of this container was removed without using React. This is not supported and will cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a container. 
    at HeaderActionMenu (http://localhost:5701/kbn/9007199254740991/bundles/core/core.entry.js:9968:3)
    at div
...
react_devtools_backend.js:2556 Warning: render(...): It looks like the React-rendered content of this container was removed without using React. This is not supported and will cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a container. 
...
index.js:33 Uncaught TypeError: Cannot read property 'replaceChild' of null
    at HTMLDivElement.mount (index.js:33)
    at OutPortal.push.../../../node_modules/react-reverse-portal/dist/web/index.js.OutPortal.componentDidUpdate (index.js:112)
...
react-dom.development.js:9609 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

and so on.

This probably has something to do with the mounting/unmounting of portals and reverse portals.

Metadata

Metadata

Assignees

Labels

Team:ObservabilityTeam label for Observability Team (for things that are handled across all of observability)Theme: raclabel obsoletebugFixes for quality problems that affect the customer experiencev7.14.0

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions