Grafana-UI: Add story/docs for ErrorBoundary (#30304)

packages/grafana-ui/.storybook/preview.ts

@@ -15,7 +15,6 @@ import lightTheme from '../../../public/sass/grafana.light.scss';
 // @ts-ignore
 import darkTheme from '../../../public/sass/grafana.dark.scss';
 import { GrafanaLight, GrafanaDark } from './storybookTheme';
-import { configure } from '@storybook/react';
 import addons from '@storybook/addons';
 
 const handleThemeChange = (theme: any) => {

packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.mdx

@@ -0,0 +1,56 @@
+import { ArgsTable } from "@storybook/addon-docs/blocks";
+import { ErrorBoundary, ErrorBoundaryAlert } from "./ErrorBoundary";
+import { ErrorWithStack } from "./ErrorWithStack";
+
+# ErrorBoundary
+
+A React component that catches errors in child components. Useful for logging or displaying a fallback UI in case of errors. More information about error boundaries is available at [React documentation website](https://reactjs.org/docs/error-boundaries.html).
+
+### Usage
+
+```jsx
+import { ErrorBoundary, Alert } from '@grafana/ui';
+
+<ErrorBoundary>
+  {({ error }) => {
+    if (error) {
+      return <Alert title={error.message} />;
+    }
+    return <Component />;
+  }}
+</ErrorBoundary>
+```
+
+# ErrorBoundaryAlert
+
+An error boundary component with built-in alert to display in case of error.
+
+### Usage
+
+```jsx
+import { ErrorBoundaryAlert } from '@grafana/ui';
+
+<ErrorBoundaryAlert>
+  <Component />
+</ErrorBoundaryAlert>
+```
+
+### Props
+<ArgsTable of={ErrorBoundaryAlert}/>
+
+
+# ErrorWithStack
+A component that displays error together with its stack trace.
+
+### Usage
+
+```jsx
+import { ErrorWithStack } from '@grafana/ui';
+
+<ErrorWithStack error={new Error('Test error')} title={'Unexpected error'} errorInfo={null} />
+```
+
+### Props
+<ArgsTable of={ErrorWithStack}/>
+
+

packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.story.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { ErrorBoundary, ErrorBoundaryAlert } from './ErrorBoundary';
+import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
+import mdx from './ErrorBoundary.mdx';
+import { Button } from '../Button';
+import { ErrorWithStack } from './ErrorWithStack';
+import { Alert } from '../Alert/Alert';
+
+export default {
+  title: 'General/ErrorBoundary',
+  component: ErrorBoundary,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+const BuggyComponent = () => {
+  const [count, setCount] = useState(0);
+
+  if (count > 2) {
+    throw new Error('Crashed');
+  }
+
+  return (
+    <div>
+      <p>Increase the count to 3 to trigger error</p>
+      <Button onClick={() => setCount(count + 1)}>{count.toString()}</Button>
+    </div>
+  );
+};
+
+export const Basic = () => {
+  return (
+    <ErrorBoundary>
+      {({ error }) => {
+        if (error) {
+          return <Alert title={error.message} />;
+        }
+        return <BuggyComponent />;
+      }}
+    </ErrorBoundary>
+  );
+};
+
+export const WithStack = () => {
+  return <ErrorWithStack error={new Error('Test error')} title={'Unexpected error'} errorInfo={null} />;
+};
+
+export const BoundaryAlert = () => {
+  return (
+    <ErrorBoundaryAlert>
+      <BuggyComponent />
+    </ErrorBoundaryAlert>
+  );
+};