fix: improve error message for invalid icon imports#4062
fix: improve error message for invalid icon imports#4062
Conversation
Preview deployments |
backspace
left a comment
backspace
left a comment
There was a problem hiding this comment.
Is it possible to show the actual incorrect import? But regardless, this is a huge DX improvement 🎉
There was a problem hiding this comment.
Pull request overview
This pull request improves error messages when card definitions have invalid or missing static icon imports. Previously, when a card's static icon property resolved to undefined (e.g., from a bad import), the prerenderer produced a cryptic error about missing child elements. This PR adds validation in the icon route to detect this case early and provide a clear, actionable error message.
Changes:
- Added guard in icon route's model hook to validate icon component exists before returning
- Added test fixture and test case for bad icon import scenario
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/host/app/routes/render/icon.ts | Added validation to check if cardTypeIcon returns undefined and throw descriptive error |
| packages/realm-server/tests/prerendering-test.ts | Added test fixture with undefined icon and test case verifying error message |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| let component = cardTypeIcon(instance); | ||
| if (!component) { | ||
| throw new Error( | ||
| `static icon is undefined — check that the import resolves to a valid icon component`, |
There was a problem hiding this comment.
lets improve this message by including in the error the instance's constructor name. that will help who ever read the error to know which card def has the bad icon definition
Problem
When a card definition has a static icon that is a bad named import (e.g.
import { NonExistent } from '@cardstack/boxel-icons/non-existing-path/nope'), JavaScript silently resolves it to undefined. This caused the prerenderer to produce a cryptic[data-prerender] has no child element to captureerror, giving developers or ai-bot no actionable information.Fix
Added a guard in the render/icon route's model() hook that checks whether
cardTypeIcon()resolved to a valid component. If not, it throws a descriptive error:static icon is undefined — check that the import resolves to a valid icon component. Because Ember is still intact at this point, the error propagates via the parent render route's error action hook into the render.error route, which renders a[data-prerender-error]element. The prerenderer'scaptureResultpicks this up and surfaces the message in the error document.Before
After
