Poorly formatted HTML is inserted into Storybook errors, hiding real issues and filling the console with noise #34118

rschristian · 2026-03-12T20:46:13Z

rschristian
Mar 12, 2026

Summary

Every time a Storybook test fails, we get error messages like the following printed to the console. I've pasted the whole thing exactly as it is output:

Error: Timed out in waitFor.

Ignored nodes: comments, script, style
<html
  lang="en"
>
  <head>
    
    
    

    
    <meta
      charset="utf-8"
    />
    
    
    <title>
      storybook-test-name
    </title>
    
    
    <meta
      content="width=device-width, initial-scale=1"
      name="viewport"
    />
    

    
    

    
    
    
    <base
      target="_parent"
    />
    


    


    

  
  </head>
  

  
  <body
    class="sb-main-padded sb-show-main"
  >
    
    
    <div
      class="sb-preparing-story sb-wrapper"
    >
      
  
      <div
        class="sb-loader"
      />
      

    </div>
    


    <div
      class="sb-preparing-docs sb-wrapper"
    >
      
  
      <div
        class="sb-previewBlock"
      >
        
    
        <div
          class="sb-previewBlock_header"
        >
          
      
          <div
            class="sb-previewBlock_icon"
          />
          
      
          <div
            class="sb-previewBlock_icon"
          />
          
      
          <div
            class="sb-previewBlock_icon"
          />
          
      
          <div
            class="sb-previewBlock_icon"
          />
          
    
        </div>
        
    
        <div
          class="sb-previewBlock_body"
        >
          
      
          <div
            class="sb-loader"
          />
          
    
        </div>
        
  
      </div>
      
  
      <table
        aria-hidden="true"
        class="sb-argstableBlock"
      >
        
    
        <thead
          class="sb-argstableBlock-head"
        >
          
      
          <tr>
            
        
            <th>
              <span>
                Name
              </span>
            </th>
            
        
            <th>
              <span>
                Description
              </span>
            </th>
            
        
            <th>
              <span>
                Default
              </span>
            </th>
            
        
            <th>
              <span>
                Control 
              </span>
            </th>
            
      
          </tr>
          
    
        </thead>
        
    
        <tbody
          class="sb-argstableBlock-body"
        >
          
      
          <tr>
            
        
            <td>
              <span>
                propertyName
              </span>
              <span
                title="Required"
              >
                *
              </span>
            </td>
            
        
            <td>
              
          
              <div>
                <span>
                  This is a short description
                </span>
              </div>
              
          
              <div
                class="sb-argstableBlock-summary"
              >
                
            
                <div>
                  <span
                    class="sb-argstableBlock-code"
                  >
                    summary
                  </span>
                </div>
                
          
              </div>
              
        
            </td>
            
        
            <td>
              
          
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  defaultValue
                </span>
              </div>
              
        
            </td>
            
        
            <td>
              <button>
                Set string
              </button>
            </td>
            
      
          </tr>
          
      
          <tr>
            
        
            <td>
              <span>
                propertyName
              </span>
              <span>
                *
              </span>
            </td>
            
        
            <td>
              
          
              <div>
                <span>
                  This is a short description
                </span>
              </div>
              
          
              <div
                class="sb-argstableBlock-summary"
              >
                
            
                <div>
                  <span
                    class="sb-argstableBlock-code"
                  >
                    summary
                  </span>
                </div>
                
          
              </div>
              
        
            </td>
            
        
            <td>
              
          
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  defaultValue
                </span>
              </div>
              
        
            </td>
            
        
            <td>
              <button>
                Set string
              </button>
            </td>
            
      
          </tr>
          
      
          <tr>
            
        
            <td>
              <span>
                propertyName
              </span>
              <span>
                *
              </span>
            </td>
            
        
            <td>
              
          
              <div>
                <span>
                  This is a short description
                </span>
              </div>
              
          
              <div
                class="sb-argstableBlock-summary"
              >
                
            
                <div>
                  <span
                    class="sb-argstableBlock-code"
                  >
                    summary
                  </span>
                </div>
                
          
              </div>
              
        
            </td>
            
        
            <td>
              
          
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  defaultValue
                </span>
              </div>
              
        
            </td>
            
        
            <td>
              <button>
                Set string
              </button>
            </td>
            
      
          </tr>
          
    
        </tbody>
        
  
      </table>
      

    </div>
    


    <div
      class="sb-nopreview sb-wrapper"
    >
      
  
      <div
        class="sb-nopreview_main"
      >
        
    
        <h1
          class="sb-nopreview_heading sb-heading"
        >
          No Preview
        </h1>
        
    
        <p>
          Sorry, but you either have no stories or none are selected somehow.
        </p>
        
    
        <ul>
          
      
          <li>
            Please check the Storybook config.
          </li>
          
      
          <li>
            Try reloading the page.
          </li>
          
    
        </ul>
        
    
        <p>
          
      If the problem pe...

This is incredibly frustrating, as you can imagine. The HTML is a) completely unrelated to the error as it reflects Storybook's UI, not the UI of the page and b) takes up hundreds of lines, burying real issues.

This seemingly comes from a really bad prettyDOM implementation inlined into Storybook itself, see dist/preview/runtime.js -- this is then generating from the following line:

let prettifiedDOM = prettyDOM(container), error = new Error([message, "Ignored nodes: comments, " + config2.defaultIgnore + `
` + prettifiedDOM].filter(Boolean).join(`

`));

Right now we have to resort to patching Storybook but it'd be great if this was just removed; stringifying Storybook's UI and returning it to the user offers no value.

Additional information

No response

Create a reproduction

No response

aniruddhaadak80 · 2026-03-14T03:40:45Z

aniruddhaadak80
Mar 14, 2026

2 replies

rschristian Mar 14, 2026
Author

None of those items even remotely address the issue.

1 & 2) test failures are inevitable & will happen from time to time, "don't ever have a failing test" is silly advice
3) Users shouldn't have to override defaults, default experience shouldn't be logging a) unrelated content and b) content so poorly formatted. As it is, the logged HTML can't even provide any value as it's truncated before it even gets to user content. It's useless noise, unfortunately. Not that I really want to scan a full (wrapped) HTML doc printed to the console anyways -- loading up the UI mode makes that super easy to track down in most cases anyhow.

MrSuddenJoy Mar 14, 2026

@rschristian perfectly on-topic and 100% accurate post. In SB codebase, there are more things that shouldn't be happening.

I mean: great software, but code poorly written.

valentinpalkovic · 2026-03-15T09:13:57Z

valentinpalkovic
Mar 15, 2026
Maintainer

I am closing this discussion in favour of the created issue. Please follow along there! Thanks.

#34119

1 reply

rschristian Mar 16, 2026
Author

Thanks! I didn't have a reproduction on hand so thought I'd start with a discussion.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Poorly formatted HTML is inserted into Storybook errors, hiding real issues and filling the console with noise #34118

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Poorly formatted HTML is inserted into Storybook errors, hiding real issues and filling the console with noise #34118

Uh oh!

rschristian Mar 12, 2026

Summary

Additional information

Create a reproduction

Replies: 2 comments · 3 replies

Uh oh!

aniruddhaadak80 Mar 14, 2026

Uh oh!

Uh oh!

rschristian Mar 14, 2026 Author

Uh oh!

MrSuddenJoy Mar 14, 2026

Uh oh!

valentinpalkovic Mar 15, 2026 Maintainer

Uh oh!

rschristian Mar 16, 2026 Author

rschristian
Mar 12, 2026

Replies: 2 comments 3 replies

aniruddhaadak80
Mar 14, 2026

rschristian Mar 14, 2026
Author

valentinpalkovic
Mar 15, 2026
Maintainer

rschristian Mar 16, 2026
Author