I’m trying to get source maps working with Sentry for a reactjs application. I’m using webpack in conjunction with the SentryWebpackPlugin. The relevant configurations in the webpack config look like this:
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
const SentryOptions = {
// sentry-cli configuration
authToken: process.env.SENTRY_AUTH_TOKEN,
project: process.env.SENTRY_PROJECT,
// webpack specific configuration
include: pathLibrary.resolve(__dirname, '..')
};
module.exports = {
devtool: 'hidden-source-map',
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js',
publicPath: '',
path: pathLibrary.resolve(__dirname, '..', 'public'),
sourceMapFilename: '../tmp/sourcemaps/[file].map'
}
}
if (DEPLOY_ENVS.includes(env)) {
module.exports.plugins.push(new SentryWebpackPlugin(SentryOptions));
}
When I build and deploy the application, I can indeed see source maps and sources in Sentry, however, the code shown on the issues page does not appear readable. This leads me to believe that I have done something incorrectly with naming the output files or source maps.
Another thing potentially worth mentioning is that the bundled application is hosted on and referenced from S3, in a different directory structure than what is built in webpack (ie, not /public).
I guess I’m trying to understand how my webpack output and sourcemaps should be named so that sentry can map errors to the right place.
