Various improvements to SnapshotEditor

theatre/package.json

@@ -71,6 +71,7 @@
     "propose": "^0.0.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-error-boundary": "^3.1.3",
     "react-icons": "^4.2.0",
     "react-is": "^17.0.2",
     "react-shadow": "^19.0.2",

theatre/studio/src/UIRoot/PanelsRoot.tsx

@@ -16,7 +16,7 @@ const PanelsRoot: React.FC = () => {
 
   return (
     <>
-      {/* {paneEls} */}
+      {paneEls}
       <OutlinePanel />
       <ObjectEditorPanel />
       <SequenceEditorPanel />

theatre/studio/src/panels/BasePanel/PaneWrapper.tsx

@@ -10,6 +10,7 @@ import {
 import BasePanel from './BasePanel'
 import PanelDragZone from './PanelDragZone'
 import PanelWrapper from './PanelWrapper'
+import {ErrorBoundary} from 'react-error-boundary'
 
 const defaultPosition: PanelPosition = {
   edges: {
@@ -50,6 +51,35 @@ const F2 = styled(F2Impl)`
   position: relative;
 `
 
+const ErrorContainer = styled.div`
+  padding: 12px;
+
+  & > pre {
+    border: 1px solid #ff62624f;
+    background-color: rgb(255 0 0 / 5%);
+    margin: 8px 0;
+    padding: 8px;
+    font-family: monospace;
+    overflow: scroll;
+    color: #ff9896;
+  }
+`
+
+const ErrorFallback: React.FC<{error: Error}> = (props) => {
+  return (
+    <ErrorContainer>
+      An Error occured rendering this pane. Open the console for more info.
+      <pre>
+        {JSON.stringify(
+          {message: props.error.message, stack: props.error.stack},
+          null,
+          2,
+        )}
+      </pre>
+    </ErrorContainer>
+  )
+}
+
 const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
   paneInstance,
 }) => {
@@ -62,7 +92,9 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
         </TitleBar>
       </PanelDragZone>
       <F2>
-        <Comp id={paneInstance.instanceId} object={paneInstance.object} />
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+          <Comp id={paneInstance.instanceId} object={paneInstance.object} />
+        </ErrorBoundary>
       </F2>
     </Container>
   )

theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx

@@ -13,7 +13,6 @@ const Container = styled.div`
 
   display: flex;
   gap: 1rem;
-  display: none;
 `
 
 const GlobalToolbar: React.FC<{}> = (props) => {