Playground on site not catching invalid Javascript expressions error

[xHomu]

Subject of the issue

Great Job on the v2 rc release! Noticed a minor bug with error catching on the new Playground page for the new Javascript expressions support.

Your environment

• OS: Window 10
• Packages: 2.0.0-rc.1 on https://v2.mdxjs.com/playground/
• Env: Chrome

Steps to reproduce

Invalid JSX Errors are caught correctly by the Compile tab:

Hello, world!
Below is an example of markdown in JSX.

</div>

Errors are NOT caught by the Compile tab when when using the new Javascript expressions syntax {...].

Hello, world!
Below is an example of markdown in JSX.

{r}

The page crashes from the error, error from chrome console:

Expected behaviour

Errors within Javascript expressions {...} should caught by the Playground Console tab like JSX syntax error.

Actual behaviour

The page crashes from the error, force you to refresh Playground.

[xHomu]

Adding rehype-sanitize plugin to Playground editor should solve this issue, but would also prevent all Javascript expressions {...} from evaluating.

> import rehypeSanitize from 'rehype-sanitize';

....

          await evaluate(file, {
            ...runtime,
            useDynamicImport: true,
            remarkPlugins,
>            rehypePlugins: [capture('hast'), rehypeSanitize],
            recmaPlugins: [capture('esast')]
          })

[wooorm]

rehypeSanitize will remove a bunch of stuff, so that’ll indeed work, but the goal of this playground is to explicitly allow such things. @ChristianMurphy recently touched the playground and I believe also the error catching method, maybe you have ideas Christian?

[ChristianMurphy]

I added a wrapper that specifically catches and offers recovery for codemirror errors

mdx/docs/_component/editor.client.js

Lines 88 to 90 in f97ec00

	<ErrorBoundary FallbackComponent={ErrorFallback}>
	<CodeMirror {...props} />
	</ErrorBoundary>

To catch errors from invalid MDX/JS being run, we'd need to add another ErrorBoundary a few layers up wrapping

mdx/docs/_component/editor.client.js

Line 103 in f97ec00

export const Editor = ({children}) => {

and figure out what a good error recovery mechanism/UI would look like there.

[wooorm]

I think this is solved? #1791 (comment)

[shimamooo]

This isn't solved, editor doesn't have a mechanism to catch invalid expressions. #1791 is related to codemirror state not being in sync with the application state

[wooorm]

ah, right, thanks!