Providing NodeJS sourcemaps to Error Tracking services

Get Help and Help Others
1

I have setup sourcemaps via the webpack config for sentry using what @danny had setup with Bugsnag. That is ok for Redwood Web side.

The reason I am looking into sentry is that they have an SDK that supports exception handling for serverless functions that is quite easy to integrate.

The one thing missing is how to provide Sentry a sourcemap of the API side so the correct line numbers and code show up in stack traces. The API side does not have a webpack config, but it does have a babel config.

I looked at https://github.com/redwoodjs/redwood/blob/main/packages/core/config/babel-preset.js and I think I should extend my babel.config.js with an override to add the sentry plugins, but again - the sentry tutorials refer to webpack and not babel… so I am bit confused on how to set this up.

As I get closer to launch with my redwood app, error tracking setup is one of the things I am trying to get right - as it’s critical to have one in production

References:

2

@dthyresson has been taking lead on error handling in Redwood, I think you’ve already connected with him on Discord but pinging him here to get his input.

3

Was there ever a solution found for this? I’m encountering the same issue - I want to upload source maps to Sentry on the API side, and can’t see a way of including a custom Webpack config. Any help is appreciated!

4

Hi, @edcompton and thanks for the question, and hope this helps/

So, for the web side, see: App Configuration | RedwoodJS Docs

// redwood.toml

[web]
  title = "Redwood App"
  port = 8910
  apiUrl = "/.redwood/functions" # You can customize graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
  includeEnvironmentVariables = [
    # Add any ENV vars that should be available to the web side to this array
    # See https://redwoodjs.com/docs/environment-variables#web
  ]
  # Source Map https://redwoodjs.com/docs/app-configuration-redwood-toml#web
  sourceMap = true

and then the .js.map files will be generated in web/dist/assets on yarn rw build or yarn rw build web.

When I yarn rw build or yarn rw api, I get .map files:

dist main % tree
.
├── directives
│   ├── requireAuth
│   │   ├── requireAuth.js
│   │   └── requireAuth.js.map
│   └── skipAuth
│       ├── skipAuth.js
│       └── skipAuth.js.map
├── functions
│   ├── graphql.js
│   └── graphql.js.map
├── graphql
│   ├── follows.sdl.js
│   ├── follows.sdl.js.map
│   ├── likes.sdl.js
│   ├── likes.sdl.js.map
│   ├── posts.sdl.js
│   ├── posts.sdl.js.map
│   ├── users.sdl.js
│   └── users.sdl.js.map
├── lib
│   ├── auth.js
│   ├── auth.js.map
│   ├── db.js
│   ├── db.js.map
│   ├── logger.js
│   └── logger.js.map
└── services
    ├── follows
    │   ├── follows.js
    │   └── follows.js.map
    ├── likes
    │   ├── likes.js
    │   └── likes.js.map
    ├── posts
    │   ├── posts.js
    │   └── posts.js.map
    └── users
        ├── users.js
        └── users.js.map

And those contain the map files.

You’ll have to incorporate a process to build, collect and send those .map file to sentry (or where needed) as part of your build and deploy step.

Is this what you needed?

5

This might also be helpful, I’m currently doing this at the end of our Dockerfile (there are some gitlab specific variables in here)


RUN yarn global add @redwoodjs/cli prisma @sentry/cli && \
  prisma generate --schema=/app/api/db/schema.prisma && \
  sentry-cli releases new api@$CI_COMMIT_SHA && \
  sentry-cli releases files api@$CI_COMMIT_SHA upload-sourcemaps api/dist --rewrite --url-prefix "/app/api/dist" && \
  sentry-cli releases finalize api@$CI_COMMIT_SHA && \
  sentry-cli releases new web@$CI_COMMIT_SHA && \
  sentry-cli releases files web@$CI_COMMIT_SHA upload-sourcemaps web/dist && \
  sentry-cli releases finalize web@$CI_COMMIT_SHA && \
  rm -rf /app/web/dist/static/js/*.map