🎨 Add Mr.Jack svg to NetworkError

[hoshinotsuyoshi]

User description

Summary

mobile	desktop

message examples

1. format error:

/erd/p/raw.githubusercontent.com/mastodon/mastodon/refs/heads/main/Gemfile

Hmm, it's silent here...
Our signal's lost in the void! No access at this time..
Please specify the format in the URL query parameter `format`

2. DNS error

/erd/p/no-found/path/to/file

Hmm, it's silent here...
TypeError: fetch failed. Our signal's lost in the void! No access at this time..
Double-check the transmission link https://no-found/path/to/file and initiate contact again.

3. remote server 404

/erd/p/raw.githubusercontent.com/liam-hq/liam/refs/heads/main/no-found

Hmm, it's silent here...
HTTP status is 404: Not Found.
Double-check the transmission link https://raw.githubusercontent.com/liam-hq/liam/refs/heads/main/no-found and initiate contact again.

Related Issue

Changes

Testing

Other Information

---

PR Type

Enhancement, Bug fix

---

Description

• Introduced a new MrJack SVG component for enhanced error visuals.

• Improved NetworkErrorDisplay with structured error messages and instructions.

• Refactored error handling logic to include optional instruction field.

• Updated CSS for better alignment and responsive design in error displays.

---

Changes walkthrough 📝

	Relevant files
Enhancement	erdViewer.tsx Add `instruction` field to `ErrorObject` type                        frontend/apps/erd-web/app/erd/p/[...slug]/erdViewer.tsx Added optional instruction field to ErrorObject type. Updated type definitions for error handling. +1/-0      ErrorDisplay.tsx Update `ErrorDisplay` for conditional rendering                    frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay/ErrorDisplay.tsx Added conditional rendering for NetworkError specific display. Updated component structure for better error handling. +9/-8      MrJack.tsx Add `MrJack` SVG component for error visuals                          frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay/MrJack.tsx Introduced MrJack SVG component for error visuals. Added detailed SVG illustration for enhanced UI. +376/-0  NetworkErrorDisplay.tsx Integrate `MrJack` SVG and refactor error messages              frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay/NetworkErrorDisplay.tsx Integrated MrJack SVG into NetworkErrorDisplay. Refactored error message structure for better readability. +13/-16  NetworkErrorDisplay.module.css Update CSS for improved error display design                          frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay/NetworkErrorDisplay.module.css Updated styles for better alignment and responsiveness. Added new classes for structured error message display. +47/-23
Bug fix	page.tsx Refactor error handling logic and messages                              frontend/apps/erd-web/app/erd/p/[...slug]/page.tsx Enhanced error handling logic with instruction messages. Refactored error messages for clarity and consistency. +20/-7
Documentation	fresh-shirts-stare.md Add changeset for patch updates                                                    .changeset/fresh-shirts-stare.md Added changeset for patch updates to @liam-hq/erd-core and @liam-hq/cli. Documented addition of MrJack SVG to NetworkError. +6/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[changeset-bot]

🦋 Changeset detected

Latest commit: 65885de

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@liam-hq/erd-core	Patch
@liam-hq/cli	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[hoshinotsuyoshi]

Hmm, it's silent here...

[qodo-merge-pro-for-open-source]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Error Handling The error display component assumes errors array is not empty and directly accesses errors[0] without proper null/undefined checks, which could cause runtime errors if errors array is empty. {errors[0] && ( <div className={styles.message}> <div className={styles.inner}> <div className={styles.silentHere}>Hmm, it's silent here...</div> <div className={styles.errorMessage}>{errors[0].message}</div> <div className={styles.instruction}>{errors[0].instruction}</div> </div> </div> )}

[qodo-merge-pro-for-open-source]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Add error boundary for SVG Add error boundary to handle potential rendering failures of the MrJack SVG component frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay/NetworkErrorDisplay.tsx [15-21] export const NetworkErrorDisplay: FC<Props> = ({ errors }) => { return ( <div className={styles.wrapper}> - <div> - <MrJack /> - </div> + <ErrorBoundary fallback={<div>Error loading illustration</div>}> + <div> + <MrJack /> + </div> + </ErrorBoundary> {errors[0] && ( Apply this suggestion Suggestion importance[1-10]: 7 __ Why: Adding an error boundary is a good defensive programming practice to gracefully handle potential SVG rendering failures, improving the application's resilience and user experience.	Medium

[MH4GF]

LGTM 👍🏻 Thanks!!

[MH4GF]

If possible, I want to add following link: https://liambx.com/docs/web#appendix-schema-format-options
But if it's too much trouble to implement, it doesn't have to be.

[hoshinotsuyoshi]

That's true! However, I think this would require a bit of effort, and there will likely be very few cases where this actually applies. I’m sorry, but I believe it’s more reasonable not to address this for now!

[MH4GF]

@hoshinotsuyoshi I think so too!! Let's proceed as is.