feat: AppLayout error boundaries v2 by georgylobko · Pull Request #4296 · cloudscape-design/components

georgylobko · 2026-02-25T12:31:28Z

Description

Error boundaries for AppLayout areas - all areas that load as widgets now have error boundary coverage.

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2026-02-25T19:58:55Z

Codecov Report

❌ Patch coverage is 98.71795% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.44%. Comparing base (52a4127) to head (ed35697).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...visual-refresh-toolbar/drawer/global-ai-drawer.tsx	93.18%	3 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4296   +/-   ##
=======================================
  Coverage   97.43%   97.44%           
=======================================
  Files         897      897           
  Lines       26350    26374   +24     
  Branches     9517     9523    +6     
=======================================
+ Hits        25675    25700   +25     
- Misses        632      668   +36     
+ Partials       43        6   -37

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

georgylobko · 2026-02-26T12:59:22Z

src/error-boundary/internal.tsx

+  ) : (
+    <ErrorBoundaryImpl
+      renderFallback={renderFallback}
+      onError={() => null}


We don't need to do anything here as we expect such errors to be handled in global event listeners to avoid over-reporting them.

What are these global listeners? Which telemetry sink do they forward events to?

discussed in DM

georgylobko · 2026-02-27T10:40:53Z

src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx

  return (
-    <>
+    <AppLayoutBuiltInErrorBoundary
+      renderFallback={() => (


I don't know how to ensure code coverage here - I expect this code to be executed as a last resort - when (if) something really unexpected happens

just-boris · 2026-03-04T09:20:16Z

pages/app-layout/with-error-boundaries.page.tsx

+  const AppLayoutWrapper = hasParentErrorBoundary ? ErrorBoundary : 'div';
+  const appLayoutWrapperProps = hasParentErrorBoundary
+    ? {
+        onError: (error: any) =>
+          console.log('The error gets caught by the parent error boundary wrapping app layout: ', error),
+      }
+    : {};
+
+  return (
+    <AppLayoutWrapper {...(appLayoutWrapperProps as any)}>


Optional comment

How to avoid that many any

const appLayout = <AppLayout ... />; return hasParentErrorBoundary ? <ErrorBoundary>{appLayout}<ErrorBoundary> : appLayout

just-boris · 2026-03-04T09:21:05Z

pages/app-layout/with-error-boundaries.page.tsx

+                        },
+
+                        trigger: {
+                          iconSvg: Symbol() as any,


What is happening here?

I added a drawer with a broken trigger to test how the error boundary handles it

Makes sense in hindsight, but it needs an explaining comment that all of this is intentional. Good case for // @ts-expect-error by the way

and same for all intentionally invalid content

good point. addressed

just-boris · 2026-03-04T09:22:08Z

pages/app-layout/with-error-boundaries.page.tsx

+          <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="7" />
+          <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="3" />
+        </svg>`,
+                        } as any,


Why is this needed?

just-boris · 2026-03-04T09:26:46Z

src/__a11y__/a11y-app-layout-toolbar.test.ts

  // Test page for an app layout nested inside another through an iframe.
  // Not a use case that's encouraged.
  'app-layout/multi-layout-global-drawer-child-layout',
+  'app-layout/with-error-boundaries',


I do not see any nested app layouts, why is it skipped?

Removed. I initially tested it with nested app layouts

Actually, this is a good idea for a test. That one crashing app layout does not break another

yes, brought back nested app layouts

just-boris · 2026-03-04T09:34:25Z

src/app-layout/__tests__/widget-areas-error-boundaries.test.tsx

+    describe.each([true, false])(
+      'entire AppLayout wrapped with error boundary component : %p',
+      (wrappedWithErrorBoundary: boolean) => {
+        const onError = jest.fn();


Who is going to reset this spy function between tests?

just-boris · 2026-03-04T09:49:34Z

src/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.tsx

    appLayoutState.widgetizedState;
  return (
-    <>
+    <AppLayoutBuiltInErrorBoundary>


This is not enough, because the code above is outside the boundary. if there will be any undefined value, the page will crash

Expected implementation is how you did AppLayoutStateProvider. Zero code outside the boundary

You can create a reusable utility for it

function withErrorBoundary(Component) { return function WithBoundaryComponent() { return <AppLayoutBuiltInErrorBoundary><Component /></AppLayoutBuiltInErrorBoundary> } }

just-boris · 2026-03-04T09:56:27Z

src/error-boundary/internal.tsx

+  const context = useContext(ErrorBoundariesContext);
+  const thisSuppressed = context.suppressed === true || context.suppressed === RootSuppressed;
+  const nextSuppressed = suppressNested || thisSuppressed;
+  return !thisSuppressed ? (


Who is enabling this suppressing condition? Us or the consuming teams?

The in-widget boundaries should be only controlled by us and only emit metrics to our telemetry sink

Who is enabling this suppressing condition?

Consumers. This does not suppress in-widget EBs, but forwards suppress conditions down to the components tree. Refactored this code to make it more readable

just-boris · 2026-03-04T09:56:57Z

src/error-boundary/internal.tsx

+  wrapper,
+  suppressNested = false,
+  children,
+  renderFallback = () => <></>,


Is this argument ever used? I cannot find an example

Yes, it is used here:

components/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx

Line 195 in 974254f

<AppLayoutBuiltInErrorBoundary renderFallback={() => <div />}>

The empty div there instead of a react fragment ensures correct positioning for elements in the header

just-boris · 2026-03-04T09:57:22Z

src/error-boundary/internal.tsx

+  ) : (
+    <ErrorBoundaryImpl
+      renderFallback={renderFallback}
+      onError={() => null}


What are these global listeners? Which telemetry sink do they forward events to?

just-boris · 2026-03-04T09:59:22Z

src/error-boundary/internal.tsx

+      {...context}
+      wrapper={wrapper}
+      renderFallback={renderFallback}
+      className={styles['app-layout-part-fallback']}


Does this class goes anywhere? Didn't we discuss that this component renders no DOM? What happened to that discussion?

Yes, it applies display: contents to the EB root. Without this, components that depend on specific element ordering would break. This ensures they render correctly without adding extra styling.

components/src/error-boundary/styles.scss

Line 11 in d11007e

display: contents;

just-boris · 2026-03-05T09:12:34Z

Still see 3 unresolved discussions

Also forgot to call it on the previous review, but we need at least one integration test here. Because this is the only way to test against React 18 in our build

…page.tsx

georgylobko deployed to dev-pages-react16 February 25, 2026 12:41 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 February 25, 2026 12:41 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 February 25, 2026 13:34 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 February 25, 2026 13:34 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 February 25, 2026 13:49 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 February 25, 2026 13:49 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 February 25, 2026 19:45 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 February 25, 2026 19:45 — with GitHub Actions View deployment

georgylobko force-pushed the feat/app-layout-error-boundaries-v2 branch from 01e3a2e to b83aa6d Compare February 26, 2026 10:53

georgylobko commented Feb 26, 2026

View reviewed changes

georgylobko force-pushed the feat/app-layout-error-boundaries-v2 branch from 8f10ee5 to 085ce7b Compare February 26, 2026 13:27

georgylobko deployed to dev-pages-react16 February 26, 2026 13:37 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 February 26, 2026 13:37 — with GitHub Actions View deployment

georgylobko commented Feb 27, 2026

View reviewed changes

georgylobko deployed to dev-pages-react18 February 27, 2026 10:51 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 February 27, 2026 10:51 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 February 27, 2026 11:02 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 February 27, 2026 11:02 — with GitHub Actions View deployment

georgylobko force-pushed the feat/app-layout-error-boundaries-v2 branch from eec5798 to 73303c9 Compare February 27, 2026 12:30

georgylobko deployed to dev-pages-react18 February 27, 2026 12:40 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 February 27, 2026 12:40 — with GitHub Actions View deployment

georgylobko force-pushed the feat/app-layout-error-boundaries-v2 branch 2 times, most recently from 35a0e87 to 974254f Compare March 3, 2026 20:14

georgylobko deployed to dev-pages-react18 March 3, 2026 20:24 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 March 3, 2026 20:24 — with GitHub Actions View deployment

georgylobko marked this pull request as ready for review March 3, 2026 21:04

georgylobko requested a review from a team as a code owner March 3, 2026 21:04

georgylobko requested review from avinashbot and removed request for a team March 3, 2026 21:04

georgylobko requested review from gethinwebster and just-boris March 3, 2026 21:04

just-boris reviewed Mar 4, 2026

View reviewed changes

georgylobko added 5 commits March 4, 2026 15:21

feat: AppLayout error boundaries v2

4380e18

chore: Review feedback

09b4c3e

chore: Additional tests

a08afb2

chore: Refactoring drawers boundaries

edf8997

chore: Refactoring widget areas boundaries

bc5ba19

georgylobko force-pushed the feat/app-layout-error-boundaries-v2 branch from a25ce49 to bc5ba19 Compare March 4, 2026 23:21

georgylobko deployed to dev-pages-react16 March 4, 2026 23:31 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 March 4, 2026 23:31 — with GitHub Actions View deployment

georgylobko and others added 2 commits March 5, 2026 09:50

Merge branch 'main' into feat/app-layout-error-boundaries-v2

d11007e

chore: Refactoring

e3dee12

georgylobko deployed to dev-pages-react16 March 5, 2026 18:30 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react18 March 5, 2026 18:30 — with GitHub Actions View deployment

chore: Test ids for controls to break parts on with-error-boundaries.…

ed35697

…page.tsx

georgylobko deployed to dev-pages-react18 March 5, 2026 19:49 — with GitHub Actions View deployment

georgylobko deployed to dev-pages-react16 March 5, 2026 19:49 — with GitHub Actions View deployment

georgylobko added 2 commits March 5, 2026 12:23

chore: Integ tests for error boundaries

ac7de59

chore: Integ tests for error boundaries

56af604

Conversation

georgylobko commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov bot commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

just-boris Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

just-boris commented Mar 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgylobko commented Feb 25, 2026 •

edited

Loading

codecov bot commented Feb 25, 2026 •

edited

Loading

just-boris Mar 4, 2026 •

edited

Loading