Clarify event handler error docs

README.md

@@ -69,9 +69,9 @@ Error boundaries do not catch errors thrown during:
 - Errors thrown in the error boundary itself
 - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises
 
-## Async errors
+## Event handler and async errors
 
-For async errors:
+For event handler errors and async callback errors:
 
 - Use `useErrorBoundary` to pass caught errors to the nearest boundary.
 - In React 19, `useTransition` Actions can be an alternative: errors thrown from a function passed to the returned `startTransition` function are caught by the nearest boundary.
@@ -82,26 +82,26 @@ For async errors:
 import { useTransition } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
-function UserProfileContainer({ username }: { username: string }) {
+function AddCommentContainer() {
   return (
-    <ErrorBoundary fallback={<p>Could not load profile</p>}>
-      <UserProfile username={username} />
+    <ErrorBoundary fallback={<p>Could not add comment</p>}>
+      <AddCommentButton />
     </ErrorBoundary>
   );
 }
 
-function UserProfile({ username }: { username: string }) {
+function AddCommentButton() {
   const [isPending, startTransition] = useTransition();
 
-  function loadProfile() {
+  function handleClick() {
     startTransition(async () => {
-      await fetchUserProfile(username);
+      await addComment();
     });
   }
 
   return (
-    <button disabled={isPending} onClick={loadProfile}>
-      {isPending ? "Loading..." : "Load profile"}
+    <button disabled={isPending} onClick={handleClick}>
+      {isPending ? "Adding..." : "Add comment"}
     </button>
   );
 }
@@ -123,7 +123,7 @@ Does not catch errors thrown during:
 - Errors thrown in the error boundary itself
 - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises
 
-Async errors:
+Event handler and async errors:
 
 - Use `useErrorBoundary` to pass caught errors to the nearest boundary
 - In React 19, errors thrown from a function passed to the `startTransition` function returned by `useTransition`

lib/components/ErrorBoundary.tsx

@@ -31,7 +31,7 @@ const initialState: ErrorBoundaryState = {
  * - Errors thrown in the error boundary itself
  * - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises
  *
- * Async errors:
+ * Event handler and async errors:
  *
  * - Use `useErrorBoundary` to pass caught errors to the nearest boundary
  * - In React 19, errors thrown from a function passed to the `startTransition` function returned by `useTransition`

public/generated/docs/ErrorBoundary.json

@@ -10,7 +10,7 @@
       "content": "<p>Does not catch errors thrown during:</p>\n<ul>\n<li>Server side rendering</li>\n<li>Event handlers</li>\n<li>Errors thrown in the error boundary itself</li>\n<li>Async code that runs after rendering, like <code>setTimeout</code> callbacks or unresolved promises</li>\n</ul>\n"
     },
     {
-      "content": "<p>Async errors:</p>\n"
+      "content": "<p>Event handler and async errors:</p>\n"
     },
     {
       "content": "<ul>\n<li>Use <code>useErrorBoundary</code> to pass caught errors to the nearest boundary</li>\n<li>In React 19, errors thrown from a function passed to the <code>startTransition</code> function returned by <code>useTransition</code>\nare caught by the nearest boundary</li>\n</ul>\n"

public/generated/examples/AsyncUserCodeErrors.json

@@ -1,3 +1,3 @@
 {
-  "html": "<div><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">useErrorBoundary</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-error-boundary\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">UserProfile</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">username</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">username</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">string</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">showBoundary</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useErrorBoundary</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">async</span><span class=\"\"> </span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">loadProfile</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-keyword\">try</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-keyword\">await</span><span class=\"\"> </span><span class=\"tok-variableName\">fetchUserProfile</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">username</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">catch</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">error</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-variableName\">showBoundary</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">error</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">button</span><span class=\"\"> </span><span class=\"tok-propertyName\">onClick</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">loadProfile</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">Load profile</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">button</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
+  "html": "<div><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">useEffect</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">ErrorBoundary</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">useErrorBoundary</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-error-boundary\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">UserProfileContainer</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">username</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">username</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">string</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">ErrorBoundary</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-propertyName\">fallback</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">p</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">Could not load profile</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">p</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-propertyName\">resetKeys</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">username</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">UserProfile</span><span class=\"\"> </span><span class=\"tok-propertyName\">username</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">username</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">ErrorBoundary</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">UserProfile</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">username</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">username</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">string</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">showBoundary</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useErrorBoundary</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">  </span><span class=\"tok-variableName\">useEffect</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-variableName\">fetchGreeting</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">username</span><span class=\"tok-punctuation\">)</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">then</span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">response</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">        </span><span class=\"tok-comment\">// Set data in state and re-render ...</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">error</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div><span class=\"\">        </span><span class=\"tok-comment\">// Show error boundary</span><span class=\"\"></span></div>\n<div><span class=\"\">        </span><span class=\"tok-variableName\">showBoundary</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">error</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">showBoundary</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName\">username</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-keyword\">null</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
 }