No sourcemap in Sentry

[jerbob92]

I followed the readme closely (but had to make changes to make it work in the current NS setup), but I can't get sourcemaps to show up in Sentry. I'm 100% certain the source maps are uploaded (I validated in Sentry), and I'm also 100% sure that the release and dist in the Webpack sentryWebpackPlugin match up with what I configure in the plugin.

But it still ends up like this in Sentry:

Any idea what I can do here? I also tried with and without rewriting. My webpack looks like this now:

    if (env.uploadSourceMap) {
        webpack.chainWebpack((config) => {
            config.devtool = false;

            // Write away sourcemaps outside build dir.
            const customSourceMapDevToolPluginInstance = new SourceMapDevToolPlugin({
                append: `\n//# sourceMappingURL=[name].js.map`,
                filename: '../../../../../../sourceMap/[name].js.map'
            });
            config.plugin('SourceMapDevToolPlugin').use(customSourceMapDevToolPluginInstance);

            const customSentryWebpackPluginInstance = sentryWebpackPlugin({
                rewrite: true,
                release: {
                    name: `${appID}@${appVersion}+${buildNumber}`,
                    dist: `${buildNumber}.${platform}`,
                    setCommits: {
                        auto: true
                    }
                },
                ignoreFile: '.sentrycliignore',
                include: [join(__dirname, `platforms/sourceMap`)],
                telemetry: false
            });

            config.plugin('sentryWebpackPlugin').use(customSentryWebpackPluginInstance);
        });
    }

[farfromrefug]

@jerbob92 cant really say why it does not work in your case.
Here is a an example which is working with my self hosted sentry https://github.com/Akylas/OSS-DocumentScanner/blob/master/app.webpack.config.js#L556

[jerbob92]

Thanks! I think that did give me some hints, it also seems like I was wrong in what it uploads, it only seems to upload the JS right now, not the source map. I think it's not able to resolve the sourcemaps right now because I have them placed in a different directory, with the sourcemaps option that should be fixed :)

[jerbob92]

I discovered the following:

• With assets you're only supposed to give js files, not the sourcemaps
• The plugin will only detect the sourcemaps if they are in the same folder as the source file, or if the path in sourceMappingURL is absolute
• If you do not want to publish the sourcemap, you don't want them in the build ofcourse, so you would use filesToDeleteAfterUpload, but for some reason that breaks the plugin (maybe it needs the files after deleting?)

So my current solution is:

            const sourcemapDir = join(__dirname, `platforms/sourceMap`);

            // Write away sourcemaps outside build dir.
            const customSourceMapDevToolPluginInstance = new SourceMapDevToolPlugin({
                append: `\n//# sourceMappingURL=${sourcemapDir}/[name].js.map`,
                filename: '../../../../../../sourceMap/[name].js.map'
            });
            config.plugin('SourceMapDevToolPlugin').use(customSourceMapDevToolPluginInstance);

And then not setting any assets. This will keep the sourcemap out of the build (will be in platforms/sourceMap and still allows the plugin to resolve them.

I did notice that the source mapping won't work correctly for captureMessage, but it does for normal errors.

[farfromrefug]

@jerbob92 if it works for you good. Now I can way in my apps it works as expected even if the sourcemaps are not in the same folder. Not sure what the difference might come from.
I using latest sentry self hosted

[jerbob92]

@farfromrefug but in your linked example it does put the source map in the same dir as the JS, so probably they do end up in the app build. I also use latest self-hosted Sentry.

[jerbob92]

This is the final issue I'm trying to solve:

Sentry.captureMessage:

As you can see, this doesn't have the sourcemap, probably because the stack is incorrect?

Capturing exceptions (just a random throw somewhere) with a custom Angular ErrorHandler:

This one has a stack but it has the stack of where I execute Sentry.captureException. Any idea what I can do to improve this? I would expect it to take the stack of the err object.

[farfromrefug]

@jerbob92 it must come from the stack "filename" format. hard to say without being in front. But same the sample code i shared works for ios/android so you can look at it.
Maybe this could be important too https://github.com/Akylas/OSS-DocumentScanner/blob/master/app/utils/sentry.ts#L17

[VepretskiyD]

I tried everything from this thread as well as every example the maintainers provided (this repo's README, the NS Sentry doc, the example app repo). It didn't work because only .js files were uploaded to Sentry, the .map files were generated but ignored by Sentry.
Originally, I had only .js files in Sentry

Next, I managed to upload .js and .map files

It started working only when the Debug ID was added to the source maps

In my case, only this version worked (at least locally).

  webpack.chainWebpack((config) => {
    const isStoreBuild = !!env.production
    const sentryDev = !isStoreBuild

    const platform = webpack.Utils.platform.getPlatformName()
    const projectSlug =
      platform === 'android'
        ? process.env.SENTRY_PROJECT_SLUG_ANDROID
        : process.env.SENTRY_PROJECT_SLUG_IOS
    const versionString =
      platform === 'android'
        ? readFileSync(
            resolve(__dirname, 'app/App_Resources/Android/app.gradle'),
            'utf8',
          ).match(/versionName\s+"([^"]+)"/)[1]
        : parse(
            readFileSync(
              resolve(
                __dirname,
                `app/App_Resources/${platform === 'visionos' ? 'visionOS' : 'iOS'}/Info.plist`,
              ),
              'utf8',
            ),
          )['CFBundleShortVersionString']

    const SENTRY_DIST = sentryDev ? `dev-${Date.now()}` : `${Date.now()}`
    const SENTRY_RELEASE = process.env.SENTRY_RELEASE ? process.env.SENTRY_RELEASE : versionString
    // const SENTRY_RELEASE = sentryDev ? SENTRY_DIST : versionString

    config.plugin('DefinePlugin').tap((args) => {
      Object.assign(args[0], {
        // __SENTRY_DIST__: `'${SENTRY_DIST}'`,
        __SENTRY_RELEASE__: `'${SENTRY_RELEASE}'`,
        __SENTRY_ENVIRONMENT__: `'${
          isStoreBuild ? 'production' : 'development'
        }'`,
        __ENABLE_SENTRY__: isStoreBuild || sentryDev,
        __SENTRY_PREFIX__: `'${SENTRY_PREFIX}'`,
        __SENTRY_DSN_IOS__: JSON.stringify(process.env.SENTRY_DSN_IOS),
        __SENTRY_DSN_ANDROID__: JSON.stringify(process.env.SENTRY_DSN_ANDROID),
      })
      return args
    })

    if (isStoreBuild || sentryDev) {
      config.devtool('source-map')

      config
        .plugin('SentryCliPlugin')
        .init(() =>
          SentryCliPlugin({
            telemetry: false,
            org: process.env.SENTRY_ORG_SLUG,
            project: projectSlug,
            release: {
              name: SENTRY_RELEASE,
              cleanArtifacts: true,
              deploy: {
                env: sentryDev ? 'development' : 'production',
              },
              setCommits: {
                auto: true,
                ignoreMissing: true,
              },
            },
            authToken: process.env.SENTRY_AUTH_TOKEN,
          }),
        )
        .use(SentryCliPlugin)

      config.optimization.minimizer('TerserPlugin').tap((args) => {
        // we format here otherwise the sourcemaps will be broken
        args[0].terserOptions.format = {
          ...args[0].terserOptions.format,
          max_line_len: 1000,
          indent_level: 1,
        }
        return args
      })
    }
  })