Editor crashes and project is permanently broken with nested RTF canvases

[alecmolloy]

STR:

1. import react-three-fiber and three into fresh project
2. Paste following code into editor

/** @jsx jsx */
import * as React from 'react'
import { Canvas, useFrame } from 'react-three-fiber'
import { Scene, Storyboard, jsx } from 'utopia-api'

export var App = (props) => {
  const mesh = React.useRef()

  return (
    <Canvas style={{ ...props.style, width: 375, height: 812 }} width={375} height={812}>
      <ambientLight color='babyblue' />
    </Canvas>
  )
}
export var storyboard = (
  <Storyboard layout={{ layoutSystem: 'pinSystem' }}>
    <Canvas
      style={{ left: 0, top: 0, width: 375, height: 812 }}
    ><App ></App></Canvas>
  </Storyboard>
)

expected: app should not work, but error should be displayed actual: editor crashes, restarting browser window causes crash to happen again. no way to repair project.

I'm obviously not as interested in fixing this particular issue as i am interested in understanding how our protection services have failed to work here.

[alecmolloy]

I would like to add that aside from solving this particular issue, I would also like to solve the more general problem of users being incapable of stopping code from running automatically.

[Rheeseyb]

This no longer breaks the editor. I believe it was likely solved with my recent PR around error handling (#341).

I would also like to solve the more general problem of users being incapable of stopping code from running automatically.

Yeah, agreed. I did mention previously about passing a flag as a URL param to explicitly open a project in safe mode. It would be easy to do, though it's pretty opaque, but then maybe that's enough for us right now? Ideally you should be able to do it via the editor...

Edit to clarify - this no longer breaks the editor, but this code does fail to run on the canvas.