Skip to content

Add error handling for PlantUML image render fails

Hiru Fernando requested to merge uml-render-fail into main
  • 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)

Screenshot_2024-06-13_at_2.41.50_PM

Bad image icon (old implementation)

Screenshot_2024-06-13_at_3.21.14_PM

How to set up and validate locally

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md.
  2. For testing purposes go here: http://localhost:1313/administration/reference_architectures/25k_users/
  3. Make sure all plantUML diagrams are showing up (no errors at this point).
  4. Change const imgSrc = `https://plantuml.gitlab-static.net/png/${imgData}`; to const 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).
  5. Change const s = decodeURIComponent(encodeURIComponent(element.textContent)); to const 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.

Edited by 🤖 GitLab Bot 🤖

Merge request reports