search

crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.74k stars 182 forks source link

Generate sourcemaps #260

Open evanb2 opened 2 years ago

evanb2 commented 2 years ago

Describe the problem

When using error reporting tools like Sentry/Bugsnag/Rollbar, etc. the stack trace is much more readable if you upload your sourcemaps.

Currently, when setting build.sourcemap = true in vite.config.js the following warning is logged:

Sourcemap is likely to be incorrect: a plugin (crx:manifest) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help.

Describe the proposed solution

Provide necessary sourcemap from the transforms RPCE performs. At the very least for non-development builds, not necessary for --watch mode.

Alternatives considered

Unaware of any workarounds outside of RPCE providing them.

Importance

would make my life easier

jacksteamdev commented 2 years ago

Sourcemap is likely to be incorrect: a plugin (crx:manifest) was used to transform files, but didn't generate a sourcemap for the transformation.

@evanb2 I think this warning is likely benign, but we need to eliminate it.

Are you seeing source maps in dist with build.sourcemap = true? I ask because the transformed file in question is the manifest.json output file. Other sourcemaps should be correct if something else doesn't prevent their output.

The plugin crx:manifest runs manifest.json through Rollup as a JS file, similar to how Vite handles HTML files during the build. This pattern allows plugins to transform the manifest. RPCE converts the JS file to a manifest.json during the render stage, then removes it from the output files.

@evanb2 Unrelated, but there's probably a demand for a solid how-to guide on safely using Sentry/Bugsnag/Rollbar with a Chrome Extension (the Chrome Web Store can get picky with stuff like this). Something to think about 👍

evanb2 commented 2 years ago

@jacksteamdev Thanks for the great explanation! I'm by no means a build tools expert lol.

Are you seeing source maps in dist with build.sourcemap = true?

Yes they are being generated, was purely going off of the warning. Is there a way to check the sourcemaps are correct? I suppose I could try uploading them to Sentry and see if it gives readable stacktraces.

Unrelated, but there's probably a demand for a solid how-to guide on safely using Sentry/Bugsnag/Rollbar with a Chrome Extension (the Chrome Web Store can get picky with stuff like this).

Our extension is currently marked as a Beta release, but we had no issues passing review after implementing Sentry. That being said I think there is definitely a need for a guide on how to properly setup these services in an Ext. For example, Sentry has Vue-specific logging/tracing however I'm not sure it's working as expected after following their setup docs. Also, it looks like we are somehow catching errors that are happening on the webpage the content-script is running in which creates some noise. But I don't have much experience setting up a service like this so could all be developer error 😆

Toumash commented 2 years ago

React here, sentry works on the chrome web store production no problem. Setup from official docs only. Current project setup on the base of https://github.com/kryptokinght/react-extension-boilerplate, but looking to switch to this repo - so far everything works so far but not https://github.com/extend-chrome/rollup-plugin-chrome-extension/issues/262

jacksteamdev commented 1 year ago

I've added inline sourcemap support for content scripts in #701

andresgutgon commented 1 year ago

@evanb2 I think this can be closed no?