----------------------------------------------------------- This is an automatically generated e-mail. To reply, visit: https://reviews.apache.org/r/63436/ -----------------------------------------------------------
Review request for Aurora, David McLaughlin, Joshua Cohen, and Kai Huang. Repository: aurora Description ------- # Enabling ErrorBoundary in Scheduler UI React 16 introduces a new concept of an “error boundary” that allows us to limit the impact of an error and not unmount the whole component tree. I am open to keeping or removing the stack trace. from React docs: > As of React 16, errors that were not caught by any error boundary will result > in unmounting of the whole React component tree. Diffs ----- ui/src/main/js/components/ErrorBoundary.js PRE-CREATION ui/src/main/js/components/__tests__/ErrorBoundary-test.js PRE-CREATION ui/src/main/js/index.js 9f94d4bd6f649d74bdd9c3aa99783e01cae25d93 ui/src/main/sass/app.scss 8a10e1c5a501828c39ca7b9cf6b518a2d7a99d28 ui/src/main/sass/components/_error-boundary.scss PRE-CREATION Diff: https://reviews.apache.org/r/63436/diff/1/ Testing ------- - Unit tests added. This however causes an error message to be logged on stdout. ``` ? ./gradlew ui:test ... ASS src/main/js/pages/__tests__/Job-test.js PASS src/main/js/components/__tests__/InstanceViz-test.js PASS src/main/js/pages/__tests__/Update-test.js PASS src/main/js/components/__tests__/InstanceHistoryItem-test.js PASS src/main/js/components/__tests__/Pagination-test.js PASS src/main/js/components/__tests__/ErrorBoundary-test.js ? Console console.error node_modules/react-dom/cjs/react-dom.development.js:8305 The above error occurred in the <ComponentWithError> component: in ComponentWithError in ErrorBoundary (created by WrapperComponent) in WrapperComponent React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. ... BUILD SUCCESSFUL in 0s 2 actionable tasks: 2 up-to-date # rmotamedi@tw-mbp-rmotamedi:~/oss/aurora on git:error-boundry ? [18:52:22] ? ./gradlew ui:lint BUILD SUCCESSFUL in 6s 4 actionable tasks: 4 up-to-date ``` - For more testing, I added the following component (that raises an error) and installed it under `UpdateInstanceEvents`. I then caught the error at various depths in the doom tree. I attached the screen-shots of how this will render. ## ComponentWithError ``` import React from 'react' export default class ComponentWithError extends React.Component { render() { throw new Error('Crashed!'); return <div />; } } ``` File Attachments ---------------- handling boundary on the main router https://reviews.apache.org/media/uploaded/files/2017/10/31/d95e9f85-3dad-4332-ac33-3cb9f8a4455c__Screen_Shot_2017-10-30_at_6.30.22_PM.png handling boundary on a component deep in the doom tree. https://reviews.apache.org/media/uploaded/files/2017/10/31/64d47905-b058-4ef5-9d19-fa3311a47f9d__Screen_Shot_2017-10-30_at_6.36.18_PM.png Thanks, Reza Motamedi
