Source Map for ReactJS app not working as expected.

[sarthakbaweja148]

Environment

SaaS (https://sentry.io/)

What are you trying to accomplish?

We have been using sentry to track issues in our ReactJS for quite some time now, but recently in the last few months, sentry is not able to parse the source maps as expected due to which stack trace is not readable.

We have also verified that releases and source maps are being uploaded to sentry.

We are using sentry webpack plugin to upload the source-maps.

@sentry/react: 7.21.1 @sentry/tracing: 7.21.1 @sentry/webpack-plugin: 1.20.0

sentry webpack plugin SentryWebpackPlugin({ authToken: vaultData?.secrets?.sentry?.sourceMapConfig.authToken, org: configKeys.sentry?.sourceMapConfig.org, project: configKeys.sentry?.sourceMapConfig.project, release: releaseVersionForSentry, include: "./dist", urlPrefix:~/splashliv-fe-assets/, ignore: ["node_modules", "webpack.config.js"], })

sentry init

Sentry.init({ enabled: configKeys.sentry.enabled, dsn: configKeys.sentry.dsn, environment: configKeys.sentry.env, integrations: [ new Sentry.BrowserTracing(), new Sentry.Integrations.Breadcrumbs({ console: !configKeys.sentry.breadcrumbsDisabled }) ], sampleRate: configKeys.sentry.sampleRate, tracesSampleRate: configKeys.sentry.tracesSampleRate });

How are you getting stuck?

Not able to figure out how to get sentry parse the source maps correctly.

Where in the product are you?

Issues - Source Maps

Link

https://splashlearn-alternate.sentry.io/

DSN

https://[email protected]/4506914637545472

Version

React: 7.21.1

[getsantry[bot]]

Assigning to @getsentry/support for routing ⏲️

[AbhiPrasad]

@sarthakbaweja148 I recommend you upgrade @sentry/webpack-plugin to v2, which makes a lot of improvements toward sourcemaps uploading.

Could you link particular errors which are not getting sourcemapped properly?

[sarthakbaweja148]

@AbhiPrasad I have tried moving to @sentry/webpack-plugin v2 version but to no avail. The issues were still the same.

I have a test error which I can share with you, which I had added in my app to test out this issue.

https://splashlearn-alternate.sentry.io/issues/5358061016/events/a621876400a8476b8ee63ec06590d1dd/

Let me know if you need more information, or more links.

[AbhiPrasad]

Looking at the error, the error is being sourcemapped properly, but I think your sourcemaps are being generated incorrectly. The sourcemap is causing Sentry to show the wrong frames for the error.

How are you generating sourcemaps? Is there a possibility that you are changing code after the sourcemaps gets generated? Therefore having the sourcemap point to the wrong location?

[sarthakbaweja148]

I am using SourceMapDevToolPlugin to generate sourcemaps.

  new webpack.SourceMapDevToolPlugin({
    filename: "[file].map",
  });

Also adding the webpack.config file we are using

{
    mode: "production",
    entry: ["./src/index.tsx"],
    devtool: false,
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: "ts-loader",
          exclude: /node_modules/,
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.(svg)$/,
          type: "asset/inline",
        },
        {
          test: /\.txt$/i,
          loader: 'raw-loader',
          options: {
            esModule: false,
          }
        },
      ],
    },
    resolve: {
      extensions: [".tsx", ".ts", ".js"],
      alias: {
        react: path.resolve("./node_modules/react"),
        "styled-components": path.resolve("./node_modules/styled-components"),
        "react-dom": path.resolve("./node_modules/react-dom"),
      },
      fallback: {
        fs: false,
        tls: false,
      },
    },
    output: {
      path: path.join(__dirname, "dist"),
      filename: `${app}-bundle-[contenthash].js`,
      publicPath: "/",
      libraryTarget: "var",
      library: `app_${app}`,
    },
    plugins: [
      new HtmlWebpackPlugin({
        inlineSource: ".(js|css)$",
        template: __dirname + `/app/${app}.html`,
        filename: __dirname + `/dist/${app}.html`,
        inject: "head",
        publicPath: configKeys.webpackConfig.publicPath,
      }),
      new htmlWebpackInjectAttributesPlugin({
        crossorigin: 'anonymous'
      }), 
      new webpack.DefinePlugin({ "process.env": JSON.stringify(process.env) }),
      Plugins.webpackManifestPlugin(),
      Plugins.caseSensitivePathsPlugin(),
      Plugins.sourceMapDevToolPlugin(),
      Plugins.SentryWebpackPluginV2(),
      Plugins.s3Plugin(),
      Plugins.cleanWebpackPlugin(true),
    ],
  }
}

[lforst]

@sarthakbaweja148 Please check all of your loaders and plugins for source map options. Unfortunately, all of them need to generate proper source maps for sourcemapping to work. One weak link and the whole thing breaks down.

[sarthakbaweja148]

I will try the solution you have provided. Meanwhile, I have tried verifying the final source map generated using https://sourcemaps.io/ and it deems the sourcemap as valid.

[lforst]

@sarthakbaweja148 There is still a difference between valid sourcemaps and correct source maps. Valid ones are spec compliant but may still contain garbage data. Correct ones actually properly source map your code.

[getsantry[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀