A render error caught in one area

// apps/docs/examples/ui/error-boundary.tsx'use client';
import {useState} from 'react';
import {ErrorBoundary} from '@workspace/active-ui/components/composed/error-boundary';import {  Alert,  AlertDescription,  AlertTitle,} from '@workspace/active-ui/components/primitives/alert';import {Button} from '@workspace/active-ui/components/primitives/button';
function Totals({broken}: {broken: boolean}) {  if (broken) {    // A deliberate render error, to show the boundary at work.    throw new Error('The totals could not be calculated.');  }  return <p className="text-sm">Total contributions this year: 48,210.00</p>;}
/** * A render error caught in one area of the page. Break the area: the * boundary shows the fallback with the error's message and a retry that * renders the area again. The error is real, but harmless. */export default function ErrorBoundaryExample() {  const [broken, setBroken] = useState(false);  const [caught, setCaught] = useState(0);  return (    <div className="grid w-full max-w-md gap-4">      <Button        variant="outline"        className="justify-self-start"        onClick={() => setBroken(true)}      >        Break the totals      </Button>      <ErrorBoundary        onError={() => setCaught((count) => count + 1)}        onReset={() => setBroken(false)}        fallback={(error, reset) => (          <Alert variant="destructive">            <AlertTitle>This area failed</AlertTitle>            <AlertDescription>              <p>{error.message}</p>              <Button size="sm" variant="outline" onClick={reset}>                Try again              </Button>            </AlertDescription>          </Alert>        )}      >        <Totals broken={broken} />      </ErrorBoundary>      <p className="text-muted-foreground text-xs">        Errors reported to <code>onError</code>: {caught}      </p>    </div>  );}