From 8a382b5eaa7474a7a1c913d266fc0c65de423501 Mon Sep 17 00:00:00 2001
From: Owncast <owncast@owncast.online>
Date: Mon, 13 Mar 2023 07:06:39 +0000
Subject: [PATCH] Commit updated Storybook stories

---
 .../WebComponents.stories.mdx                 | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx b/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx
index beeb45a1d..0dcea6d8b 100644
--- a/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx
@@ -68,6 +68,33 @@ But why _this_ style?
 
 See the discussion on the PR that introduced this pattern: [#2082](https://github.com/owncast/owncast/pull/2082).
 
+## Error Boundaries
+
+Components that have substantial state and internal functionality should be wrapped in an [Error Boundary](https://reactjs.org/docs/error-boundaries.html). This allows for catching unexpected errors and displaying a fallback UI.
+
+Components that are stateless views are unlikely to throw exceptions and don't require an error boundary.
+
+The `ComponentError` component is a pre-built error state that can be used to display an error message and a bug reporting button.
+
+### Example
+
+```tsx
+import { ErrorBoundary } from 'react-error-boundary';
+
+<ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={({ error: e, resetErrorBoundary }) => (
+        <ComponentError
+          componentName="BrowserNotifyModal"
+          message={e.message}
+          retryFunction={resetErrorBoundary}
+        />
+      )}
+    >
+		<YourFunctionality/>
+</ErrorBoundary
+```
+
 ## Storybook
 
 We use [Storybook](https://storybook.js.org/) to create a component library where we can see and interact with each component.