Vite dist script wrongly categorized as 'Source'

[hanayashiki]

I couldn't get some of files' source map matched by Sentry, and the upload-sourcemap report is below:

Source Map Upload Report
  Scripts
    ~/TestError.35c9f74d.js
    ~/bookingInquiry.5eecc0b6.js
  Minified Scripts
    ~/AboutCompany.76f7f1f0.js (sourcemap at AboutCompany.76f7f1f0.js.map)
    ~/AccountManagerForm.89f7b3ca.js (sourcemap at AccountManagerForm.89f7b3ca.js.map)
    ~/AddStaff.e88216d2.js (sourcemap at AddStaff.e88216d2.js.map)
    ~/Alert.d5071109.js (sourcemap at Alert.d5071109.js.map)
  ...

Here the file TestError.35c9f74d.js and bookingInquiry.5eecc0b6.js is not categorized as 'Minified Scripts'. I doubt this is the reason why Sentry does not display the source file in the error page.

To find out why, I read the source code of sentry-cli: https://github.com/getsentry/sentry-cli/blob/14a781ba20c4ac49797f4e4510e3e34ebb298d91/src/utils/sourcemaps.rs#L220

and find the basic logic (sorry but this is in Rust) of differentiating 'Scripts' (not source-mapped) and 'Minified Scripts' (get source-mapped):

        for (url, mut file) in self.pending_sources.drain() {
            pb.set_message(url.to_owned());
            let ty = if sourcemap::is_sourcemap_slice(&file.contents) {
                SourceFileType::SourceMap
            } else if file
                .path
                .file_name()
                .and_then(OsStr::to_str)
                .map(|x| x.ends_with("bundle"))
                .unwrap_or(false)
                && sourcemap::ram_bundle::is_ram_bundle_slice(&file.contents)
            {
                SourceFileType::IndexedRamBundle
            } else if file
                .path
                .file_name()
                .and_then(OsStr::to_str)
                .map(|x| x.contains(".min."))
                .unwrap_or(false)
                || is_likely_minified_js(&file.contents)
            {
                SourceFileType::MinifiedSource
            } else if is_hermes_bytecode(&file.contents) {
                // This is actually a big hack:
                // For the react-native Hermes case, we skip uploading the bytecode bundle,
                // and rather flag it as an empty "minified source". That way, it
                // will get a SourceMap reference, and the server side processor
                // should deal with it accordingly.
                file.contents.clear();
                SourceFileType::MinifiedSource
            } else {
                SourceFileType::Source
            };

It seems since vite does not name files as '.min.js', the function uses is_likely_minified_js to make the judgement. And some minified files can be wrongly categorized as 'Source'.

It seems to make this all work, we need to avoid calling is_likely_minified_js, to do to we need to renaming all chunks from '.js' to '.min.js'. But vite seems don't provide us with such an option.

[hanayashiki]

The workaround is, in vite.config.js:

    build: {
      ...
      rollupOptions: {
        output: {
          entryFileNames: 'assets/[name].[hash].min.js',
          chunkFileNames: 'assets/[name].[hash].min.js',
        },
      },
    },

The above config renames the chunks from '[name].[hash].js' to '[name].[hash].min.js'. I can't find any doc on this, but it works for me.

Now sentry views all the chunks correctly as minified sources.

[ikenfin]

Hi, @hanayashiki
Thank you for this investigation👍
I'll put a "workaround" label on this thread and will add a link in readme.
I think you should put some notes about this problem in sentry-cli repo, or even in is-likely-minified to get better support and maybe they will release fixes.