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.

Sign up for GitHub

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

Jump to bottom

Kibana React Error Boundary: Stage 1 #167159

Closed
2 tasks done
vadimkibana opened this issue Sep 25, 2023 · 3 comments
Closed
2 tasks done

Kibana React Error Boundary: Stage 1 #167159

vadimkibana opened this issue Sep 25, 2023 · 3 comments
Assignees
@tsullivan
Labels
Feature:Chrome Core's Chrome UI (sidenav, header, breadcrumbs) Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)

Comments

@vadimkibana
Copy link
Contributor

vadimkibana commented Sep 25, 2023 •
edited by tsullivan
Loading

Meta issue: https://github.com/elastic/kibana-team/issues/646

  • Create error boundary React component (KibanaErrorBoundary)
  • Make it look nicer than the "diagonal-border" component
  • Discriminate between fatal errors vs non-fatal
    • Initially, fatal errors are Kibana upgrade errors (just use Error object message).
  • Initially, render all errors inline
    • Leave ability to render fatal errors as global overlay in the future
  • React inline component EuiCallout/EuiEmptyPrompt, which renders error (ErrorContainer) KibanaErrorBoundary initial implementation #168754
    • Non-fatal (EuiEmptyPrompt)
      • Nicer than the EUI one
      • Title
      • Maybe description
    • Fatal (in addition to above)
      • "Refresh" button (only for fatal errors)
      • Title (should mention "fatal" error)
      • Error message
        • Expandable
        • Error stack trace
        • Information about React components where error happened
  • Pre-load all React components and other code necessary for rendering error messages, as—once error happens—we might not be able to load anything from the server again.
  • Automatically track number of upgrade error occurances (for fatal errors).

Tasks
Preview Give feedback
  1. KibanaErrorBoundary initial implementation #168754
    Team:SharedUX backport:skip ci:build-storybooks release_note:skip v8.12.0
    tsullivan
  2. Integrate Event-Based Telemetry in KibanaErrorBoundary #169895
    Team:SharedUX backport:skip release_note:skip v8.12.0
    tsullivan
@botelastic botelastic bot added the needs-team Issues missing a team label label Sep 25, 2023
@vadimkibana vadimkibana changed the title Kibana React Error Boundary: State 1 Kibana React Error Boundary: Stage 1 Sep 25, 2023
@vadimkibana vadimkibana added Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) Feature:Chrome Core's Chrome UI (sidenav, header, breadcrumbs) labels Sep 25, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

@botelastic botelastic bot removed the needs-team Issues missing a team label label Sep 25, 2023
@tsullivan tsullivan mentioned this issue Oct 5, 2023
Closed
8 tasks
@tsullivan
Copy link
Member

This task covers steps 1 and 2 in a rollout plan document I created: https://docs.google.com/presentation/d/1d6IOyagc1e-9J7cQ5Ioix2zrUPjntd_90dPqiYPhPOI/edit?usp=sharing

Screenshot 2023-10-10 at 3 52 58 PM

This was referenced Oct 12, 2023
Merged
Closed
tsullivan added a commit that referenced this issue Oct 23, 2023
@tsullivan @kibanamachine @mistic
KibanaErrorBoundary initial implementation (#168754)
53c83e7 
## Summary

* Meta issue: https://github.com/elastic/kibana/issues/166584
* This PR implements tasks in:
#167159
* [Technical doc [Elastic
internal]](https://docs.google.com/document/d/1kVD3T08AzLuvRMnFrXzWd6rTQWZDFfjqmOMCoXRI-14/edit)

This PR creates the `ErrorBoundary` component and its provider for
services. It implements the wrapper around a few management apps owned
by Appex-SharedUX.

### Screenshots

Updated 2023-10-18

**Server upgrade scenario:** In this case, the caught error is known to
be recoverable via window refresh:
* <img width="1413" alt="image"
src="https://github.com/elastic/kibana/assets/908371/7f34fbab-0e67-4c67-a4a1-989464d5b0d0">

**Unknown/Custom error:** In this case, the error is something outside
of known cases where the fix is to refresh:
* <img width="1413" alt="image"
src="https://github.com/elastic/kibana/assets/908371/7c39b5df-d4da-4e33-aeca-9ea447010762">

### Testing

1. Use a script proxy in between the browser and the Kibana server.
    * Try **https://github.com/tsullivan/simple-node-proxy**
* or
**https://chrome.google.com/webstore/detail/tweak-mock-and-modify-htt/feahianecghpnipmhphmfgmpdodhcapi**.
2. Script the proxy to send 404 responses for the Reporting plugin
bundle, and for a bundle of some Management app.
3. Try the Share > CSV menu in Discover. It should be blocked, and
handled with a toast message. Buttons in the toast should work.
4. Try the SharedUX management apps that use the wrapper. It should be
blocked, and handled with an EuiCallout. Refresh button and EuiAccordion
should work.

### Checklist
- [x] Ensure the package code is delivered to the browser in the initial
loading of the page (c2559e8)
- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Tiago Costa <[email protected]>
@tsullivan
Copy link
Member

Tasks are completed for this iteration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tsullivan tsullivan

Labels
Feature:Chrome Core's Chrome UI (sidenav, header, breadcrumbs) Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tsullivan @elasticmachine @vadimkibana