Sentry-cli: "could not determine a source map reference" - how to solve

[mrnagydavid]

Hi,

Please, help me understand what "could not determine a source map reference" means and how it can be remedied.

I am trying to upload source maps to Sentry with sentry-cli. It does work up the point that the inline sourcemaped js files are visible under my project / releases / artifacts. We transpile them from .ts with tsc.

But after the upload is done, sentry-cli lists every uploaded file with the warning like e.g.

- warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/tests/context.js.)
~/tests/db-connection.js (sourcemap at data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGItY29ubmVjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIvIiwic291cmNlcyI6WyJ0ZXN0cy9kYi1jb25uZWN0aW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7QUFBQSxxQ0FBNEU7QUFFNUU7O1FBSUUsTUFBTSxPQUFPLEdBQUcsTUFBTSw4QkFBb0IsRUFBRSxDQUFBO1FBQzVDLE9BQU8sMEJBQWdCLG1CQUNsQixPQUFPLElBQ1YsUUFBUSxFQUFFLENBQUMsc0JBQXNCLENBQUMsRUFDbEMsT0FBTyxFQUFFLEtBQUssSUFDZCxDQUFBO0lBQ0osQ0FBQztDQUFBO0FBVkQsNERBVUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb25uZWN0aW9uLCBjcmVhdGVDb25uZWN0aW9uLCBnZXRDb25uZWN0aW9uT3B0aW9ucyB9IGZyb20gJ3R5cGVvcm0nXG5cbmV4cG9ydCBhc3luYyBmdW5jdGlvbiBjcmVhdGVDb25uZWN0aW9uRm9yVGVzdHMoKTogUHJvbWlzZTxDb25uZWN0aW9uPiB7XG4gIC8vIENoYW5nZSB0aGUgb3B0aW9ucyBiZWNhdXNlOlxuICAvLyAtIHRlc3RzIHJ1biBvbiB0b3Agb2YgLnRzIGFuZCBub3QgLmpzIGZpbGVzXG4gIC8vIC0gZGlzYWJsZSBsb2dnaW5nXG4gIGNvbnN0IG9wdGlvbnMgPSBhd2FpdCBnZXRDb25uZWN0aW9uT3B0aW9ucygpXG4gIHJldHVybiBjcmVhdGVDb25uZWN0aW9uKHtcbiAgICAuLi5vcHRpb25zLFxuICAgIGVudGl0aWVzOiBbJ3NyYy9kYi9lbnRpdGllcy8qLnRzJ10sXG4gICAgbG9nZ2luZzogZmFsc2UsXG4gIH0pXG59XG4iXX0=)

(We get this warning for every uploaded file, not just this one in the example.)

The steps I took:
1) tsconfig.json

"sourceRoot": "/",
"inlineSourcemap": true,
"inlineSources": true

As it is suggested in https://docs.sentry.io/clients/node/typescript/

2) Using codeship I use getsentry/sentry-cli:latest to run sentry-cli
The project root is attached to /work of the image.

sentry-cli --auth-token "$SENTRY_AUTH_TOKEN" releases -o "$SENTRY_ORG" -p "$SENTRY_PROJECT" new "$SENTRY_VERSION"
sentry-cli --auth-token "$SENTRY_AUTH_TOKEN" releases -o "$SENTRY_ORG" -p "$SENTRY_PROJECT" files "$SENTRY_VERSION" upload-sourcemaps --validate ./build
sentry-cli --auth-token "$SENTRY_AUTH_TOKEN" releases -o "$SENTRY_ORG" -p "$SENTRY_PROJECT" set-commits "$SENTRY_VERSION" --auto
sentry-cli --auth-token "$SENTRY_AUTH_TOKEN" releases -o "$SENTRY_ORG" -p "$SENTRY_PROJECT" finalize "$SENTRY_VERSION"
sentry-cli --auth-token "$SENTRY_AUTH_TOKEN" releases -o "$SENTRY_ORG" -p "$SENTRY_PROJECT" deploys "$SENTRY_VERSION" new -e "$SENTRY_ENVIRONMENT"

As it is suggested in https://docs.sentry.io/learn/cli/releases/

3) I checked if the sourcemaps are okay with https://sourcemaps.io ("brought to us by Sentry") with the result of Bingo. Everything looks good.

I thought that I might need to attach the original source code as well, but then I found this:
Sentry requires both source map(s) and your original source files in order to perform reverse transformations. If you choose NOT to inline your source files, you must make those source files available to Sentry in addition to your source maps (see below). https://docs.sentry.io/clients/javascript/sourcemaps/
Which tells me that uploading the transpiled .js files with inline sourcemaps should be enough.

Thanks,
David

[mrnagydavid]

The original issue "could not determine..." was my fault. It happened because I also turned on "inlineSourceMap" with typescript. Having it disabled the source map upload succeeds without any warnings.

This closes this issue.

However, the uploaded sourcemaps are not used by Sentry, so when an error happens, the Sentry website shows "Source code was not found for app:///..." and it is indeed not mapped to the original source. But that is another issue.

[jayarjo]

@mrnagydavid were you able to solve "another issue" of Sentry not being able to use sourcemaps?

[mrnagydavid]

@jayarjo No. I took the remaining issue here, but there we had no success either. As you can see from the last comments.

[gitofrenlu]

how to resolve? i have got the same error

[flh0909]

@gitofrenlu > how to resolve? i have got the same error

upload-sourcemaps options --no-sourcemap-reference

[pavrda]

+1

[Draichi]

+1

[hdlim15]

Had this same issue and wanted to share what my problem and solution was. Hope this helps some of you!

BEFORE:

output: {
    path: path.join(__dirname, 'media/bundles/'),
    // do not use chunk hash and do not minify for development
    filename: isDevelopment ? '[name].js' : '[name].[chunkhash].js',
    chunkFilename: isDevelopment ? '[name].js' : '[name].[chunkhash].js',
    // Use [contenthash] for sourceMap so that js and css source map files are different
    sourceMapFilename: isDevelopment ? '[name].js.map' : '[name].[contenthash].js.map',  // This is where my problem was
},

// .....

new MiniCssExtractPlugin({
    filename: isDevelopment ? '[name].css' : '[name].[contenthash].css',
    chunkFilename: isDevelopment ? '[name].css' : '[name].[contenthash].css',
}),
new UglifyJsPlugin({
    parallel: true,
    sourceMap: true,
    uglifyOptions: {
        compress: { collapse_vars: false, },
        ecma: 5,
        output: { comments: false, },
    },
}),
new SentryWebpackPlugin({
    ignoreFile: '.sentrycliignore',
    ignore: ['node_modules', 'webpack.config.js'],
    release: codeVersion,
    urlPrefix: '~/media/bundles',
     include: './media/bundles',
    configFile: `./settings/sentry/${codeEnv}.properties`,
}),

The key thing to note here is that the sourceMapFilename was using [contenthash]. I had originally written this to fix a problem where js and css files from the same chunk were writing to the same source map file, giving me a "Multiple assets emit different content to the same filename" warning.

The solution:

sourceMapFilename: isDevelopment ? '[name].js.map' : '[file].map',

Using [file] is the recommended approach for source map filenames according to the Webpack documentation. This fixed my css map issue, as well as fixing the pesky "could not determine a source map reference" warning.

[Frank-zf]

this appear after executing "sentry-cli releases files 1.0.0 upload-sourcemaps .nuxt/dist/client --url-prefix ~/_nuxt"

I tried to change webpack config, but you know, it's useless. How can I fix this?

[kamilogorek]

@Frank-zf it's not sentry-cli issue. Nuxt has some known issues with producing sourcemap files. See: https://github.com/nuxt/nuxt.js/issues/6944
Also see some possible fixes (with nuxt config changes) here: https://github.com/nuxt-community/sentry-module/issues/31

[simeonpashley]

I came here Mar 2021 from a search result looking for "Could not auto-detect referenced sourcemap" and this works for me too.

The solution:

sourceMapFilename: isDevelopment ? '[name].js.map' : '[file].map',

Using [file] is the recommended approach for source map filenames according to the Webpack documentation. This fixed my css map issue, as well as fixing the pesky "could not determine a source map reference" warning.

As per the answer, my specific variation was on the DEV side BUT the PRODUCTION side using [file].map is the important fix.

      sourceMapFilename: env.dev ? '[name].[hash].js.map' : '[file].map',