Browser: Disconnect on npm package and web server assets

[mayfield]

I'm feeling really dumb here. All the docs I've seen are saying to just npm install @sentry/browser then put an ES6 import stmt in your browser JS with @sentry/... as the module. This seems to be skipping over ALL the details between the node module installation and relating those contents a web server (or just file structure in general).

When I poke around in the node_modules/@sentry/browser/dist I see...

:; ls
backend.d.ts		eventbuilder.d.ts	helpers.d.ts		integrations/		stack-parsers.js.map
backend.d.ts.map	eventbuilder.d.ts.map	helpers.d.ts.map	sdk.d.ts		transports/
backend.js		eventbuilder.js		helpers.js		sdk.d.ts.map		version.d.ts
backend.js.map		eventbuilder.js.map	helpers.js.map		sdk.js			version.d.ts.map
client.d.ts		exports.d.ts		index.d.ts		sdk.js.map		version.js
client.d.ts.map		exports.d.ts.map	index.d.ts.map		stack-parsers.d.ts	version.js.map
client.js		exports.js		index.js		stack-parsers.d.ts.map
client.js.map		exports.js.map		index.js.map		stack-parsers.js

I can (and probably will) start digging into all these files to figure out which ones I need to serve up (and also eliminate from my build process as this is a dual purpose electron app that loads files via electron (with all the isolation/sandbox options on) and via an express webserver for remote access to the same windows.

Typically, I'd expect some context like, "Have your web server serve the node_modules/@sentry/browser/dist/esm folder and then in your ES6 browser module load it a la import * as Sentry from '/my/servers/path/to/aformentioned/sentry/esm/folder/browser_or_something.mjs';

Sort of like the integration page for Chart.js https://www.chartjs.org/docs/latest/getting-started/integration.html

Thanks in advance for any undumbing you can provide.

[mayfield]

Just a quick follow up on my learnings after poling around more. It seems very likely that every source of documentation is assuming the end user is using bundling tools like webpack. I understand that these tools are popular but it would probably be worth mentioning in the docs that there is a presumption of certain tooling practices. I use native ES6 modules in a variety of places and it's a bit of a bummer that I can't use them with @sentry/browser despite the docs suggesting that this is the favored integration.

With respect to my questions about finding the "files to serve". I did find that the build/ folder of @sentry/browser contains static bundles ready for browser use. The one downside I found is that they must be included with a standard script tag and can't be used directly from a module.

ES6 modules can import regular scripts and as long as the code has some sort of side effect (i.e. it pollutes window, global, globalThis or self). In the case of the bundled @sentry/browser code, it's doing all its assignments to a top-level var Sentry. In a non-module context this var would be globally scoped, but it is not when imported a la., import 'path/to/build/bundle.es6.js';

I'm not sure if that is a design choice of webpack (which appears to be the internally used bundler) or if that is part of the Sentry code itself. Heck it might even be intentional. But as an end user it would have been super neat to just be able to use native import syntax on a file on some CDN or from your npm package. This is how I incorporate many other web dependencies.

In the mean time I'll just hack the gibson, err I mean the bundle to replace var Sentry with globalThis.Sentry as I continue with testing and prototyping. 😄