Any way to deploy source maps to Sentry, and not package them in the serverless ZIP files?

[ffxsam]

Hi, I just started using this plugin today, and I'm super impressed! With serverless-webpack, my API (37 Lambda functions) took 12 minutes to build & deploy. Now, with serverless-esbuild, it takes about 2 minutes. 😏

The only thing missing for me, is that I was relying on the Sentry Webpack plugin to automatically push my source maps to Sentry. With esbuild, is there some way I can have it dump my .map files to a folder, separately from the CloudFormation deployment, and then upload those to Sentry? Even if I have to use their CLI tool to upload the source maps, that's fine. I just need some way to hook into the build process and execute a process to do this.

Thanks!

[olup]

Maybe more of a esbuild plugin to build ?

[ffxsam]

@olup I was just looking into this, but since plugins are experimental, I couldn't find any documentation.

I looked through the source code a bit, and I didn't see any way for a plugin to see which files were saved as a result of the build process.

Correction: looks like if I set the write option to false, then my plugin gets a full array of files with their contents as Uint8Array objects. So, I'm thinking I might be able to filter this list and save the .map files in a separate folder, then spawn a sentry-cli process to upload the source maps. This could work!

Now I just need to figure out where to save the .js files so Serverless can find them & deploy them to AWS, and how/where to save the .map files.

[olup]

Thing is, packaging the js file is a bit involved and is partly the reason this lib exists. The code has been refined to cover many edge case. I wonder if there is a way to have an esbuild plugin that can work alongside normal operations of this lib.

[olup]

Maybe something around https://esbuild.github.io/plugins/#resolve-callbacks ? There is quite a bit of doc to fiddle around.

[ffxsam]

I've been working on it, and making good progress. So far, this will save out source maps to their own folder. The last part is to just have this execute sentry-cli to upload them.

const fs = require('fs');
const path = require('path');

const envPlugin = {
  name: 'upload-sourcemaps',
  setup(build) {
    build.onEnd(args => {
      for (const file of args.outputFiles) {
        const { base, dir } = path.parse(file.path);

        if (/\.map$/.test(file.path)) {
          const funcDir = dir.replace(/.*\.build\//, '')

          fs.mkdirSync(`./.sourcemaps/${funcDir}`, { recursive: true });
          fs.writeFileSync(`./.sourcemaps/${funcDir}/${base}`, file.contents);

          continue;
        }


        fs.mkdirSync(dir, { recursive: true });
        fs.writeFileSync(file.path, file.contents);
      }
    });
  },
};

module.exports = [envPlugin];

[olup]

Or you could leave the source map where they are and feed the path to sentry cli. In any case, you should open a repo. I am sure many teams would be happy to have such a plugin for esbuild (in a serverless-esbuild project or other). Should we close this issue as it is not specifically linked to serverless-esbuild ?

[ffxsam]

Leaving the source maps where they're placed by esbuild would include them in the ZIP file that goes up to AWS, and that's not necessary.

I'll absolutely create a public repo for this once it's done!

[olup]

Hi there, can we close this as it will be handles by some esbuild plugin ?

[ffxsam]

Sure!

[Steakeye]

I'm converting a webpack build over to ESBuild and I've come across this exact requirement; does anyone know if a plugin has been released to handle this?

[floydspace]

hi @Steakeye, I don't this the plugin exists as npm package, you can try using the code snipped suggested by @ffxsam

[simonc]

For anyone new to esbuild and finding this page, @ffxsam's code works but you need to specify write: false in the options for args.outputFiles to be present.

# serverless.yml
custom:
  esbuild:
    plugins: plugins.js # file that contains the sourcemap-upload code
    sourcemap: external # using 'external' here as we only need the map files
    write: false

[kopertop]

@ffxsam did you ever make a public plugin for this? this is still the top google search result for this issue so I think it would be helpful if there was a final resolution here.

[ffxsam]

@kopertop I didn't post it officially anywhere, no. I've since moved to Serverless Stack, so I had to modify my plugin code a bit.

[henriquecarv]

When combining this solution with typescript, has anybody experienced your stack trace referring to the minified/bundled .js file instead of its .ts file?

[atwoodjw]

@henriquecarv Yes. Did you ever figure this out?

[henriquecarv]

@atwoodjw I did not figure it out back then, so I stopped trying after a while. Might get back to it again sometime later :)

[epiphone]

Sentry now provides an esbuild plugin for uploading source maps: https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/esbuild.

[walterholohan]

@epiphone thank you for this, I will give it a go

[simonc]

@walterholohan if you get it to work with serverless I'd be very interested in your config 😅

Merry xmas everyone 🎁🎄

[walterholohan]

Hopefully @epiphone can provide his magic sauce on how he got it working

[atwoodjw]

The esbuild plugin automatically creates releases and upload source maps when bundling the app, but serverless-esbuild bundles in response to multiple serverless lifecycle hooks (e.g. package, deploy, invoke local, offline, etc.) While appropriate for package and deploy, I don't think we want the plugin creating releases and uploading source maps when invoking a function locally or running offline.

To be useful in the context of serverless-esbuild, I think we need a way to conditionally use the plugin based on serverless lifecycle hooks.

[ghost]

did anyone try out using Sentry with serverless-esbuild and sentry esbuild plugin

[rafael-lua]

@amitUpscale

I did, and it seems to have worked well for now.

For esbuild-serverless configuration, we have:

  esbuild:
    bundle: true
    minify: false
    sourcemap: external # we had to set this to external
    sourcesContent: true
    exclude: ['aws-sdk']
    target: 'node18'
    platform: 'node'
    plugins: esbuildPlugins.js # we declare an external plugin

And for the plugin file, we have:

const { sentryEsbuildPlugin } = require('@sentry/esbuild-plugin')

module.exports = [
  sentryEsbuildPlugin({
    org: 'my-org',
    project: 'the-sentry-project',
    authToken: process.env.SENTRY_AUTH_TOKEN,
    release: {
      name: process.env.APP_VERSION, // would be your release version
      finalize: process.env.SENTRY_RELEASE_FINALIZE === 'true', // we have CI for beta and prod. We only finalize on prod.
      dist: 'server',
    },
  }),
]

With that, just by running the serverless deploy command, sentry will take care of uploading the source files. We did it remix, and this is the way for us to send the server side source-maps.

[cpcwood]

Following @rafael-lua's comment 🙌🏻 I also managed to upload sourcemaps and remove them from the zip by specifying them in the sourcemaps.filesToDeleteAfterUpload option, e.g.

const { sentryEsbuildPlugin } = require('@sentry/esbuild-plugin')

module.exports = [
  sentryEsbuildPlugin({
    org: 'my-org',
    project: 'the-sentry-project',
    authToken: process.env.SENTRY_AUTH_TOKEN,
    sourcemaps: {
      assets: ['./.esbuild/.build/**/*'],
      filesToDeleteAfterUpload: ['./.esbuild/.build/**/*.js.map']
    }
  })
]