Fix missing Dart component names in error boundary componentStack

[greglittlefield-wf]

Ultimate Problem

When error boundaries catch errors, they include a "component stack" string, which shows the component that threw the error as well as all parent components in the hierarchy.

This is available via ReactErrorInfo.componentStack, and is useful to log when error occur.

However, the Dart component weren't present in that string for class components, and instead they'd show up as ReactDartComponent2, or some minified name (e.g., a, i) in the prod bundles.

I feel like this used to work at some point, since I feel like we would have noticed that error boundaries don't have useful component names... Perhaps this behavior regressed during a React upgrade?

Expected:

    at _ThrowingComponentComponent2 (http://localhost:8080/test/packages/react/react.js:275:7)
    at div
    at _ErrorBoundaryComponent (http://localhost:8080/test/packages/react/react.js:275:7)
    at div

Actual (dev React JS bundle):

dart_sdk.js:24612 componentDidCatch: info.componentStack 
    at ReactDartComponent2 (http://localhost:8080/test/packages/react/react.js:275:7)
    at div
    at ReactDartComponent2 (http://localhost:8080/test/packages/react/react.js:275:7)
    at div

Actual (prod React JS bundle):

componentDidCatch: info.componentStack 
    at i (http://localhost:8080/test/packages/react/react_prod.js:14:15627)
    at div
    at i (http://localhost:8080/test/packages/react/react_prod.js:14:15627)
    at div

Solution

• Set the JS name property on the JS class for class components, since that's seems to be what React uses
  • (Setting displayName should work but apparently in this case it doesn't 🤷 , similar to https://github.com/facebook/react/issues/17288)
• Add functional-style tests to ensure the component name is present in componentStack for all component types
• Add basic error boundary example for manual testing

Testing steps

• Tests pass (passing CI)
• (Optional) Serve the error boundary example and check that the printed errorInfo contains the component name

[aviary-wf]

Security Insights

(6) Vulnerable direct dependencies were detected

1 vulns in browserslist < 4.16.5 via yarn.lock

1 vulns in elliptic < 6.5.4 via yarn.lock

1 vulns in glob-parent < 5.1.2 via yarn.lock

1 vulns in lodash < 4.17.21 via yarn.lock

1 vulns in path-parse < 1.0.7 via yarn.lock

1 vulns in ssri < 6.0.2 via yarn.lock

Action Items

• Review dependencies for available updates
• See this Splunk dashboard for more CVE details
• 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.

[semveraudit-wf]

Public API Changes

No changes to the public API found for commit 8efa7576ed4a23b2993ca38df113572cc054570e

Showing results for 8efa7576ed4a23b2993ca38df113572cc054570e

Powered by semver-audit-service. Please report any problems by filing an issue. Reported by the dart semver audit client 2.2.2 Browse public API.

Last edited UTC Aug 27 at 18:42:40

[greglittlefield-wf]

@Workiva/release-management-p