Is there a way to thrown an error if ReactMarkdown fails to render MD content?

[reypm]

I am using ReactMarkdown as follow:

<ReactMarkdown
      remarkPlugins={[
        remarkGfm,
        [remarkFrontmatter, ['yaml', 'toml']],
        remarkHtml,
        remarkParse,
        remarkBreaks,
        [remarkMermaid],
        remarkDirective,
        shortcodePlugin,
        remarkUnwrapImages,
        [imgLinks, { absolutePath: process.env.CONTENT_DOMAIN }],
      ]}
      rehypePlugins={[
        rehypeSlug,
        rehypeExternalLinks,
        rehypeRaw
      ]}
      remarkRehypeOptions={{allowDangerousHtml: true}}
    >
      {data}
</ReactMarkdown>

sometimes the MD content has issues and cannot be parsed properly but all I get on my end is a 500 error and no clues about what the issue could be so it can be fixed. Is there a way to print out why ReactMarkdown failed to render properly? I could send the errors out to the console (console.log) or I can send it to the page as a string so it can be render and I know exactly what is wrong with the MD content, can I get some hints in how to achieve this?

[wooorm]

I think you want https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

[ChristianMurphy]

sometimes the MD content has issues

There is no such thing as invalid markdown content, remark/react-markdown by itself should not be able to error, but a plugin could have an error.

on my end is a 500 error

500 error? Is the markdown being rendered server side?

no clues about what the issue could be so it can be fixed

Do you have access to the browser or server logs? Those would have the most detailed information

Is there a way to print out why ReactMarkdown failed to render properly?

https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary is one option as @wooorm mentioned.
But to add a caveat "rendered properly" is relative, an error boundary will catch a thrown error, but there can be text which is valid markdown, that was intended in another way which will not be caught.

For example, an almost-link (missing an )), will not throw an error, but will not render a link either.

[example](example.com

[example](example.com

[reypm]

500 error? Is the markdown being rendered server side?

No, from the frontend (ReactJS) we send a request to the server side (NextJS) and this one sends another request to AEM (Adobe Experience Manager) and then the server side reply the frontend with a JSON. That JSON sometimes has MD content

Do you have access to the browser or server logs? Those would have the most detailed information

By browser do you mean the Developer Tools? If so then yes I do have access, on the server side we are not logging everything all the time but I do have access too since we are running this locally for development not sure if that can help me somehow

For example, an almost-link (missing an )), will not throw an error, but will not render a link either.

[example](example.com

[example](example.com

This is content generated by 3rd party and the tools AEM provides will not parse MD at all so I have no way to know before hand if the content is wrong or not and I just got a 500 in the frontend with no clues

[ChristianMurphy]

500 error? Is the markdown being rendered server side?

No, from the frontend (ReactJS) we send a request to the server side (NextJS) and this one sends another request to AEM (Adobe Experience Manager) and then the server side reply the frontend with a JSON. That JSON sometimes has MD content

...

I just got a 500 in the frontend with no clues

I'm not following, HTTP 500 is a server sent status code.
Is Adobe Experience Manager throwing an error? Another backend service not mentioned yet?
Or are you saying your frontend is routing to an internal error page?

By browser do you mean the Developer Tools? If so then yes I do have access

Yes, the developer tools in your browser of choice, should have browser error logs, those would most likely have the most detail

This is content generated by 3rd party and the tools AEM provides will not parse MD at all so I have no way to know before hand if the content is wrong or not

That's not quite what I'm getting at, I am saying that there are some incorrectly authored content that could throw errors (if they break a plugin), and incorrectly authored that will not throw errors (not following an authoring standard). Logs will catch the first, but something smarter is needed for the second, either a human reviewer or a LLM/AI which is good at handling markdown.

[reypm]

Is Adobe Experience Manager throwing an error?

Not sure I have to do some research on this matter

Another backend service not mentioned yet?

No, we do not have any more backends

Or are you saying your frontend is routing to an internal error page?

This is exactly what is going on but I don't have any information on what could be happening. To get the error behind scenes I have to start debugging the code and check where it breaks and I would like to catch that error somehow and display it somewhere so I don't waste time debugging and just directly to the fix

That's not quite what I'm getting at, I am saying that there are some incorrectly authored content that could throw errors (if they break a plugin), and incorrectly authored that will not throw errors (not following an authoring standard). Logs will catch the first, but something smarter is needed for the second, either a human reviewer or a LLM/AI which is good at handling markdown.

right now I do not have a way to catch the first one, if some content breaks a plugin I see nothing in the Developer Console, not sure why

[reypm]

I will try with @wooorm suggestion - we already have something like this in place just not using it with this ReactMarkdown component - and see if I can get some hints in the console so the lead me to what is wrong or where the code might be failing