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.
+
+*/