fix(node): suppress JSDOM CSS parse errors during story collection#836
Open
50rayn wants to merge 1 commit into
Open
fix(node): suppress JSDOM CSS parse errors during story collection#83650rayn wants to merge 1 commit into
50rayn wants to merge 1 commit into
Conversation
|
|
✅ Deploy Preview for histoire-examples-svelte3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-controls ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-examples-vue3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request introduces a custom JSDOM virtual console to suppress CSS parsing errors triggered by Tailwind directives, which previously cluttered the output. It also adds unit tests to verify this behavior and ensure that unhandled script exceptions are still correctly reported. Feedback suggests that the error handler should be updated to use the detail property instead of cause to properly capture stack traces and provide better context for non-CSS errors, matching JSDOM's standard logging behavior.
Comment on lines
+17
to
+25
| virtualConsole.on('jsdomError', (err: Error & { type?: string, cause?: { stack?: string } }) => { | ||
| if (err.type === JSDOM_ERROR_CSS_PARSING) return | ||
| if (err.type === JSDOM_ERROR_UNHANDLED_EXCEPTION) { | ||
| globalThis.console.error(err.cause?.stack ?? err.message) | ||
| } | ||
| else { | ||
| globalThis.console.error(err.message) | ||
| } | ||
| }) |
Contributor
There was a problem hiding this comment.
The manual jsdomError handler does not fully mirror JSDOM's default forwardTo behavior, which may lead to missing information in logs.
- JSDOM uses the
detailproperty (notcause) to store the original error object forunhandled-exception. Usingcausewill likely result inundefinedin most JSDOM versions, causing the stack trace to be lost. - For other error types, JSDOM's default behavior is to log both the
messageand thedetailobject (e.g.,console.error(message, detail)). The current implementation only logs the message, which might omit crucial context for errors like resource loading failures.
Updating the handler to use detail and include it in the output will better align with JSDOM's standard error reporting.
Suggested change
| virtualConsole.on('jsdomError', (err: Error & { type?: string, cause?: { stack?: string } }) => { | |
| if (err.type === JSDOM_ERROR_CSS_PARSING) return | |
| if (err.type === JSDOM_ERROR_UNHANDLED_EXCEPTION) { | |
| globalThis.console.error(err.cause?.stack ?? err.message) | |
| } | |
| else { | |
| globalThis.console.error(err.message) | |
| } | |
| }) | |
| virtualConsole.on('jsdomError', (err: Error & { type?: string, detail?: any }) => { | |
| if (err.type === JSDOM_ERROR_CSS_PARSING) return | |
| if (err.type === JSDOM_ERROR_UNHANDLED_EXCEPTION) { | |
| globalThis.console.error(err.detail?.stack ?? err.detail?.message ?? err.message) | |
| } | |
| else { | |
| globalThis.console.error(err.message, err.detail) | |
| } | |
| }) |
histoire
@histoire/app
@histoire/controls
@histoire/plugin-nuxt
@histoire/plugin-percy
@histoire/plugin-screenshot
@histoire/plugin-svelte
@histoire/plugin-vue
@histoire/shared
@histoire/vendors
commit: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #501. Plausibly closes #557 and #466 (same root cause).
JSDOM's CSS parser doesn't understand Tailwind directives (
@tailwind,@apply,@theme), CSS container queries, modern selectors, etc. When story collection mounts user stylesheets via setup files, JSDOM emits ajsdomErrorof type'css-parsing'whose payload includes the entire stylesheet — extremely noisy and not actionable, since stories don't rely on rendered styles during collection.VirtualConsole.forwardTo()defaults to forwarding everyjsdomErrortoconsole.error, hence the spam.This change disables blanket forwarding (
{ jsdomErrors: 'none' }) and re-attaches a manual listener that dropscss-parsingand forwards everything else, mirroring jsdom's default behavior forunhandled-exceptionand other types.Test plan
packages/histoire/src/node/__tests__/dom-env.spec.ts:console.errorcalls<script>that throws →console.errorIS called with the stackpnpm testpasses (9/9)