Add error handling for PlantUML image render fails
-
Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA
What does this MR do and why?
Handles issue 75.
This MR adds error handling for decoding/encoding of URI and bad image URL / server is down for plantUML diagram images. The error handling will render a warning banner (shortcode alert - refer to first screenshot below), when an error is caught, instead of showing default bad image icon (refer to second screenshot below).
This provides a better UI experience with meaningful error message.
Screenshots, screen recordings, or links to review app
Warning banner (new implementation)
Bad image icon (old implementation)
How to set up and validate locally
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md. -
For testing purposes go here: http://localhost:1313/administration/reference_architectures/25k_users/ -
Make sure all plantUML diagrams are showing up (no errors at this point). -
Change const imgSrc = `https://plantuml.gitlab-static.net/png/${imgData}`;
toconst imgSrc = `https://plantuml.gitlab-static.net/png-bad-url/${imgData}`;
to test bad url error / server down error. Go back to local website and make sure a warning banner is displayed (refer to screenshot 1). -
Change const s = decodeURIComponent(encodeURIComponent(element.textContent));
toconst s = decodeURIComponent("%E0%A4%A");
to test decode error. Go back to local website and make sure a warning banner is displayed (refer to screenshot 1).
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.
Edited by 🤖 GitLab Bot 🤖