diff --git a/apps/examples/src/examples/error-boundary/ErrorBoundaryExample.tsx b/apps/examples/src/examples/error-boundary/ErrorBoundaryExample.tsx index 466eac288..b4d4c5722 100644 --- a/apps/examples/src/examples/error-boundary/ErrorBoundaryExample.tsx +++ b/apps/examples/src/examples/error-boundary/ErrorBoundaryExample.tsx @@ -2,14 +2,17 @@ import { createShapeId, Tldraw, TLShapePartial } from '@tldraw/tldraw' import '@tldraw/tldraw/tldraw.css' import { ErrorShape, ErrorShapeUtil } from './ErrorShape' +// There's a guide at the bottom of this file! + +// [1] const shapes = [ErrorShapeUtil] +// [2] export default function ErrorBoundaryExample() { return (
Shape error! {String(error)}
, // use a custom error fallback for shapes }} @@ -21,7 +24,7 @@ export default function ErrorBoundaryExample() { y: 0, props: { message: 'Something has gone wrong' }, } - + // [3] // When the app starts, create our error shape so we can see. editor.createShapes([errorShapePartial]) @@ -33,3 +36,23 @@ export default function ErrorBoundaryExample() {
) } + +/* +This example shows how the tldraw error boundary can allow you to render a custom error +fallback for shapes that throw errors. We simulate this scenario by creating a shape +that always throws an error when it renders. + +[1] +We have a shape util that always throws an error when it renders. Check out ErrorShape.ts +to see how this works. It's important to define this array of shape utils outside of a +React compenent so that they are not recreated on every render. + +[2] +We pass in our shape util to the tldraw component. We also pass in a custom error fallback +component that will be used to render any shapes that throw an error. Check out the +custom component example for more examples of components you can customize. + +[3] +When the app starts, we create our error shape and center the camera. + +*/