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:
parent
01ab3604d0
commit
0d755de41e
1 changed files with 25 additions and 2 deletions
|
@ -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.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
Loading…
Reference in a new issue