diff --git a/pages/app/index.tsx b/pages/app/index.tsx
index 9c3d2776b0..555bfd09a4 100644
--- a/pages/app/index.tsx
+++ b/pages/app/index.tsx
@@ -48,6 +48,7 @@ function isAppLayoutPage(pageId?: string) {
     'prompt-input/simple',
     'funnel-analytics/static-single-page-flow',
     'funnel-analytics/static-multi-page-flow',
+    'error-boundary',
   ];
   return pageId !== undefined && appLayoutPages.some(match => pageId.includes(match));
 }
diff --git a/pages/error-boundary/demo-async-load.page.tsx b/pages/error-boundary/demo-async-load.page.tsx
new file mode 100644
index 0000000000..b41bd22387
--- /dev/null
+++ b/pages/error-boundary/demo-async-load.page.tsx
@@ -0,0 +1,65 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { Suspense } from 'react';
+
+import { AppLayout, Spinner } from '~components';
+import { ErrorBoundariesProvider } from '~components/error-boundary/context';
+import I18nProvider from '~components/i18n';
+import messages from '~components/i18n/messages/all.en';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+function createDelayedResource(ms: number, error: Error) {
+  let done = false;
+  const promise = new Promise<void>(resolve =>
+    setTimeout(() => {
+      done = true;
+      resolve();
+    }, ms)
+  );
+  return {
+    read() {
+      if (!done) {
+        throw promise;
+      }
+      throw error;
+    },
+  };
+}
+
+const resource = createDelayedResource(2000, new Error('Async page load failed'));
+
+function AsyncFailingPage() {
+  resource.read();
+  return <div>Loaded page</div>;
+}
+
+export default function ErrorBoundaryAsyncDemo() {
+  return (
+    <ScreenshotArea gutters={false}>
+      <I18nProvider messages={[messages]} locale="en">
+        <ErrorBoundariesProvider value={{ feedbackLink: '/#' }}>
+          {/* AppLayout remains synchronous */}
+          <AppLayout
+            navigationHide={true}
+            toolsHide={true}
+            content={
+              <Suspense fallback={<Fallback />}>
+                <AsyncFailingPage />
+              </Suspense>
+            }
+          />
+        </ErrorBoundariesProvider>
+      </I18nProvider>
+    </ScreenshotArea>
+  );
+}
+
+function Fallback() {
+  return (
+    <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+      <Spinner size="large" />
+    </div>
+  );
+}
diff --git a/pages/error-boundary/demo-components.page.tsx b/pages/error-boundary/demo-components.page.tsx
new file mode 100644
index 0000000000..f3b4461861
--- /dev/null
+++ b/pages/error-boundary/demo-components.page.tsx
@@ -0,0 +1,147 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useContext, useState } from 'react';
+
+import {
+  AppLayout,
+  Box,
+  Button,
+  Checkbox,
+  Container,
+  Drawer,
+  ExpandableSection,
+  Header,
+  Link,
+  Modal,
+  Popover,
+  SpaceBetween,
+  SplitPanel,
+  Table,
+} from '~components';
+import { ErrorBoundariesProvider } from '~components/error-boundary/context';
+import I18nProvider from '~components/i18n';
+import messages from '~components/i18n/messages/all.en';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import ScreenshotArea from '../utils/screenshot-area';
+
+type PageContext = React.Context<AppContextType<{ errorBoundariesActive: boolean }>>;
+
+export default function () {
+  const {
+    urlParams: { errorBoundariesActive = true },
+    setUrlParams,
+  } = useContext(AppContext as PageContext);
+  const [splitPanelOpen, setSplitPanelOpen] = useState(true);
+  const [activeDrawerId, setActiveDrawerId] = useState<null | string>('d1');
+  const [modalOpen, setModalOpen] = useState(false);
+  return (
+    <ScreenshotArea gutters={false}>
+      <I18nProvider messages={[messages]} locale="en">
+        <ErrorBoundariesProvider active={errorBoundariesActive} value={{ feedbackLink: '/#' }}>
+          <AppLayout
+            navigationHide={true}
+            activeDrawerId={activeDrawerId}
+            onDrawerChange={({ detail }) => setActiveDrawerId(detail.activeDrawerId)}
+            splitPanel={
+              <SplitPanel header="Split panel">
+                <BrokenButton />
+              </SplitPanel>
+            }
+            splitPanelOpen={splitPanelOpen}
+            onSplitPanelToggle={({ detail }) => setSplitPanelOpen(detail.open)}
+            drawers={[
+              {
+                id: 'd1',
+                content: (
+                  <Drawer header={<Header variant="h2">Drawer 1</Header>}>
+                    <BrokenButton />
+                  </Drawer>
+                ),
+                trigger: { iconName: 'bug' },
+                ariaLabels: { drawerName: 'Drawer 1', triggerButton: 'Open drawer 1', closeButton: 'Close drawer 1' },
+              },
+              {
+                id: 'd2',
+                content: (
+                  <Drawer header={<Header variant="h2">Drawer 2</Header>}>
+                    <BrokenButton />
+                  </Drawer>
+                ),
+                trigger: { iconName: 'call' },
+                ariaLabels: { drawerName: 'Drawer 2', triggerButton: 'Open drawer 2', closeButton: 'Close drawer 2' },
+              },
+            ]}
+            content={
+              <Box>
+                <h1>Error boundary demo: components</h1>
+                <Box margin={{ bottom: 'm' }}>
+                  <Checkbox
+                    checked={errorBoundariesActive}
+                    onChange={({ detail }) => setUrlParams({ errorBoundariesActive: detail.checked })}
+                  >
+                    Error boundaries on
+                  </Checkbox>
+                </Box>
+
+                <SpaceBetween size="m">
+                  <SpaceBetween size="m" direction="horizontal">
+                    <BrokenButton />
+
+                    <Box>
+                      <Button onClick={() => setModalOpen(true)}>Show modal</Button>
+                      <Modal visible={modalOpen} header="Modal" onDismiss={() => setModalOpen(false)}>
+                        <BrokenButton />
+                      </Modal>
+                    </Box>
+
+                    <Popover header="Header" content={<BrokenButton />} triggerType="custom">
+                      <Button>Show popover</Button>
+                    </Popover>
+                  </SpaceBetween>
+
+                  <Container header={<Header>Container 1</Header>}>
+                    <BrokenButton />
+                  </Container>
+
+                  <Container header={<Header>Container 2</Header>}>
+                    <BrokenButton />
+                  </Container>
+
+                  <ExpandableSection
+                    variant="container"
+                    headerText="Expandable section"
+                    headerActions={<BrokenButton />}
+                    defaultExpanded={true}
+                  >
+                    <BrokenButton />
+                  </ExpandableSection>
+
+                  <Table
+                    header={<Header>Table</Header>}
+                    columnDefinitions={[
+                      {
+                        header: 'Column 1',
+                        cell: item => <Link href="/#/light/error-boundary/demo-async-load">{item}</Link>,
+                      },
+                      { header: 'Column 2', cell: item => `Content 2:${item}` },
+                      { header: 'Column 3', cell: item => `Content 3:${item}` },
+                      { header: 'Actions', cell: () => <BrokenButton /> },
+                    ]}
+                    items={[1, 2, 3]}
+                  ></Table>
+                </SpaceBetween>
+              </Box>
+            }
+          />
+        </ErrorBoundariesProvider>
+      </I18nProvider>
+    </ScreenshotArea>
+  );
+}
+
+function BrokenButton() {
+  const [errorState, setErrorState] = useState(false);
+  return <Button onClick={() => setErrorState(true)}>Broken button {errorState ? {} : ''}</Button>;
+}
diff --git a/pages/error-boundary/demo-form.page.tsx b/pages/error-boundary/demo-form.page.tsx
new file mode 100644
index 0000000000..3f2e23921f
--- /dev/null
+++ b/pages/error-boundary/demo-form.page.tsx
@@ -0,0 +1,66 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { AppLayout, Box, Button, Container, ExpandableSection, Form, Header, Popover, SpaceBetween } from '~components';
+import { ErrorBoundariesProvider } from '~components/error-boundary/context';
+import I18nProvider from '~components/i18n';
+import messages from '~components/i18n/messages/all.en';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+export default function () {
+  return (
+    <ScreenshotArea gutters={false}>
+      <I18nProvider messages={[messages]} locale="en">
+        <ErrorBoundariesProvider value={{ feedbackLink: '/#' }}>
+          <AppLayout
+            contentType="form"
+            navigationHide={true}
+            content={
+              <Box>
+                <h1>Error boundary demo: form</h1>
+                <p>When an unexpected error occurs inside a form, it is no longer scoped to sections.</p>
+
+                <Form
+                  actions={
+                    <SpaceBetween direction="horizontal" size="m">
+                      <BrokenButton />
+                    </SpaceBetween>
+                  }
+                >
+                  <SpaceBetween size="m">
+                    <Container header={<Header>Container 1</Header>}>
+                      <BrokenButton />
+                    </Container>
+
+                    <Container header={<Header>Container 2</Header>}>
+                      <Popover header="Header" content={<BrokenButton />} triggerType="custom">
+                        <Button>Show popover</Button>
+                      </Popover>
+                    </Container>
+
+                    <ExpandableSection
+                      variant="container"
+                      headerText="Expandable section"
+                      headerActions={<BrokenButton />}
+                      defaultExpanded={true}
+                    >
+                      <BrokenButton />
+                    </ExpandableSection>
+                  </SpaceBetween>
+                </Form>
+              </Box>
+            }
+          />
+        </ErrorBoundariesProvider>
+      </I18nProvider>
+    </ScreenshotArea>
+  );
+}
+
+function BrokenButton() {
+  const [errorState, setErrorState] = useState(false);
+  return <Button onClick={() => setErrorState(true)}>Broken button {errorState ? {} : ''}</Button>;
+}
diff --git a/src/app-layout/error-boundary.tsx b/src/app-layout/error-boundary.tsx
new file mode 100644
index 0000000000..f3879eeb0b
--- /dev/null
+++ b/src/app-layout/error-boundary.tsx
@@ -0,0 +1,16 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import InternalErrorBoundary from '../error-boundary/internal';
+
+import styles from './styles.css.js';
+
+export function ErrorBoundaryMain({ children }: { children: React.ReactNode }) {
+  return (
+    <InternalErrorBoundary wrapper={content => <div className={styles['error-boundary-wrapper']}>{content}</div>}>
+      {children}
+    </InternalErrorBoundary>
+  );
+}
diff --git a/src/app-layout/styles.scss b/src/app-layout/styles.scss
index c39b1e1cc8..2464a2ab8c 100644
--- a/src/app-layout/styles.scss
+++ b/src/app-layout/styles.scss
@@ -35,6 +35,7 @@
   min-inline-size: 0;
   background-color: awsui.$color-background-layout-main;
   position: relative;
+
   &-scrollable {
     overflow: auto;
   }
@@ -68,3 +69,10 @@
   // applied to content or content header, whatever comes first
   padding-block-start: awsui.$space-scaled-m;
 }
+
+.error-boundary-wrapper {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx
index 6374977d38..7e7bcf2ddf 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx
@@ -128,6 +128,7 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutD
               />
             </div>
             <div
+              key={TOOLS_DRAWER_ID}
               className={clsx(
                 styles['drawer-content'],
                 activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']
@@ -137,7 +138,7 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutD
               {toolsContent}
             </div>
             {activeDrawerId !== TOOLS_DRAWER_ID && (
-              <div className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>
+              <div key={activeDrawerId} className={styles['drawer-content']} style={{ blockSize: drawerHeight }}>
                 {activeDrawer?.content}
               </div>
             )}
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
index 7df2e99b24..01c3d79bb5 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
@@ -8,6 +8,7 @@ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-tool
 import { GeneratedAnalyticsMetadataAppLayoutToolbarComponent } from '../../../app-layout-toolbar/analytics-metadata/interfaces';
 import VisualContext from '../../../internal/components/visual-context';
 import customCssProps from '../../../internal/generated/custom-css-properties';
+import { ErrorBoundaryMain } from '../../error-boundary';
 import { AppLayoutInternalProps, AppLayoutPendingState } from '../interfaces';
 import {
   AppLayoutAfterMainSlot,
@@ -86,7 +87,7 @@ export const SkeletonLayout = ({
             {contentHeader && <div {...contentHeaderElAttributes}>{contentHeader}</div>}
             {/*delay rendering the content until registration of this instance is complete*/}
             <div {...contentElAttributes} className={contentElAttributes?.className ?? testutilStyles.content}>
-              {registered ? content : null}
+              {registered ? <ErrorBoundaryMain>{content}</ErrorBoundaryMain> : null}
             </div>
           </div>
           <AppLayoutBottomContentSlot {...mergedProps} />
diff --git a/src/app-layout/visual-refresh/drawers.tsx b/src/app-layout/visual-refresh/drawers.tsx
index e9acb21623..c4ed58e5bd 100644
--- a/src/app-layout/visual-refresh/drawers.tsx
+++ b/src/app-layout/visual-refresh/drawers.tsx
@@ -143,6 +143,7 @@ function ActiveDrawer() {
         </div>
         {toolsContent && (
           <div
+            key={TOOLS_DRAWER_ID}
             className={clsx(
               styles['drawer-content'],
               activeDrawerId !== TOOLS_DRAWER_ID && styles['drawer-content-hidden']
@@ -152,7 +153,9 @@ function ActiveDrawer() {
           </div>
         )}
         {activeDrawerId !== TOOLS_DRAWER_ID && (
-          <div className={styles['drawer-content']}>{activeDrawerId && activeDrawer?.content}</div>
+          <div key={activeDrawerId} className={styles['drawer-content']}>
+            {activeDrawerId && activeDrawer?.content}
+          </div>
         )}
       </div>
     </aside>
diff --git a/src/app-layout/visual-refresh/main.tsx b/src/app-layout/visual-refresh/main.tsx
index 56ca4361fd..af3a560b74 100644
--- a/src/app-layout/visual-refresh/main.tsx
+++ b/src/app-layout/visual-refresh/main.tsx
@@ -5,6 +5,7 @@ import clsx from 'clsx';
 
 import customCssProps from '../../internal/generated/custom-css-properties';
 import * as tokens from '../../internal/generated/styles/tokens';
+import { ErrorBoundaryMain } from '../error-boundary';
 import { getStickyOffsetVars } from '../utils/sticky-offsets';
 import { useAppLayoutInternals } from './context';
 
@@ -63,7 +64,7 @@ export default function Main() {
         ),
       }}
     >
-      {content}
+      <ErrorBoundaryMain>{content}</ErrorBoundaryMain>
     </div>
   );
 }
diff --git a/src/container/internal.tsx b/src/container/internal.tsx
index 32ce40117c..c222809835 100644
--- a/src/container/internal.tsx
+++ b/src/container/internal.tsx
@@ -1,11 +1,14 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 
 import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
+import InternalBox from '../box/internal';
+import InternalErrorBoundary from '../error-boundary/internal';
 import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 import { getBaseProps } from '../internal/base-component';
 import { ContainerHeaderContextProvider } from '../internal/context/container-header';
@@ -145,60 +148,68 @@ export default function InternalContainer({
         ref={__subStepRef}
         className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}
       >
-        {header && (
-          <ContainerHeaderContextProvider>
-            <StickyHeaderContext.Provider value={{ isStuck, isStuckAtBottom }}>
-              <div
-                className={clsx(
-                  isRefresh && styles.refresh,
-                  styles.header,
-                  analyticsSelectors.header,
-                  styles[`header-variant-${variant}`],
-                  {
-                    [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
-                    [styles['header-sticky-enabled']]: isSticky,
-                    [styles['header-dynamic-height']]: hasDynamicHeight,
-                    [styles['header-stuck']]: isStuck,
-                    [styles['with-paddings']]: !disableHeaderPaddings,
-                    [styles['with-hidden-content']]: !children || __hiddenContent,
-                    [styles['header-with-media']]: hasMedia,
-                    [styles['header-full-page']]: __fullPage && isRefresh,
-                  }
+        <InternalErrorBoundary wrapper={content => <InternalBox padding="m">{content}</InternalBox>}>
+          {header && (
+            <ContainerHeaderContextProvider>
+              <StickyHeaderContext.Provider value={{ isStuck, isStuckAtBottom }}>
+                <div
+                  className={clsx(
+                    isRefresh && styles.refresh,
+                    styles.header,
+                    analyticsSelectors.header,
+                    styles[`header-variant-${variant}`],
+                    {
+                      [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
+                      [styles['header-sticky-enabled']]: isSticky,
+                      [styles['header-dynamic-height']]: hasDynamicHeight,
+                      [styles['header-stuck']]: isStuck,
+                      [styles['with-paddings']]: !disableHeaderPaddings,
+                      [styles['with-hidden-content']]: !children || __hiddenContent,
+                      [styles['header-with-media']]: hasMedia,
+                      [styles['header-full-page']]: __fullPage && isRefresh,
+                    }
+                  )}
+                  ref={headerMergedRef}
+                  style={{
+                    ...stickyStyles.style,
+                    ...getHeaderStyles(style),
+                  }}
+                >
+                  {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}
+                  {header}
+                </div>
+              </StickyHeaderContext.Provider>
+            </ContainerHeaderContextProvider>
+          )}
+          <div className={clsx(styles.content, fitHeight && styles['content-fit-height'])}>
+            <div
+              className={clsx(styles['content-inner'], testStyles['content-inner'], {
+                [styles['with-paddings']]: !disableContentPaddings,
+                [styles['with-header']]: !!header,
+              })}
+              style={getContentStyles(style)}
+            >
+              <InternalErrorBoundary
+                wrapper={content => (
+                  <InternalBox padding={disableContentPaddings ? 'm' : undefined}>{content}</InternalBox>
                 )}
-                ref={headerMergedRef}
-                style={{
-                  ...stickyStyles.style,
-                  ...getHeaderStyles(style),
-                }}
               >
-                {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}
-                {header}
-              </div>
-            </StickyHeaderContext.Provider>
-          </ContainerHeaderContextProvider>
-        )}
-        <div className={clsx(styles.content, fitHeight && styles['content-fit-height'])}>
-          <div
-            className={clsx(styles['content-inner'], testStyles['content-inner'], {
-              [styles['with-paddings']]: !disableContentPaddings,
-              [styles['with-header']]: !!header,
-            })}
-            style={getContentStyles(style)}
-          >
-            {children}
-          </div>
-        </div>
-        {footer && (
-          <div
-            className={clsx(styles.footer, {
-              [styles['with-divider']]: !__disableFooterDivider,
-              [styles['with-paddings']]: !disableFooterPaddings,
-            })}
-            style={getFooterStyles(style)}
-          >
-            {footer}
+                {children}
+              </InternalErrorBoundary>
+            </div>
           </div>
-        )}
+          {footer && (
+            <div
+              className={clsx(styles.footer, {
+                [styles['with-divider']]: !__disableFooterDivider,
+                [styles['with-paddings']]: !disableFooterPaddings,
+              })}
+              style={getFooterStyles(style)}
+            >
+              {footer}
+            </div>
+          )}
+        </InternalErrorBoundary>
       </div>
     </div>
   );
diff --git a/src/drawer/implementation.tsx b/src/drawer/implementation.tsx
index a27ba5abad..df3bd97d21 100644
--- a/src/drawer/implementation.tsx
+++ b/src/drawer/implementation.tsx
@@ -5,6 +5,7 @@ import clsx from 'clsx';
 
 import { useRuntimeDrawerContext } from '../app-layout/runtime-drawer/use-runtime-drawer-context';
 import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
+import InternalErrorBoundary from '../error-boundary/internal';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
@@ -36,7 +37,7 @@ export function DrawerImplementation({
   };
 
   const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: __internalRootRef as RefObject<HTMLElement> });
-  const hasAdditioalDrawerAction = !!runtimeDrawerContext?.isExpandable;
+  const hasAdditionalDrawerAction = !!runtimeDrawerContext?.isExpandable;
 
   return loading ? (
     <div
@@ -57,7 +58,7 @@ export function DrawerImplementation({
           className={clsx(
             styles.header,
             runtimeDrawerContext && styles['with-runtime-context'],
-            hasAdditioalDrawerAction && styles['with-additional-action']
+            hasAdditionalDrawerAction && styles['with-additional-action']
           )}
         >
           {header}
@@ -70,7 +71,7 @@ export function DrawerImplementation({
           !disableContentPaddings && styles['content-with-paddings']
         )}
       >
-        {children}
+        <InternalErrorBoundary>{children}</InternalErrorBoundary>
       </div>
     </div>
   );
diff --git a/src/error-boundary/context.tsx b/src/error-boundary/context.tsx
new file mode 100644
index 0000000000..b3ebc3247a
--- /dev/null
+++ b/src/error-boundary/context.tsx
@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { createContext } from 'react';
+
+import { ErrorBoundaryProps } from './interfaces';
+
+interface ErrorBoundariesContextValue {
+  customMessage?: ErrorBoundaryProps.CustomMessage;
+  feedbackLink?: string;
+  i18nStrings?: ErrorBoundaryProps.I18nStrings;
+}
+
+export const ErrorBoundariesContext = createContext<ErrorBoundariesContextValue & { errorBoundariesActive: boolean }>({
+  errorBoundariesActive: false,
+});
+
+export function ErrorBoundariesProvider({
+  children,
+  active = true,
+  value,
+}: {
+  children: React.ReactNode;
+  active?: boolean;
+  value?: ErrorBoundariesContextValue;
+}) {
+  return (
+    <ErrorBoundariesContext.Provider value={{ ...value, errorBoundariesActive: active }}>
+      {children}
+    </ErrorBoundariesContext.Provider>
+  );
+}
diff --git a/src/error-boundary/index.tsx b/src/error-boundary/index.tsx
new file mode 100644
index 0000000000..1201f3a998
--- /dev/null
+++ b/src/error-boundary/index.tsx
@@ -0,0 +1,14 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+'use client';
+import React from 'react';
+
+import { ErrorBoundaryProps } from './interfaces';
+import InternalErrorBoundary from './internal';
+
+export { ErrorBoundaryProps };
+
+export default function ErrorBoundary(props: ErrorBoundaryProps) {
+  return <InternalErrorBoundary {...props} />;
+}
diff --git a/src/error-boundary/interfaces.ts b/src/error-boundary/interfaces.ts
new file mode 100644
index 0000000000..0d8327f4cc
--- /dev/null
+++ b/src/error-boundary/interfaces.ts
@@ -0,0 +1,30 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+export interface ErrorBoundaryProps {
+  children: React.ReactNode;
+
+  wrapper?: (content: React.ReactNode) => React.ReactNode;
+
+  customMessage?: ErrorBoundaryProps.CustomMessage;
+
+  feedbackLink?: string;
+
+  i18nStrings?: ErrorBoundaryProps.I18nStrings;
+}
+
+export namespace ErrorBoundaryProps {
+  export interface CustomMessage {
+    image?: React.ReactNode;
+    header?: React.ReactNode;
+    description?: React.ReactNode;
+    feedback?: React.ReactNode;
+  }
+
+  export interface I18nStrings {
+    imageAltText?: string;
+    messageHeader?: string;
+    messageDescription?: string;
+    messageFeedback?: string;
+  }
+}
diff --git a/src/error-boundary/internal.tsx b/src/error-boundary/internal.tsx
new file mode 100644
index 0000000000..11c273e757
--- /dev/null
+++ b/src/error-boundary/internal.tsx
@@ -0,0 +1,199 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { Component, useContext } from 'react';
+
+import InternalBox from '../box/internal';
+import InternalButton from '../button/internal';
+import { useInternalI18n } from '../i18n/context';
+import InternalLink from '../link/internal';
+import InternalSpaceBetween from '../space-between/internal';
+import { ErrorBoundariesContext } from './context';
+import { ErrorBoundaryProps } from './interfaces';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+export default function InternalErrorBoundary({ children, ...props }: ErrorBoundaryProps) {
+  const { errorBoundariesActive, ...context } = useContext(ErrorBoundariesContext);
+  return errorBoundariesActive ? (
+    <ErrorBoundaryImpl {...props} {...context}>
+      {children}
+    </ErrorBoundaryImpl>
+  ) : (
+    <>{children}</>
+  );
+}
+
+class ErrorBoundaryImpl extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ErrorBoundaryFallback {...this.props} />;
+    }
+    return this.props.children;
+  }
+}
+
+function ErrorBoundaryFallback(props: ErrorBoundaryProps) {
+  const image = props.customMessage?.image ?? <DefaultImage />;
+
+  const defaultHeaderContent = useDefaultHeaderContent(props);
+  const header = props.customMessage?.header ?? <InternalBox variant="h3">{defaultHeaderContent}</InternalBox>;
+
+  const defaultDescriptionContent = useDefaultDescriptionContent(props);
+  const description = props.customMessage?.description ?? <InternalBox>{defaultDescriptionContent}</InternalBox>;
+
+  const defaultFeedbackContent = useDefaultFeedbackContent(props);
+  const feedback =
+    props.customMessage?.feedback ?? (props.feedbackLink ? <InternalBox>{defaultFeedbackContent}</InternalBox> : null);
+
+  const content = (
+    <InternalSpaceBetween size="xxs">
+      <>{image}</>
+      <>{header}</>
+      <>{description}</>
+      <>{feedback}</>
+    </InternalSpaceBetween>
+  );
+
+  return <>{props.wrapper?.(content) ?? content}</>;
+}
+
+function DefaultImage() {
+  return (
+    <svg focusable={false} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="124" height="79" fill="none">
+      <path
+        d="M9.414 5a4 4 0 0 1 4-4h96.859a4 4 0 0 1 4 4v65.56H9.414V5Z"
+        fill="#F0FBFF"
+        stroke="#0F141A"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M1 71.438a1 1 0 0 1 1-1h119.688a1 1 0 0 1 1 1V73a5 5 0 0 1-5 5H6a5 5 0 0 1-5-5v-1.563Z"
+        fill="#F3F3F7"
+        stroke="#0F141A"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M53.25 71.01c0-.316.257-.573.573-.573h16.73c.316 0 .572.257.572.573a2.865 2.865 0 0 1-2.865 2.865H56.115a2.865 2.865 0 0 1-2.865-2.865ZM79 28.75H52M79 36.75H52M79 44.75H52"
+        stroke="#0F141A"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M104.999 53.56c9.701 0 17.559-7.867 17.559-17.56 0-9.694-7.866-17.561-17.559-17.561-9.693 0-17.56 7.867-17.56 17.56 0 9.694 7.867 17.562 17.56 17.562Z"
+        fill="#DB0000"
+        stroke="#0F141A"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="m107.83 36 4.285-4.203-2.777-2.832-4.34 4.257-4.34-4.257-2.778 2.832L102.166 36l-4.286 4.203 2.777 2.832 4.341-4.258 4.34 4.258 2.778-2.832L107.83 36Z"
+        fill="#fff"
+        stroke="#0F141A"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <circle cx="46.5" cy="28.5" r="1.5" fill="#0F141A" />
+      <circle cx="46.5" cy="36.5" r="1.5" fill="#0F141A" />
+      <circle cx="46.5" cy="44.5" r="1.5" fill="#0F141A" />
+    </svg>
+  );
+}
+
+function useDefaultHeaderContent({ i18nStrings }: ErrorBoundaryProps) {
+  const i18n = useInternalI18n('error-boundary');
+  return i18n('i18nStrings.messageHeader', i18nStrings?.messageHeader ?? 'There was an unexpected issue');
+}
+
+function useDefaultDescriptionContent({ feedbackLink, i18nStrings }: ErrorBoundaryProps) {
+  const i18n = useInternalI18n('error-boundary');
+  const parsed = parseBracketLinks(
+    i18n(
+      'i18nStrings.messageDescription',
+      i18nStrings?.messageDescription ?? 'An unexpected issue led to a crash. [Refresh](refresh) the page to try again.'
+    )
+  );
+  return <MessageWithLinks parsed={parsed} feedbackLink={feedbackLink} />;
+}
+
+function useDefaultFeedbackContent({ feedbackLink, i18nStrings }: ErrorBoundaryProps) {
+  const i18n = useInternalI18n('error-boundary');
+  if (!feedbackLink) {
+    return null;
+  }
+  const parsed = parseBracketLinks(
+    i18n(
+      'i18nStrings.messageFeedback',
+      i18nStrings?.messageFeedback ?? 'If the issue persists, please provide us feedback [here](feedback).'
+    )
+  );
+  return <MessageWithLinks parsed={parsed} feedbackLink={feedbackLink} />;
+}
+
+type ParsedMessage = { type: 'text'; text: string } | { type: 'link'; text: string; value: string };
+
+function MessageWithLinks({ parsed, feedbackLink }: { parsed: ParsedMessage[]; feedbackLink?: string }) {
+  return (
+    <>
+      {parsed.map((chunk, index) => {
+        if (chunk.type === 'link' && chunk.value === 'refresh') {
+          return (
+            <InternalButton key={index} variant="inline-link" onClick={() => window.location.reload()}>
+              {chunk.text}
+            </InternalButton>
+          );
+        } else if (chunk.type === 'link' && chunk.value === 'feedback' && feedbackLink) {
+          return (
+            <InternalLink key={index} href={feedbackLink}>
+              {chunk.text}
+            </InternalLink>
+          );
+        } else if (chunk.type === 'link' && chunk.value) {
+          return (
+            <InternalLink key={index} href={chunk.value}>
+              {chunk.text}
+            </InternalLink>
+          );
+        } else {
+          return (
+            <InternalBox key={index} variant="span">
+              {chunk.text}
+            </InternalBox>
+          );
+        }
+      })}
+    </>
+  );
+}
+
+function parseBracketLinks(input: string) {
+  const chunks: ParsedMessage[] = [];
+  const regex = /\[([^\]]+)\]\(([^)]+)\)/g; // [text](value)
+  let last = 0;
+  let match;
+
+  while ((match = regex.exec(input)) !== null) {
+    // Text before the link.
+    if (match.index > last) {
+      chunks.push({ type: 'text', text: input.slice(last, match.index) });
+    }
+    // Link chunk.
+    chunks.push({ type: 'link', text: match[1], value: match[2] });
+    last = regex.lastIndex;
+  }
+  // Text after the link.
+  if (last < input.length) {
+    chunks.push({ type: 'text', text: input.slice(last) });
+  }
+  return chunks;
+}
diff --git a/src/form/internal.tsx b/src/form/internal.tsx
index c48f2c723e..e52566eeaa 100644
--- a/src/form/internal.tsx
+++ b/src/form/internal.tsx
@@ -7,6 +7,7 @@ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-tool
 
 import InternalAlert from '../alert/internal';
 import InternalBox from '../box/internal';
+import { ErrorBoundariesProvider } from '../error-boundary/context';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
@@ -48,36 +49,38 @@ export default function InternalForm({
   };
 
   return (
-    <div
-      {...baseProps}
-      ref={__internalRootRef}
-      className={clsx(styles.root, baseProps.className)}
-      {...(__injectAnalyticsComponentMetadata ? getAnalyticsMetadataAttribute(analyticsComponentMetadata) : {})}
-    >
-      {header && <div className={clsx(styles.header, analyticsSelectors.header)}>{header}</div>}
-      {children && <div className={styles.content}>{children}</div>}
-      {errorText && (
-        <InternalBox margin={{ top: 'l' }}>
-          <InternalAlert type="error" statusIconAriaLabel={errorIconAriaLabel}>
-            <div className={styles.error} id={__errorSlotId}>
-              {errorText}
+    <ErrorBoundariesProvider active={false}>
+      <div
+        {...baseProps}
+        ref={__internalRootRef}
+        className={clsx(styles.root, baseProps.className)}
+        {...(__injectAnalyticsComponentMetadata ? getAnalyticsMetadataAttribute(analyticsComponentMetadata) : {})}
+      >
+        {header && <div className={clsx(styles.header, analyticsSelectors.header)}>{header}</div>}
+        {children && <div className={styles.content}>{children}</div>}
+        {errorText && (
+          <InternalBox margin={{ top: 'l' }}>
+            <InternalAlert type="error" statusIconAriaLabel={errorIconAriaLabel}>
+              <div className={styles.error} id={__errorSlotId}>
+                {errorText}
+              </div>
+            </InternalAlert>
+          </InternalBox>
+        )}
+        {(actions || secondaryActions) && (
+          <div className={styles.footer}>
+            <div className={styles['actions-section']}>
+              {actions && <div className={styles.actions}>{actions}</div>}
+              {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}
             </div>
-          </InternalAlert>
-        </InternalBox>
-      )}
-      {(actions || secondaryActions) && (
-        <div className={styles.footer}>
-          <div className={styles['actions-section']}>
-            {actions && <div className={styles.actions}>{actions}</div>}
-            {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}
           </div>
-        </div>
-      )}
-      {errorText && (
-        <InternalLiveRegion hidden={true} tagName="span" assertive={true}>
-          {errorIconAriaLabel}, {errorText}
-        </InternalLiveRegion>
-      )}
-    </div>
+        )}
+        {errorText && (
+          <InternalLiveRegion hidden={true} tagName="span" assertive={true}>
+            {errorIconAriaLabel}, {errorText}
+          </InternalLiveRegion>
+        )}
+      </div>
+    </ErrorBoundariesProvider>
   );
 }
diff --git a/src/i18n/messages-types.ts b/src/i18n/messages-types.ts
index 4a837ad86e..f16006e62f 100644
--- a/src/i18n/messages-types.ts
+++ b/src/i18n/messages-types.ts
@@ -4,6 +4,12 @@
 
 /** Auto-generated argument types based on "en" i18n strings. Do not edit manually. */
 export interface I18nFormatArgTypes {
+  "error-boundary": {
+    "i18nStrings.imageAltText"?: never;
+    "i18nStrings.messageHeader"?: never;
+    "i18nStrings.messageDescription"?: never;
+    "i18nStrings.messageFeedback"?: never;
+  },
   "[charts]": {
     "loadingText": never;
     "errorText": never;
diff --git a/src/i18n/messages/all.en.json b/src/i18n/messages/all.en.json
index bfb588f6b7..6554e11b03 100644
--- a/src/i18n/messages/all.en.json
+++ b/src/i18n/messages/all.en.json
@@ -1,4 +1,10 @@
 {
+  "error-boundary": {
+    "i18nStrings.imageAltText": "Application error",
+    "i18nStrings.messageHeader": "There was an unexpected issue",
+    "i18nStrings.messageDescription": "An unexpected issue led to a crash. [Refresh](refresh) the page to try again.",
+    "i18nStrings.messageFeedback": "If the issue persists, please provide us feedback [here](feedback)."
+  },
   "[charts]": {
     "loadingText": "Loading chart",
     "errorText": "The data couldn't be fetched. Try again later.",
@@ -454,4 +460,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Loading next step",
     "i18nStrings.submitButtonLoadingAnnouncement": "Submitting form"
   }
-}
\ No newline at end of file
+}
diff --git a/src/modal/internal.tsx b/src/modal/internal.tsx
index 16a04ed58d..203a152a91 100644
--- a/src/modal/internal.tsx
+++ b/src/modal/internal.tsx
@@ -7,7 +7,9 @@ import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { Portal, useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
+import InternalBox from '../box/internal';
 import { InternalButton } from '../button/internal';
+import InternalErrorBoundary from '../error-boundary/internal';
 import InternalHeader from '../header/internal';
 import { useInternalI18n } from '../i18n/context';
 import { PerformanceMetrics } from '../internal/analytics';
@@ -283,21 +285,25 @@ function PortaledModal({
                       </span>
                     </InternalHeader>
                   </div>
-                  <div
-                    ref={__subStepRef}
-                    {...__subStepFunnelProps}
-                    className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}
+                  <InternalErrorBoundary
+                    wrapper={content => <InternalBox padding={{ bottom: 'm', horizontal: 'l' }}>{content}</InternalBox>}
                   >
-                    {children}
-                    <div ref={stickySentinelRef} />
-                  </div>
-                  {footer && (
-                    <ButtonContext.Provider value={{ onClick: onButtonClick }}>
-                      <div ref={footerRef} className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>
-                        {footer}
-                      </div>
-                    </ButtonContext.Provider>
-                  )}
+                    <div
+                      ref={__subStepRef}
+                      {...__subStepFunnelProps}
+                      className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}
+                    >
+                      {children}
+                      <div ref={stickySentinelRef} />
+                    </div>
+                    {footer && (
+                      <ButtonContext.Provider value={{ onClick: onButtonClick }}>
+                        <div ref={footerRef} className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>
+                          {footer}
+                        </div>
+                      </ButtonContext.Provider>
+                    )}
+                  </InternalErrorBoundary>
                 </div>
               </div>
             </FocusLock>
diff --git a/src/popover/body.tsx b/src/popover/body.tsx
index ee5ba52b7c..417b07b833 100644
--- a/src/popover/body.tsx
+++ b/src/popover/body.tsx
@@ -8,6 +8,7 @@ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-tool
 
 import { ButtonProps } from '../button/interfaces';
 import { InternalButton } from '../button/internal';
+import InternalErrorBoundary from '../error-boundary/internal';
 import { useInternalI18n } from '../i18n/context';
 import FocusLock from '../internal/components/focus-lock';
 import { KeyCode } from '../internal/keycode';
@@ -102,22 +103,24 @@ export default function PopoverBody({
       onKeyDown={onKeyDown}
       {...dialogProps}
     >
-      <FocusLock disabled={!shouldTrapFocus} autoFocus={false}>
-        {header && (
-          <div className={clsx(styles['header-row'], showDismissButton && styles['has-dismiss'])}>
-            {dismissButton}
-            <div className={styles.header} id={labelledById}>
-              <h2>{header}</h2>
+      <InternalErrorBoundary>
+        <FocusLock disabled={!shouldTrapFocus} autoFocus={false}>
+          {header && (
+            <div className={clsx(styles['header-row'], showDismissButton && styles['has-dismiss'])}>
+              {dismissButton}
+              <div className={styles.header} id={labelledById}>
+                <h2>{header}</h2>
+              </div>
+            </div>
+          )}
+          <div className={!header && showDismissButton ? styles['has-dismiss'] : undefined}>
+            {!header && dismissButton}
+            <div className={clsx(styles.content, { [styles['content-overflow-visible']]: !!overflowVisible })}>
+              {children}
             </div>
           </div>
-        )}
-        <div className={!header && showDismissButton ? styles['has-dismiss'] : undefined}>
-          {!header && dismissButton}
-          <div className={clsx(styles.content, { [styles['content-overflow-visible']]: !!overflowVisible })}>
-            {children}
-          </div>
-        </div>
-      </FocusLock>
+        </FocusLock>
+      </InternalErrorBoundary>
     </div>
   );
 }
diff --git a/src/split-panel/implementation.tsx b/src/split-panel/implementation.tsx
index 5a833dd6b2..352ee03528 100644
--- a/src/split-panel/implementation.tsx
+++ b/src/split-panel/implementation.tsx
@@ -10,6 +10,7 @@ import { SizeControlProps } from '../app-layout/utils/interfaces';
 import { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';
 import { usePointerEvents } from '../app-layout/utils/use-pointer-events';
 import { InternalButton } from '../button/internal';
+import InternalErrorBoundary from '../error-boundary/internal';
 import { getBaseProps } from '../internal/base-component';
 import PanelResizeHandle from '../internal/components/panel-resize-handle';
 import { useSplitPanelContext } from '../internal/context/split-panel-context';
@@ -260,7 +261,7 @@ export function SplitPanelImplementation({
           ariaLabel={ariaLabel}
           closeBehavior={closeBehavior}
         >
-          {children}
+          <InternalErrorBoundary>{children}</InternalErrorBoundary>
         </SplitPanelContentSide>
       )}
 
@@ -280,7 +281,7 @@ export function SplitPanelImplementation({
           closeBehavior={closeBehavior}
           hasCustomElements={hasCustomElements}
         >
-          {children}
+          <InternalErrorBoundary>{children}</InternalErrorBoundary>
         </SplitPanelContentBottom>
       )}
       {isPreferencesOpen && (