chore(www): add ErrorBoundary in API Reference components

packages/clay-drop-down/docs/drop-down.mdx

@@ -6,6 +6,7 @@ packageNpm: '@clayui/drop-down'
 packageUse: "import DropDown from '@clayui/drop-down';"
 packageTypes:
     [
+        'clay-drop-down/src/DropDown.tsx',
         'clay-drop-down/src/Action.tsx',
         'clay-drop-down/src/Item.tsx',
         'clay-drop-down/src/ItemList.tsx',

www/app/_components/APIReference.tsx

@@ -6,6 +6,8 @@ import type {JavaScriptFileExport} from 'renoun/file-system';
 import {CodeInline, MDXRenderer, MDXComponents} from 'renoun/components';
 import {ComponentsCollection} from '@/data';
 
+import {ErrorBoundary} from './ErrorBoundary';
+
 const mdxComponents = {
 	p: (props) => <p {...props} style={{margin: 0}} />,
 	code: (props) => <MDXComponents.code {...props} paddingY="0" />,
@@ -35,10 +37,22 @@ export type APIReferenceProps =
 
 /** Displays type documentation for all types exported from a file path or types related to a collection export source. */
 export function APIReference(props: APIReferenceProps) {
+	const path = (props.source as string).split('/');
+
 	return (
-		<Suspense fallback="Loading API references...">
-			<APIReferenceAsync {...props} />
-		</Suspense>
+		<ErrorBoundary
+			fallback={
+				<div className="alert alert-danger">
+					<strong className="lead">Error:</strong> An error occurred
+					while generating the Table API for the{' '}
+					{path[path.length - 1]} component.
+				</div>
+			}
+		>
+			<Suspense fallback="Loading API references...">
+				<APIReferenceAsync {...props} />
+			</Suspense>
+		</ErrorBoundary>
 	);
 }
 

www/app/_components/ErrorBoundary.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+
+type Props = {
+	fallback: React.ReactNode;
+	children: React.ReactNode;
+};
+
+export class ErrorBoundary extends React.Component<Props, any> {
+	constructor(props: any) {
+		super(props);
+		this.state = {hasError: false};
+	}
+
+	static getDerivedStateFromError() {
+		return {hasError: true};
+	}
+
+	componentDidCatch(error: any, info: any) {
+		console.log(error, info);
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return this.props.fallback;
+		}
+
+		return this.props.children;
+	}
+}