stylus icon indicating copy to clipboard operation
stylus copied to clipboard

[Bug] Uncaught exception when running Storybook on localhost

Open thany opened this issue 1 year ago • 5 comments

Bug Report

Bug Description

When running an instance of Storybook on localhost, Stylus outputs this to the console:

uncaught exception: Object

No source file or line number is on the right. Also can't expand it for more information. This is literally all there is to it. It always outputs 6 of these errors in rapid succession, once per full page load.

This doesn't happen on other things running on localhost, so it's not related to it being localhost. I also can't reproduce it on some of the showcases that are publibly available. So my guess it's a combination of running Storybook AND it running on localhost.

But it is quite definitely due to this addon, because disabling it makes the errors go away, and re-enabling stylus brings back these errors.

Screenshots

image

System Information

  • OS: Windows 10
  • Browser: Firefox 121
  • Stylus Version: 1.5.41

Additional Context

Unfortunately, Storybook is not something you can just download and run. It's a developer's tool that needs to be installed into a pre-existing project. And I'm not even sure if this bug will occur in every such project. So maybe I just need some pointers to how to provide more information - for instance, how do I made it output a trace on these uncaught exceptions. The debugger refuses to stop when enabling "pause on exceptions", probably because it happens inside an addon.

I think it's best to start with how I can make stylus also output a trace, or at least a source file & line number, right?

thany avatar Jan 10 '24 11:01 thany

I can't guess what's wrong based on this information. Showing errors that aren't attributed to any line is a known problem in Firefox's implementation of extension content scripts. Try looking at the browser console (Ctrl-Shift-Alt-i) in multiprocess mode.

tophf avatar Jan 10 '24 11:01 tophf

As for tracing, you can add logging breakpoints in devtools at various points of our two content scripts (apply.js and style-injector.js). To see the scripts you'll need to enable "addon and chrome debugging" checkbox in devtools options.

tophf avatar Jan 10 '24 11:01 tophf

I have enabled chrome and addon debugging: image

And then in the remote debugger, in multiprocess mode: image

And I verified that chrome and addon debugging is still enabled in the remote debugger.

As for breakpoints, can you be more specific? Where can I find these files, and what are good locations to place breakpoints to have any reasonable chance of hitting them?

thany avatar Jan 11 '24 10:01 thany

No new info in the console.

As for breakpoints, I don't know where to place them as I don't know what might be causing the error, so try doing it in every function, then once you found which one is causing it, add more breakpoints inside. There are many tutorials on how to add breakpoints in firefox devtools, here's the top search result for one: https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/set_a_breakpoint/index.html

tophf avatar Jan 11 '24 11:01 tophf

image

tophf avatar Jan 11 '24 11:01 tophf