Add error to debug window

components/canvas/canvas.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/node'
 import { ErrorBoundary } from 'react-error-boundary'
 import Bounds from './bounds/bounding-box'
 import BoundsBg from './bounds/bounds-bg'
@@ -71,17 +72,18 @@ const MainSVG = styled('svg', {
 
 function ErrorFallback({ error, resetErrorBoundary }) {
   React.useEffect(() => {
-    const copy = 'Sorry, something went wrong. Clear canvas and continue?'
+    const copy =
+      'Sorry, something went wrong. Press Ok to reset the document, or press cancel to continue and see if it resolves itself.'
+
     console.error(error)
+
+    Sentry.captureException(error)
+
     if (window.confirm(copy)) {
-      state.send('CLEARED_PAGE')
+      state.send('RESET_DOCUMENT_STATE')
       resetErrorBoundary()
     }
   }, [])
 
-  return (
-    <g>
-      <text>Oops</text>
-    </g>
-  )
+  return <g />
 }

components/debug-panel/debug-panel.tsx

@@ -12,6 +12,7 @@ import {
   StopIcon,
   ClipboardIcon,
   ClipboardCopyIcon,
+  TrashIcon,
 } from '@radix-ui/react-icons'
 import logger from 'state/logger'
 import { useStateDesigner } from '@state-designer/react'
@@ -19,6 +20,9 @@ import { useStateDesigner } from '@state-designer/react'
 const stopPropagation = (e: React.KeyboardEvent) => e.stopPropagation()
 const toggleDebugPanel = () => state.send('TOGGLED_DEBUG_PANEL')
 const handleStateCopy = () => state.send('COPIED_STATE_TO_CLIPBOARD')
+const handleError = () => {
+  throw Error('Error!')
+}
 
 export default function CodePanel(): JSX.Element {
   const rContainer = useRef<HTMLDivElement>(null)
@@ -114,6 +118,12 @@ export default function CodePanel(): JSX.Element {
                 <ClipboardCopyIcon />
               </IconWrapper>
             </RowButton>
+            <RowButton bp={breakpoints} onClick={handleError}>
+              <span>Create Error</span>
+              <IconWrapper size="small">
+                <TrashIcon />
+              </IconWrapper>
+            </RowButton>
             <hr />
             {local.isIn('stopped') ? (
               <RowButton bp={breakpoints} onClick={handleLoggingStart}>

pages/index.tsx

@@ -19,7 +19,7 @@ export default function Home(): JSX.Element {
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const session = await getSession(context)
 
-  if (!session?.user) {
+  if (!session?.user && process.env.NODE_ENV !== 'development') {
     context.res.setHeader('Location', `/sponsorware`)
     context.res.statusCode = 307
   }

pages/room/[id].tsx

@@ -21,7 +21,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   const session = await getSession(context)
   const { id } = context.query
 
-  if (!session?.user) {
+  if (!session?.user && process.env.NODE_ENV !== 'development') {
     context.res.setHeader('Location', `/sponsorware`)
     context.res.statusCode = 307
   }

pages/sponsorware.tsx

@@ -67,11 +67,6 @@ export default function Sponsorware(): JSX.Element {
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const session = await getSession(context)
 
-  if (session?.user) {
-    context.res.setHeader('Location', `/`)
-    context.res.statusCode = 307
-  }
-
   return {
     props: {
       session,