Search code examples
storybook

How are you supposed to get useful errors in Storybook?


When a component errors in storybook you only get the line number where it died in the main.iframe.bundle.js file. How can I get it to give me the line number in the original source file? Is there an option to have it generate & use some kind of sourcemap?


Solution

  • Are you using typescript ? Are you using React or something else ?

    On my storybook, I use React with Typescript. If I put an error like that:

    export function BookList (p: BookListProps) {
      // ...
    
      throw new Error('hey')
    
      return (
        //...
      );
    }
    

    I have this error embed in the document (is that what you meant ?):

    unintelligible error

    But I do have something useful in the console:

    Useful error

    When clicking on the link, it open the sources panel in chrome dev tools.

    source panel