Skip to content

feat: AppLayout error boundaries #4266

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

Draft
georgylobko wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

feat: AppLayout error boundaries #4266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d557049
feat: AppLayout error boundaries
georgylobko Feb 19, 2026
212a503
chore: Adjust styles, make left drawer error boundaries more granular
georgylobko Feb 20, 2026
4a5dfe7
chore: Replace InternalErrorBoundary with BuiltInErrorBoundary in the…
georgylobko Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

372 changes: 372 additions & 0 deletions pages/app-layout/with-error-boundaries.page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

58 changes: 38 additions & 20 deletions src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import clsx from 'clsx';

import { InternalItemOrGroup } from '../../../button-group/interfaces';
import ButtonGroup from '../../../button-group/internal';
import { InternalErrorBoundary } from '../../../error-boundary/internal';
import PanelResizeHandle from '../../../internal/components/panel-resize-handle';
import customCssProps from '../../../internal/generated/custom-css-properties';
import { usePrevious } from '../../../internal/hooks/use-previous';
Expand All @@ -14,6 +15,7 @@ import { AppLayoutProps } from '../../interfaces';
import { FocusControlState } from '../../utils/use-focus-control';
import { AppLayoutInternals, InternalDrawer } from '../interfaces';
import { OnChangeParams } from '../state/use-ai-drawer';
import { TriggerButtonErrorBoundary } from '../toolbar/drawer-triggers';
import { useResize } from './use-resize';

import sharedStyles from '../../resize/styles.css.js';
Expand Down Expand Up @@ -188,26 +190,34 @@ export function AppLayoutGlobalAiDrawerImplementation({
<div className={styles['drawer-content']}>
<header className={styles['drawer-content-header']}>
<div className={styles['drawer-content-header-content']}>
{activeAiDrawer?.header ?? <div />}
<TriggerButtonErrorBoundary id="header">
{activeAiDrawer?.header ?? <div />}
</TriggerButtonErrorBoundary>
<div className={styles['drawer-actions']}>
<ButtonGroup
dropdownExpandToViewport={false}
variant="icon"
onItemClick={event => {
switch (event.detail.id) {
case 'close':
onActiveAiDrawerChange?.(null, { initiatedByUserAction: true });
break;
case 'expand':
setExpandedDrawerId(isExpanded ? null : activeDrawerId!);
break;
default:
activeAiDrawer?.onHeaderActionClick?.(event);
}
}}
ariaLabel="Left panel actions"
items={drawerActions}
/>
<InternalErrorBoundary
onError={error => console.log('Error boundary for the local drawer: ', error)}
suppressNested={false}
suppressible={true}
>
<ButtonGroup
dropdownExpandToViewport={false}
variant="icon"
onItemClick={event => {
switch (event.detail.id) {
case 'close':
onActiveAiDrawerChange?.(null, { initiatedByUserAction: true });
break;
case 'expand':
setExpandedDrawerId(isExpanded ? null : activeDrawerId!);
break;
default:
activeAiDrawer?.onHeaderActionClick?.(event);
}
}}
ariaLabel="Left panel actions"
items={drawerActions}
/>
</InternalErrorBoundary>
</div>
</div>
{!isMobile && isExpanded && activeAiDrawer?.ariaLabels?.exitExpandedModeButton && (
Expand Down Expand Up @@ -242,7 +252,15 @@ export function AppLayoutGlobalAiDrawerImplementation({
</div>
)}
</header>
<div className={styles['drawer-content-content']}>{activeAiDrawer?.content}</div>
<div className={styles['drawer-content-content']}>
<InternalErrorBoundary
onError={error => console.log('Error boundary for the local drawer: ', error)}
suppressNested={false}
suppressible={true}
>
{activeAiDrawer?.content}
</InternalErrorBoundary>
</div>
</div>
</div>
</aside>
Expand Down
132 changes: 70 additions & 62 deletions src/app-layout/visual-refresh-toolbar/drawer/global-bottom-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import clsx from 'clsx';

import { InternalItemOrGroup } from '../../../button-group/interfaces';
import ButtonGroup from '../../../button-group/internal';
import { InternalErrorBoundary } from '../../../error-boundary/internal';
import PanelResizeHandle from '../../../internal/components/panel-resize-handle';
import customCssProps from '../../../internal/generated/custom-css-properties';
import { usePrevious } from '../../../internal/hooks/use-previous';
Expand Down Expand Up @@ -241,74 +242,81 @@ function AppLayoutGlobalBottomDrawerImplementation({
}}
data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}
>
<div className={clsx(styles['global-drawer-wrapper'])}>
{!isMobile && !isExpanded && <div className={styles['drawer-gap']} />}
{!isMobile && activeDrawer?.resizable && !isExpanded && (
// Prevents receiving focus in Firefox
<div className={styles['drawer-slider']} tabIndex={-1}>
<PanelResizeHandle
ref={refs?.slider}
position="bottom"
className={testutilStyles['drawers-slider']}
ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}
tooltipText={activeDrawer?.ariaLabels?.resizeHandleTooltipText}
ariaValuenow={resizeProps.relativeSize}
onKeyDown={resizeProps.onKeyDown}
onDirectionClick={resizeProps.onDirectionClick}
onPointerDown={resizeProps.onPointerDown}
/>
</div>
)}
<header className={styles['bottom-drawer-content-header']} ref={headerRef}>
<div className={styles['bottom-drawer-content-header-content']}>
{activeDrawer?.header ?? <div />}
<div className={styles['bottom-drawer-actions']}>
<ButtonGroup
dropdownExpandToViewport={false}
variant="icon"
onItemClick={event => {
switch (event.detail.id) {
case 'close':
onActiveGlobalBottomDrawerChange(null, { initiatedByUserAction: true });
break;
case 'expand':
setExpandedDrawerId(isExpanded ? null : activeDrawerId);
break;
default:
activeDrawer?.onHeaderActionClick?.(event);
}
}}
ariaLabel="Global panel actions"
items={drawerActions}
__internalRootRef={(root: HTMLElement) => {
if (!root) {
return;
}
refs.close = {
current: root.querySelector('[data-itemid="close"]') as unknown as Focusable,
};
}}
<InternalErrorBoundary
className={styles['drawer-error-boundary']}
onError={error => console.log('Error boundary for the local drawer: ', error)}
suppressNested={false}
suppressible={true}
>
<div className={clsx(styles['global-drawer-wrapper'])}>
{!isMobile && !isExpanded && <div className={styles['drawer-gap']} />}
{!isMobile && activeDrawer?.resizable && !isExpanded && (
// Prevents receiving focus in Firefox
<div className={styles['drawer-slider']} tabIndex={-1}>
<PanelResizeHandle
ref={refs?.slider}
position="bottom"
className={testutilStyles['drawers-slider']}
ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}
tooltipText={activeDrawer?.ariaLabels?.resizeHandleTooltipText}
ariaValuenow={resizeProps.relativeSize}
onKeyDown={resizeProps.onKeyDown}
onDirectionClick={resizeProps.onDirectionClick}
onPointerDown={resizeProps.onPointerDown}
/>
</div>
</div>
</header>
<div
className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}
data-testid={`awsui-app-layout-drawer-content-${activeDrawerId}`}
>
)}
<header className={styles['bottom-drawer-content-header']} ref={headerRef}>
<div className={styles['bottom-drawer-content-header-content']}>
{activeDrawer?.header ?? <div />}
<div className={styles['bottom-drawer-actions']}>
<ButtonGroup
dropdownExpandToViewport={false}
variant="icon"
onItemClick={event => {
switch (event.detail.id) {
case 'close':
onActiveGlobalBottomDrawerChange(null, { initiatedByUserAction: true });
break;
case 'expand':
setExpandedDrawerId(isExpanded ? null : activeDrawerId);
break;
default:
activeDrawer?.onHeaderActionClick?.(event);
}
}}
ariaLabel="Global panel actions"
items={drawerActions}
__internalRootRef={(root: HTMLElement) => {
if (!root) {
return;
}
refs.close = {
current: root.querySelector('[data-itemid="close"]') as unknown as Focusable,
};
}}
/>
</div>
</div>
</header>
<div
className={styles['drawer-content']}
style={{
blockSize:
isMobile || isExpanded
? drawerFullScreenHeight
: `${size - GAP_HEIGHT - RESIZE_HANDLER_HEIGHT - (headerRef?.current?.clientHeight ?? 0)}px`,
}}
className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}
data-testid={`awsui-app-layout-drawer-content-${activeDrawerId}`}
>
{activeDrawer?.content}
<div
className={styles['drawer-content']}
style={{
blockSize:
isMobile || isExpanded
? drawerFullScreenHeight
: `${size - GAP_HEIGHT - RESIZE_HANDLER_HEIGHT - (headerRef?.current?.clientHeight ?? 0)}px`,
}}
>
{activeDrawer?.content}
</div>
</div>
</div>
</div>
</InternalErrorBoundary>
</aside>
);
}}
Expand Down
63 changes: 38 additions & 25 deletions src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import clsx from 'clsx';

import { InternalItemOrGroup } from '../../../button-group/interfaces';
import ButtonGroup from '../../../button-group/internal';
import { InternalErrorBoundary } from '../../../error-boundary/internal';
import PanelResizeHandle from '../../../internal/components/panel-resize-handle';
import customCssProps from '../../../internal/generated/custom-css-properties';
import { usePrevious } from '../../../internal/hooks/use-previous';
Expand Down Expand Up @@ -179,33 +180,45 @@ function AppLayoutGlobalDrawerImplementation({
data-testid={`awsui-app-layout-drawer-content-${activeDrawerId}`}
>
<div className={styles['drawer-actions']}>
<ButtonGroup
dropdownExpandToViewport={false}
variant="icon"
onItemClick={event => {
switch (event.detail.id) {
case 'close':
onActiveGlobalDrawersChange(activeDrawerId, { initiatedByUserAction: true });
break;
case 'expand':
setExpandedDrawerId(isExpanded ? null : activeDrawerId);
break;
default:
activeGlobalDrawer?.onHeaderActionClick?.(event);
}
}}
ariaLabel="Global panel actions"
items={drawerActions}
__internalRootRef={(root: HTMLElement) => {
if (!root) {
return;
}
refs.close = { current: root.querySelector('[data-itemid="close"]') as unknown as Focusable };
}}
/>
<InternalErrorBoundary
onError={error => console.log('Error boundary for the trigger button: ', error)}
suppressNested={false}
suppressible={true}
>
<ButtonGroup
dropdownExpandToViewport={false}
variant="icon"
onItemClick={event => {
switch (event.detail.id) {
case 'close':
onActiveGlobalDrawersChange(activeDrawerId, { initiatedByUserAction: true });
break;
case 'expand':
setExpandedDrawerId(isExpanded ? null : activeDrawerId);
break;
default:
activeGlobalDrawer?.onHeaderActionClick?.(event);
}
}}
ariaLabel="Global panel actions"
items={drawerActions}
__internalRootRef={(root: HTMLElement) => {
if (!root) {
return;
}
refs.close = { current: root.querySelector('[data-itemid="close"]') as unknown as Focusable };
}}
/>
</InternalErrorBoundary>
</div>
<div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>
{activeGlobalDrawer?.content}
<InternalErrorBoundary
onError={error => console.log('Error boundary for the trigger button: ', error)}
suppressNested={false}
suppressible={true}
>
{activeGlobalDrawer?.content}
</InternalErrorBoundary>
</div>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Transition } from 'react-transition-group';
import clsx from 'clsx';

import { InternalButton } from '../../../button/internal';
import { BuiltInErrorBoundary } from '../../../error-boundary/internal';
import PanelResizeHandle from '../../../internal/components/panel-resize-handle';
import customCssProps from '../../../internal/generated/custom-css-properties';
import { getLimitedValue } from '../../../split-panel/utils/size-utils';
Expand Down Expand Up @@ -143,11 +144,11 @@ export function AppLayoutDrawerImplementation({
)}
style={{ blockSize: drawerHeight }}
>
{toolsContent}
<BuiltInErrorBoundary suppressNested={false}>{toolsContent}</BuiltInErrorBoundary>
</div>
{activeDrawerId !== TOOLS_DRAWER_ID && (
<div key={activeDrawerId} className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>
{activeDrawer?.content}
<BuiltInErrorBoundary suppressNested={false}>{activeDrawer?.content}</BuiltInErrorBoundary>
</div>
)}
</div>
Expand Down
40 changes: 40 additions & 0 deletions src/app-layout/visual-refresh-toolbar/drawer/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,46 @@ $global-drawer-expanded-mode-motion: #{awsui.$motion-duration-refresh-only-slow}
$drawer-resize-handle-size: awsui.$space-m;
$ai-drawer-heider-height: 42px;

.ai-drawer-error-boundary {
position: sticky;
z-index: constants.$drawer-z-index;
background-color: awsui.$color-background-container-content;
display: grid;
inline-size: var(#{custom-props.$drawerSize});

block-size: 100%;
overflow: hidden;
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
overscroll-behavior-y: contain;
pointer-events: auto;
word-wrap: break-word;
border-start-end-radius: awsui.$space-xxs;
min-inline-size: 300px;

@include mobile-only {
margin-block-start: 42px;
inline-size: 100%;
}
}

.drawer-error-boundary {
@include mobile-only {
position: sticky;
z-index: constants.$drawer-z-index;
background-color: awsui.$color-background-container-content;
display: grid;
inline-size: var(#{custom-props.$drawerSize});
margin-block-start: 42px;

block-size: 100%;
overflow: hidden;
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
overscroll-behavior-y: contain;
pointer-events: auto;
word-wrap: break-word;
}
}

.drawer {
position: sticky;
z-index: constants.$drawer-z-index;
Expand Down
Loading
Loading