https://serverless-stack.com/ logo
Join Slack
Powered by
<@U01MV4U2EV9> where’s a good place to have some b...
# help
s
@thdxr where’s a good place to have some back & forth about esbuild plugin support, now that the 0.12.20 update is out? the plugin I was using in Serverless Framework doesn’t work. the structure is very different
t
Is this sourcemap related? Or more broader than that
s
strictly about esbuild plugins at this point
t
chatting here works
s
ok, so this is the same code I used to use w/ SLS Framework:
when I run this in SST, it fails. 
args.outputFiles
doesn’t exist
I inspected the 
args
object, and nowhere do I see the source filenames & full contents of each file. I thought this hook allows you to intercept esbuild writing files to disk
at least that’s how it worked for me before
perhaps SLS Framework had a different esbuild config internally. 🤔 my knowledge on esbuild is pretty slim. I just know it’s 100x faster than webpack, so it’s my new favorite thing 😄
t
can you share the args object with me?
might need to get back to you tomorrow though
s
t
Copy code
outputFiles?: OutputFile[]; // Only when "write: false"
s
AH
right, yes. so.. I have to set that in SST somehow
t
The way we're using it we're letting esbuild write to disk, I don't think we can turn that off. However you should be able to check the path for those files
s
the 
.build
path? yeah the files aren’t written in any usable form unfortunately 😕
t
We have to do some hacks to get esbuild's async api to run synchronously (since it needs to run in the function constructor) which is why we rely on it to do the writing
s
I see
t
in your plugin if you look for the files, they're not usable?
s
the files in 
src/
aren’t even passed in. just 
infra/
for some reason
wait
the error thrown was stopping the build process. one sec
t
lmk if 
args.metafile
has information. You might be able to use that to find the sourcemap
s
ok, now we’re talking!
Copy code
Building Lambda function src/services/rest-api/functions/get-tags.main
[
  '.build/src-services-rest-api-functions-get-tags-main-1629170678621/get-tags.js.map',
  '.build/src-services-rest-api-functions-get-tags-main-1629170678621/get-tags.js'
]
Building Lambda function src/services/graphql/tracking.main
[
  '.build/src-services-graphql-tracking-main-1629170678841/tracking.js.map',
  '.build/src-services-graphql-tracking-main-1629170678841/tracking.js'
]
t
nicee
s
although.. it’s not really a folder structure
like 
.build/src/services/rest-api/functions/get-tags.js
it’s the same structure that exists in the 
.build
folder after a build process. I can’t really use it 😕
t
Sorry I thought you goal was to find 
.build/src-services-graphql-tracking-main-1629170678841/tracking.js.map
so you could move it to a different directory - is that not the case?
s
yeah but how would I know to copy it to 
.build/sourcemaps/src/services/graphql/tracking.js
? the forward slashes are converted to hyphens
I can’t just convert them back I don’t think.. due to 
tracking-main
t
Is that how sentry source maps work? You need to place it in the same folder where it originally was?
s
yep, exactly
t
Doesn't the metafile contain info on the input files as well?
s
yes, but the inputs are all files from node_modules (dependencies)
oh wait!
ok.. this I can work with:
Copy code
inputs: { 'src/services/graphql/tracking.ts': { bytes: 76, imports: [] } },
  outputs: {
    '.build/src-services-graphql-tracking-main-1629170993877/tracking.js.map': { imports: [], exports: [], inputs: {}, bytes: 280 },
    '.build/src-services-graphql-tracking-main-1629170993877/tracking.js': {
      imports: [],
      exports: [],
      entryPoint: 'src/services/graphql/tracking.ts',
      inputs: [Object],
      bytes: 543
    }
  }
t
yeah the metafile has a lot of stuff in it, can probably reference the entrypoint of the outputs
s
so.. I can use 
path
to get the base path of that input, make that folder in 
.build/sourcemaps
and then use the output keys to just copy the filenames only to that path
t
this is def worth implementing native to sst, I wonder if this specific implementation is unique to sentry though
s
maybe.. I dunno what Rollbar or other services do. but yeah, they want it in this format:
on top of that, you have to use their 
RewriteFrames
plugin to change 
/var/task
from the Lambda error stack to 
app:///
I should just make a public repo with all this stuff, once it works. although it would be great for SST to handle this out of the box and just dump the source maps to a folder, there’s probably some stuff to figure out there as far as what other services do in the meantime, I can just make a public repo for this & advertise it as an SST esbuild plugin for Sentry source maps
t
sweet 👍🏽 something we can write a blog post on as well
s
I’ll ping you once it’s done and fully tested
voilà!
Copy code
.build/sourcemaps
└── src
    └── services
        ├── auth
        │   ├── cognito-email-sender.js
        │   └── cognito-email-sender.js.map
        ├── graphql
        │   ├── tracking.js
        │   └── tracking.js.map
        ├── media-processor
        │   └── functions
        │       ├── cleanup.js
        │       ├── cleanup.js.map
        │       ├── copy-original.js
        │       ├── copy-original.js.map
        │       ├── generate-waveform.js
        │       ├── generate-waveform.js.map
        │       ├── get-metadata.js
        │       ├── get-metadata.js.map
        │       ├── post-processor.js
        │       ├── post-processor.js.map
        │       ├── process-image.js
        │       ├── process-image.js.map
        │       ├── transcode-audio.js
        │       ├── transcode-audio.js.map
        │       ├── transcode-video.js
        │       ├── transcode-video.js.map
        │       ├── upload-processor.js
        │       └── upload-processor.js.map
        └── rest-api
            └── functions
                ├── get-media.js
                ├── get-media.js.map
                ├── get-tags.js
                └── get-tags.js.map
I’ll let you know once I’ve put it through the wringers
Open in Slack
PreviousNext
Powered by