annotate error boundary example (#2410)

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>
This commit is contained in:
Taha 2024-01-08 12:12:29 +00:00 committed by GitHub
parent 01ab3604d0
commit 0d755de41e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -2,14 +2,17 @@ import { createShapeId, Tldraw, TLShapePartial } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css' import '@tldraw/tldraw/tldraw.css'
import { ErrorShape, ErrorShapeUtil } from './ErrorShape' import { ErrorShape, ErrorShapeUtil } from './ErrorShape'
// There's a guide at the bottom of this file!
// [1]
const shapes = [ErrorShapeUtil] const shapes = [ErrorShapeUtil]
// [2]
export default function ErrorBoundaryExample() { export default function ErrorBoundaryExample() {
return ( return (
<div className="tldraw__editor"> <div className="tldraw__editor">
<Tldraw <Tldraw
shapeUtils={shapes} shapeUtils={shapes}
tools={[]}
components={{ components={{
ShapeErrorFallback: ({ error }) => <div>Shape error! {String(error)}</div>, // use a custom error fallback for shapes 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, y: 0,
props: { message: 'Something has gone wrong' }, props: { message: 'Something has gone wrong' },
} }
// [3]
// When the app starts, create our error shape so we can see. // When the app starts, create our error shape so we can see.
editor.createShapes<ErrorShape>([errorShapePartial]) editor.createShapes<ErrorShape>([errorShapePartial])
@ -33,3 +36,23 @@ export default function ErrorBoundaryExample() {
</div> </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.
*/