From 0d755de41e784ddc102d2e193a48e8118ebf8279 Mon Sep 17 00:00:00 2001
From: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:12:29 +0000
Subject: [PATCH] annotate error boundary example (#2410)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Annotates error boundary example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add annotation to error boundary example

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
---
 .../error-boundary/ErrorBoundaryExample.tsx   | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

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 (
 		<div className="tldraw__editor">
 			<Tldraw
 				shapeUtils={shapes}
-				tools={[]}
 				components={{
 					ShapeErrorFallback: ({ error }) => <div>Shape error! {String(error)}</div>, // 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<ErrorShape>([errorShapePartial])
 
@@ -33,3 +36,23 @@ export default function ErrorBoundaryExample() {
 		</div>
 	)
 }
+
+/* 
+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. 
+
+*/