Error Rendering Mermaid Diagram

[zicklag]

I have an issue when trying to use mermaid diagrams in a document. When I run relaxed in the official "Report" example, the project will build just fine, but when I update the .mermaid file, it detects the change and tries to render the diagram before it times out with the following error:

Launching ReLaXed...

Processing /report.pug...
... HTML generated in 0.4s
... Document loaded in 0.6s
... Network idled in 0.2s
... PDF written in 0.3s (130.64 KB)
... Done in 1.61s

Now idle and waiting for file changes.

Processing /diagrams/diagram.mermaid...
(node:17087) UnhandledPromiseRejectionWarning: TimeoutError: waiting for selector "#graph svg" failed: timeout 30000ms exceeded
    at new WaitTask (/home/zicklag/.nvm/versions/node/v10.15.3/lib/node_modules/relaxedjs/node_modules/puppeteer/lib/DOMWorld.js:561:28)
    at DOMWorld._waitForSelectorOrXPath (/home/zicklag/.nvm/versions/node/v10.15.3/lib/node_modules/relaxedjs/node_modules/puppeteer/lib/DOMWorld.js:490:22)
    at DOMWorld.waitForSelector (/home/zicklag/.nvm/versions/node/v10.15.3/lib/node_modules/relaxedjs/node_modules/puppeteer/lib/DOMWorld.js:444:17)
    at Frame.waitForSelector (/home/zicklag/.nvm/versions/node/v10.15.3/lib/node_modules/relaxedjs/node_modules/puppeteer/lib/FrameManager.js:628:47)
    at Frame.<anonymous> (/home/zicklag/.nvm/versions/node/v10.15.3/lib/node_modules/relaxedjs/node_modules/puppeteer/lib/helper.js:111:23)
    at Page.waitForSelector (/home/zicklag/.nvm/versions/node/v10.15.3/lib/node_modules/relaxedjs/node_modules/puppeteer/lib/Page.js:1046:29)
    at Object.mermaidHandler [as handler] (/home/zicklag/.nvm/versions/node/v10.15.3/lib/node_modules/relaxedjs/src/builtin_plugins/mermaid/index.js:23:14)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:17087) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejectinga promise which was not handled with .catch(). (rejection id: 1)
(node:17087) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[DanielRuf]

Hi @zicklag,

Thanks for reporting this bug.

Can you share an example which reproduces this?

[Zulko]

@DanielRuf sounds like a bug with the .mermaid generator.It is basically a plug-in that will create a "#graph svg" element with a mermaid graph, then take a snapshot of it. So the "#graph svg" is not defined by the user.

[DanielRuf]

Ah ok. But still may be helpful to have a reproducible example. Probably some race condition (the element is not directly available but after a specific amount of time).

[DanielRuf]

https://github.com/RelaxedJS/ReLaXed/blob/master/src/builtin_plugins/mermaid/index.js#L18

[DanielRuf]

We do not use the callback so it is asynchronous at the moment, see https://pugjs.org/api/reference.html#pugrenderfilepath-options-callback.

We can probably use async / await.

[zicklag]

Hi @DanielRuf, thanks for looking into this, I got this error running relaxed right in the report example directory. If it isn't happening to anybody else it might be related to the performance of my machine.

An interesting note, though this might be a separate issue, is that when I start Relaxed while my Firefox browser is running, as soon as relaxed renders the page and goes into an idle state, it somehow causes Firefox to start running all four cores on my CPU at 100% for no explainable reason. It is really strange. If Relaxed uses Chrome for rendering the page and it is idle anyway, how does it cause some weird reaction in Firefox. Even if I close relaxed afterwards, Firefox will not calm down until I close and restart it. Also if I start Firefox after starting Relaxed, there are no problems, it is only if I start Relaxed while Firefox is running.

[DanielRuf]

Not sure how this can be related. Probably an issue in puppeteer which we would have to inspect much deeper.