Allow DefaultErrorFallback to be used independently (#3769)

Follow up to #3750 – this broke our error pages because they try to use
the Canvas component if they are in a tldraw subtree but it was designed
to work outside of a tldraw subtree too.
 
### Change Type

<!--  Please select a 'Scope' label ️ -->

- [x] `sdk` — Changes the tldraw SDK
- [x] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### 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 a brief release note for your PR here.
This commit is contained in:
David Sheldrick 2024-05-17 14:28:36 +01:00 committed by GitHub
parent 9bf25c10b8
commit abb207b98a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -23,7 +23,13 @@ export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }
const [didCopy, setDidCopy] = useState(false) const [didCopy, setDidCopy] = useState(false)
const [shouldShowResetConfirmation, setShouldShowResetConfirmation] = useState(false) const [shouldShowResetConfirmation, setShouldShowResetConfirmation] = useState(false)
const { Canvas } = useEditorComponents() let Canvas: React.ComponentType | null = null
try {
const components = useEditorComponents()
Canvas = components.Canvas ?? null
} catch (e) {
// allow this to fail silently
}
const errorMessage = error instanceof Error ? error.message : String(error) const errorMessage = error instanceof Error ? error.message : String(error)
const errorStack = error instanceof Error ? error.stack : null const errorStack = error instanceof Error ? error.stack : null