A specific input makes the component hang (infinite browser loop)

[cristian-spiescu]

Hi,

I found a specific input that makes the component hang the browser:

      <Markdown>{
`
|VRAC_T_1|<small>\`🟩-2\`</small> VRAC|<small>🔵<i>end address of original task</i></small><br /><small>\`🟦-1\`</small> F68|<small>🔵<i>parking of \`AF0374\`</i></small><br /><small>\`🟦-6\`</small> E27|
`
      }</Markdown>

The initial input was larger (was a line in a table), but I narrowed it down to the minimal that produces this issue. I also made a repo that reproduces this issue. The above code snippet is in App.tsx.

Any ideas what could be the issue?

Thanks in advance! Cristian

[cristian-spiescu]

I'd like to spend a few moments to try to look into this issue. Could anyone share some pointers? Were there similar things in the past?

Being an infinite loop, its harder to put a breakpoint to start the work. I'd try to pause the VM to try to identify where this loop happens. Maybe in the compiler/parser part? However, I recall that the browser was completely frozen, so how to work w/ the debugger in this case? But maybe I'm wrong.

[cristian-spiescu]

A colleague of mine spent a few moments. We didn't find a solid lead. We suspend this for the moment. She'll share below her findings.

[rvalzy]

I've experienced the same thing by passing the following string to the <Markdown /> component, which maxes out the CPU:

 "If set (e.g., sort_by[last_login_at]=desc). `authenticate_until`, `email`, `last_desktop_login_at`, `last_login_at`, `username`, `company`, `name`, `notes`, `site_admin`, `receive_admin_alerts`, `allowed_ips`, `password_validity_days`, `ssl_required` or `not_site_admin`."

The markdown in this example is malformed to be fair, but ideally the component would bow out gracefully instead of pinning the CPU.

[daniela-mateescu]

Hi, Unfortunately, we didn't found the cause or a fix for this issue.

From out investigations we saw that this component has some performance problems for some specific inputs and when that input is large enough it crashes. In our case seemed to be related to <span> and _ characters because we reduced our initial input to:

      <Markdown>{
`
|a_a_a|<small></small><small></small><small></small><small></small><small></small><small></small><small></small><small></small>
`
      }</Markdown>

and for this input it freezes the app, but if you remove any _ or <small> tag the application doesn't freeze anymore but uses a lot the cpu.

We found that there are many issues registered that seems to be related to our problem: https://github.com/probablyup/markdown-to-jsx/issues/396 https://github.com/probablyup/markdown-to-jsx/issues/438 https://github.com/probablyup/markdown-to-jsx/issues/374

We are looking forward for any updates regarding this problem,

Daniela

[gsouf]

Interesting one here too using long base64 encoded image urls.

This one will work (replace longBase64Url with an actual long data url):

![title](longBase64Url)

But now, if I only add a title line it will fail into a loop and the browser will report too much recursion error:

# hello
![title](longBase64Url)

Note that it will work if instead I use a short base 64 url. For example this one works:

# hello
![title](shortBase64Url)

[HZ-labs]

Our error trace for using multiple long base64 encoded image urls:

[cristian-spiescu]

In my opinion it's a design flow. Not a small issue. We changed to react-markdown. Seems to be a very solid component.

[gsouf]

Yes same here, we did move to @khanacademy/simple-markdown that is not well documented, but works well for simple needs and is extensible

react-markdown carries too many dependencies, and the last version is ESM only, that is not a deal breaker for my use case.

[jackyef]

Recently encountered this issue. If it helps, the following input cause a high CPU load. It doesn't hang indefinitely, but it takes a long time to finish. (Try pasting it to https://probablyup.com/markdown-to-jsx/)

Some text 
Lorem ipsum
Some other text
                 Foo bar
Foo bar baz
                 123-456-1234
                                                                           2 USD.