docs(suspensive.org): add docs for shouldCatch at ErrorBoundary

.changeset/afraid-suns-decide.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+fix(react): add jsdoc for shouldCatch prop of ErrorBoundary

docs/suspensive.org/src/pages/docs/react/ErrorBoundary.en.mdx

@@ -1,4 +1,5 @@
 import { Callout, Sandpack } from '@/components'
+import { Tabs } from 'nextra/components'
 
 # ErrorBoundary
 
@@ -364,6 +365,226 @@ export const ErrorAfter2s = () => {
 
 </Sandpack>
 
+### props.shouldCatch
+
+shouldCatch determines whether `<ErrorBoundary/>` should catch errors based on conditions.
+
+It accepts three criteria: Boolean, Constructor, and Callback, and defaults to true.
+
+<Tabs items={['Boolean', 'Constructor', 'Callback']}>
+  <Tabs.Tab>
+
+```tsx {10}
+import { ErrorBoundary } from '@suspensive/react'
+import { createElement } from 'react'
+import { CustomError } from './CustomError'
+import { CustomErrorAfter2s } from './CustomErrorAfter2s'
+
+export const Example = () => {
+  return (
+    <ErrorBoundary fallback={({ error }) => <>{error.message} of Parent</>}>
+      <ErrorBoundary
+        shouldCatch={false}
+        fallback={({ error }) => <>{error.message} of Child</>}
+      >
+        <CustomErrorAfter2s />
+      </ErrorBoundary>
+    </ErrorBoundary>
+  )
+}
+```
+  </Tabs.Tab>
+  <Tabs.Tab>
+
+```tsx {10}
+import { ErrorBoundary } from '@suspensive/react'
+import { createElement } from 'react'
+import { CustomError } from './CustomError'
+import { CustomErrorAfter2s } from './CustomErrorAfter2s'
+
+export const Example = () => {
+  return (
+    <ErrorBoundary fallback={({ error }) => <>{error.message} of Parent</>}>
+      <ErrorBoundary
+        shouldCatch={CustomError}
+        fallback={({ error }) => <>{error.message} of Child</>}
+      >
+        <CustomErrorAfter2s />
+      </ErrorBoundary>
+    </ErrorBoundary>
+  )
+}
+```
+
+  </Tabs.Tab>
+  <Tabs.Tab>
+
+```tsx {10}
+import { ErrorBoundary } from '@suspensive/react'
+import { createElement } from 'react'
+import { CustomError } from './CustomError'
+import { CustomErrorAfter2s } from './CustomErrorAfter2s'
+
+export const Example = () => {
+  return (
+    <ErrorBoundary fallback={({ error }) => <>{error.message} of Parent</>}>
+      <ErrorBoundary
+        shouldCatch={(error) => error instanceof CustomError}
+        fallback={({ error }) => <>{error.message} of Child</>}
+      >
+        <CustomErrorAfter2s />
+      </ErrorBoundary>
+    </ErrorBoundary>
+  )
+}
+```
+  </Tabs.Tab>
+</Tabs>
+
+You can also apply multiple criteria through array.
+
+```tsx {10}
+import { ErrorBoundary } from '@suspensive/react'
+import { createElement } from 'react'
+import { CustomError } from './CustomError'
+import { CustomErrorAfter2s } from './CustomErrorAfter2s'
+
+export const Example = () => {
+return (
+  <ErrorBoundary fallback={({ error }) => <>{error.message} of Parent</>}>
+    <ErrorBoundary
+      shouldCatch={[false, CustomError, (error) => error instanceof CustomError]}
+      fallback={({ error }) => <>{error.message} of Child</>}
+    >
+      <CustomErrorAfter2s />
+    </ErrorBoundary>
+  </ErrorBoundary>
+  )
+}
+```
+
+<Sandpack>
+
+```tsx Example.tsx active
+import { ErrorBoundary } from '@suspensive/react'
+import { createElement } from 'react'
+import { CustomError } from './CustomError'
+import { CustomErrorAfter2s } from './CustomErrorAfter2s'
+
+export const Example = () => {
+  return (
+    <ErrorBoundary fallback={({ error }) => <>{error.message} of Parent</>}>
+      <ErrorBoundary
+        shouldCatch={CustomError}
+        fallback={({ error }) => <>{error.message} of Child</>}
+      >
+        <CustomErrorAfter2s />
+      </ErrorBoundary>
+    </ErrorBoundary>
+  )
+}
+```
+
+```tsx CustomError.ts
+
+export class CustomError extends Error {
+  constructor(...args: ConstructorParameters<ErrorConstructor>) {
+    super(...args)
+    console.error(...args)
+  }
+}
+```
+
+```tsx CustomErrorAfter2s.tsx
+import { useState, useEffect } from "react";
+import { CustomError } from "./CustomError";
+
+export const CustomErrorAfter2s = () => {
+  const [asyncState, setAsyncState] = useState<
+    { isError: true; error: CustomError } | { isError: false; error: null }
+  >({
+    isError: false,
+    error: null
+  });
+
+  useEffect(() => {
+    setTimeout(() => {
+      setAsyncState({
+        isError: true,
+        error: () => new CustomError("unauthorized")
+      });
+    }, 2000);
+  }, []);
+
+  if (asyncState.isError) {
+    throw asyncState.error();
+  }
+
+  return <>No error</>;
+};
+```
+
+</Sandpack>
+
+<br />
+
+<Sandpack>
+
+```tsx Example.tsx active
+import { ErrorBoundary } from '@suspensive/react'
+import { createElement } from 'react'
+import { CustomError } from './CustomError'
+import { ErrorAfter2s } from './ErrorAfter2s'
+
+export const Example = () => {
+  return (
+    <ErrorBoundary fallback={({ error }) => <>{error.message} of Parent</>}>
+      <ErrorBoundary
+        shouldCatch={CustomError}
+        fallback={({ error }) => <>{error.message} of Child</>}
+      >
+        <ErrorAfter2s />
+      </ErrorBoundary>
+    </ErrorBoundary>
+  )
+}
+```
+
+```tsx CustomError.ts
+
+export class CustomError extends Error {
+  constructor(...args: ConstructorParameters<ErrorConstructor>) {
+    super(...args)
+    console.error(...args)
+  }
+}
+```
+
+```tsx /ErrorAfter2s.tsx
+import { useState, useEffect } from 'react'
+
+export const ErrorAfter2s = () => {
+  const [asyncState, setAsyncState] = useState<{ isError: true; error: Error } | { isError: false; error: null }>({
+    isError: false,
+    error: null,
+  })
+
+  useEffect(() => {
+    setTimeout(() => {
+      setAsyncState({ isError: true, error: { status: 401, message: 'unauthorized' } })
+    }, 2000)
+  }, [])
+
+  if (asyncState.isError) {
+    throw asyncState.error
+  }
+
+  return <>No error</>
+}
+```
+
+</Sandpack>
+
 ## useErrorBoundary
 
 ### useErrorBoundary().setError