CPLAT-5599 Add temporary JS error boundary

[aaronlademann-wf]

Motivation

Problem

We want to release react-dart 5.0.0 (which upgrades us to ReactJS 16) without depending on Dart 2 / Component2 / UiComponent2 - and all the new lifecycle methods that those expose.

However, one of the biggest behavioral differences between ReactJS 15 and 16 is that in 16, when a component throws - the entire component tree that it is a part of - will unmount completely.

This means that if we just unleash ReactJS 16 within the Workiva ecosystem, if any UI component in the entire shell throws - the entire shell will unmount (blank screen). This is an unacceptable risk / experience.

Solution

In CPLAT-3093, we created an ErrorBoundary component in over_react - and have since wrapped all critical "top level" react_dom.render calls within Workiva platform repos to make that ErrorBoundary component be the root of the tree.

We can make use of that to mitigate our problem by having it actually wrap around a new, private JS component that utilizes its own JS interop to make use of the ReactJS componentDidCatch / getDerivedStateFromError lifecycle methods to prevent the entire tree from unmounting when an error is caught.

Changes

1. Create a new, private JS component that has interop handling for the componentDidCatch / getDerivedStateFromError lifecycle methods.
2. Update ErrorBoundary component to render the new private JS component, passing props.children through as the children of the private JS component.
   1. Proxy calls to the props.onComponentDidCatch callback using the JS component's componentDidCatch lifecycle method interop handler.
3. Write tests

Review

See CONTRIBUTING.md for more details on review types (+1 / QA +1 / +10) and code review process.

Please review: @greglittlefield-wf @joebingham-wk @kealjones-wk

QA Checklist

• Tests were updated and provide good coverage of the changeset and other affected code
• Manual testing was performed if needed
  • Steps from PR author:
  • Serve the examples, and scroll down to the two new examples of "faulty" components that throw within a lifecycle method.
    • Click the button for the one wrapped by an ErrorBoundary, verify that the button is still rendered in the DOM after the error is thrown.
  • Anything falling under manual testing criteria outlined in CONTRIBUTING.md

Merge Checklist

While we perform many automated checks before auto-merging, some manual checks are needed:

• A Client Platform member has reviewed these changes
• There are no unaddressed comments - this check can be automated if reviewers use the "Request Changes" feature
• For release PRs - Version metadata in Rosie comment is correct

[aviary3-wk]

Security Insights

No security relevant content was detected by automated scans.

Action Items

• Review PR for security impact; comment "security review required" if needed or unsure
• Verify aviary.yaml coverage of security relevant code

---

Questions or Comments? Reach out on Slack: #support-infosec.

[joebingham-wk]

+1

[codecov-io]

Codecov Report

Merging #291 into 3.0.0-wip will increase coverage by 0.19%.
The diff coverage is 100%.

@@              Coverage Diff              @@
##           3.0.0-wip     #291      +/-   ##
=============================================
+ Coverage      90.27%   90.45%   +0.19%     
=============================================
  Files             36       36              
  Lines           1807     1821      +14     
=============================================
+ Hits            1631     1647      +16     
+ Misses           176      174       -2

[aaronlademann-wf]

@greglittlefield-wf feedback addressed

[greglittlefield-wf]

+10

Will merge once travis passes

[aaronlademann-wf]

@Workiva/release-management-pp