dario's.blog


January 28, 2023

Sentry integration woes with Next.js/Fly.io

Last night, I tried to integrate Sentry with the More Reps app. I ran the Sentry wizard and set up the SENTRY_AUTH_TOKEN environment variable, only to get the "Authentication credentials were not provided" error. It turns out that Sentry uses the authentication token during the build process so that it can upload the created sourcemaps to Sentry (sourcemaps are used to demangle your stacktraces).

This means that, in the environment where the npm run build command is executed, this environment variable needs to be present. This can get a little tricky if you're running it in a Docker container, as I did when deploying to Fly.io.

Hoping that you will not lose more time than necessary on this, here is the complete list of things you need to do if you want to deploy a Next.js/Sentry app to Fly.io using GitHub actions.

The first step is to install Sentry's Next.js SDK:

yarn add @sentry/nextjs
# or
npm install --save @sentry/nextjs

Then you can configure your app automatically using the Sentry wizard:

npx @sentry/wizard -i nextjs

The wizard will ask you some questions such as the name of the Sentry project you wish to integrate with, and then patch your Next.js project and create some additional files. One of the files is .sentryclirc, which will contain your Sentry authentication token. The same token can be retrieved from the Sentry UI, under Account > API > Auth Tokens. This file should not be committed, so if you want to use the token during build time on your CI server, it should be either created dynamically or put in the SENTRY_AUTH_TOKEN environment variable.

I used GitHub actions, so it made sense to put the token in the repository secret (you don't want to share this token publicly), and then it can be used in GitHub actions.

jobs:
deploy:
name: Deploy app
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: superfly/flyctl-actions/setup-flyctl@master
- run: flyctl deploy --remote-only --build-arg SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}

The flyctl command will use the project's Dockerfile to build the image, and pass the --build-arg arguments to the Docker image to be used as build arguments. Dockerfile build arguments are used to pass in dynamic information into the Dockerfile build process. In our case, we'll use it to set a Dockerfile environment variable, which is then available to the npm run build command:

# Dockerfile
FROM node:17.3.0-alpine AS builder
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY . .

RUN npm install

ARG SENTRY_AUTH_TOKEN
ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN

RUN npm run build

# ... rest of Dockerfile

Now the authentication token is available to the build command and the project can be built successfully. And that's it! Sentry's wizard for setting up a Next.js project is amazing, but you do need to be careful about the extra steps you need to make afterward, depending on your CI pipeline. You can check out the More Reps repository for the complete source code.

SentryNext.jsFly.io