Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HeaderMenuPortal error when navigating between observability and APM #97140

Closed
smith opened this issue Apr 14, 2021 · 0 comments · Fixed by #100845
Closed

HeaderMenuPortal error when navigating between observability and APM #97140

smith opened this issue Apr 14, 2021 · 0 comments · Fixed by #100845
Assignees
Labels
bug Fixes for quality problems that affect the customer experience Team:Observability Team label for Observability Team (for things that are handled across all of observability) Theme: rac label obsolete v7.14.0

Comments

@smith
Copy link
Contributor

smith commented Apr 14, 2021

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/[email protected]: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.

@smith smith added bug Fixes for quality problems that affect the customer experience Team:Observability Team label for Observability Team (for things that are handled across all of observability) v7.14.0 Theme: rac label obsolete labels Apr 14, 2021
@smith smith self-assigned this May 27, 2021
smith added a commit to smith/kibana that referenced this issue May 28, 2021
Call `setHeaderActionMenu(undefined)` when the HeaderMenuPortal is unmounted.

Found this line in the docs:

> Calling the handler with `undefined` will unmount the current mount point.

Which we weren't doing before.

Previous behavior:

* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a weird toast error message and the header menu is gone forever

Now:

* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a working header menu

Fixes elastic#97140
smith added a commit that referenced this issue May 28, 2021
Call `setHeaderActionMenu(undefined)` when the HeaderMenuPortal is unmounted.

Found this line in the docs:

> Calling the handler with `undefined` will unmount the current mount point.

Which we weren't doing before.

Previous behavior:

* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a weird toast error message and the header menu is gone forever

Now:

* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a working header menu

Fixes #97140
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue May 28, 2021
Call `setHeaderActionMenu(undefined)` when the HeaderMenuPortal is unmounted.

Found this line in the docs:

> Calling the handler with `undefined` will unmount the current mount point.

Which we weren't doing before.

Previous behavior:

* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a weird toast error message and the header menu is gone forever

Now:

* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a working header menu

Fixes elastic#97140
kibanamachine added a commit that referenced this issue May 28, 2021
Call `setHeaderActionMenu(undefined)` when the HeaderMenuPortal is unmounted.

Found this line in the docs:

> Calling the handler with `undefined` will unmount the current mount point.

Which we weren't doing before.

Previous behavior:

* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a weird toast error message and the header menu is gone forever

Now:

* Go to /app/observability/alerts
* Click the "View in app" button for an APM alert
* Click back
* Click the "View in app" button for an APM alert
* Get a working header menu

Fixes #97140

Co-authored-by: Nathan L Smith <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience Team:Observability Team label for Observability Team (for things that are handled across all of observability) Theme: rac label obsolete v7.14.0
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant