Nrwl/React - Upload source maps to sentry

Question

I'm working on a React application inside my NX Workspace.

Now I want to add sentry to my project. I already have a deploy configuration in my project.json. But I'm struggling with adding the step to upload the source maps.

Here is my project.json

"deploy": {
      "executor": "nx:run-commands",
      "options": {
        "parallel": false,
        "commands": [
          {
            "command": "nx run my-app:build:{args.target}",
            "forwardAllArgs": true
          },
          {
            "command": "echo Run {args.target} deployment on {args.server}",
            "forwardAllArgs": true
          },
          {
            "command": "rsync -avz --progress --delete dist/apps/my-app/ {args.user}@{args.server}:{args.path}",
            "forwardAllArgs": true
          },
          {
            "command": "echo my-app deployed to {args.target}",
            "forwardAllArgs": true
          }
        ]
      },
      "configurations": {
        "production": {
          "args": "--target=production --user=user --server=myserver.com --path=path/to/app"
        }
      }
    }

Is there any example of how to perform the upload of the source maps using a nx workspace? Or do I have to create a custom script that handles everything and put it into my project.json as the second command (after build, before deploy).

Also, I'm not sure how to handle the version number of my application as NX does not provide a way to define version numbers for each application inside the workspace.

Victor Carvalho · Accepted Answer · 2023-01-20 15:04:26Z

You'll have to create a custom webpack config on the Nx project: https://nx.dev/recipes/other/customize-webpack

and then follow the instructions on how to setup it on Sentry using webpack: https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/webpack/

Your custom webpack should look like something like this:

const {merge} = require('webpack-merge')
const SentryWebpackPlugin = require('@sentry/webpack-plugin')
const nrwlConfig = require('@nrwl/react/plugins/webpack.js')

module.exports = (config) => {
  // merge config from @nrwl/react first
  nrwlConfig(config)

  return merge(config, {
    devtool: 'source-map', // Source map generation must be turned on
    plugins: [
      new SentryWebpackPlugin({
        org: 'orgId',
        project: 'projectId',
        // Specify the directory containing build artifacts
        include: './build',
        // Auth tokens can be obtained from https://sentry.io/settings/account/api/auth-tokens/
        // and needs the `project:releases` and `org:read` scopes
        authToken: process.env.NX_SENTRY_AUTH_TOKEN,
        // Optionally uncomment the line below to override automatic release name detection
        // release: process.env.RELEASE,
      }),
    ],
  })
}

Please notice that unfortunately this is not a final answer, because with this I can upload the artifact, but the source maps are still not working on Sentry and I don't know why yet - but maybe this can be helpful somehow to you.

Collectives™ on Stack Overflow

Nrwl/React - Upload source maps to sentry

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related