Sentry Support has Landed 🤯

[kentcdodds]

Huge thank you to @scefali for #40!

Please checkout the docs to learn how to get this setup: https://github.com/epicweb-dev/epic-stack/blob/main/docs/monitoring.md

Read the decision document here: https://github.com/epicweb-dev/epic-stack/blob/main/docs/decisions/015-monitoring.md

[cayblood]

The decision document doesn't include anything about how to generate sourcemaps during deploy so that Sentry can show proper context for errors, and I don't see anything in the github actions that seems to do that. Is that also configured properly, or do we still need to do that on our own? Thx.

[kiliman]

Here's my Dockerfile, based on Indie Stack, not Epic Stack

# base node image
FROM node:16-bullseye-slim as base

# set for base and all layer that inherit from it
ARG COMMIT_SHA
ARG APP_VERSION
ARG SERVER_URL
ARG SENTRY_AUTH_TOKEN
ARG SENTRY_ORG
ARG SENTRY_PROJECT

ENV COMMIT_SHA=$COMMIT_SHA
ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
ENV SENTRY_ORG=$SENTRY_ORG
ENV SENTRY_PROJECT=$SENTRY_PROJECT
ENV VERSION=$APP_VERSION-$COMMIT_SHA

# Install openssl for Prisma
RUN apt-get update && apt-get install -y openssl sqlite3 ca-certificates

WORKDIR /myapp

ADD package.json package-lock.json ./
ADD . .
RUN npm install

ADD prisma .
RUN npx prisma generate

ENV NODE_ENV production
RUN npm run build

# start creating the release
RUN npx sentry-cli releases new "$VERSION"
# upload server sourcemaps
RUN npx sentry-cli releases files "$VERSION" upload-sourcemaps ./ --ignore node_modules --ignore public --url-prefix="/myapp"
# upload client sourcemaps (fully separate them by setting dist to client)
RUN npx sentry-cli releases files "$VERSION" upload-sourcemaps ./public --dist "client"
RUN npx sentry-cli releases finalize "$VERSION"

# remove sourcemaps
RUN rm -rf build/*.map public/build/*.map

ENV DATABASE_URL=file:/data/data.db
ENV PORT="8080"
ENV NODE_ENV="production"

# add shortcut for connecting to database CLI
RUN echo "#!/bin/sh\nset -x\nsqlite3 \$DATABASE_URL" > /usr/local/bin/database-cli && chmod +x /usr/local/bin/database-cli

CMD ["npm", "start"]

[kiliman]

Needless to say, it took some trial and error to get it working. 😔

[kiliman]

Make sure you initialize Sentry with the same 'version' you use when uploading the sourcemaps. For my app, I set it to VERSION=APP_VERSION-COMMIT_HASH where APP_VERSION=1.0

// root.tsx
console.log(
  `🐛 init sentry client: ${ENV.RELEASE_STAGE} v${ENV.VERSION}`,
);
Sentry.init({
  environment: ENV.RELEASE_STAGE, // staging or production
  release: ENV.VERSION,           // same as VERSION for sourcemaps
  dsn: ENV.SENTRY_DSN,
  tracesSampleRate: 1,
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.remixRouterInstrumentation(
        useEffect,
        useLocation,
        useMatches,
      ),
    }),
  ],
});

// entry.server.tsx
function myTracesSampler(samplingContext: SamplingContext) {
  // Don't trace healthcheck or HEAD requests
  const { transactionContext } = samplingContext;
  if (
    transactionContext.name === 'routes/healthcheck/_index' ||
    transactionContext.tags?.method === 'HEAD'
  ) {
    return false;
  } else {
    return 1.0;
  }
}
if (env.SENTRY_NOTIFY) {
  Sentry.init({
    environment: env.RELEASE_STAGE,
    release: `${env.APP_VERSION}-${env.COMMIT_SHA}`,
    dsn: env.SENTRY_DSN,
    tracesSampleRate: 1,
    tracesSampler: myTracesSampler,

    integrations: [new Sentry.Integrations.Prisma({ client: prisma })],
  });
}

NOTE: I had to filter out the /healthcheck endpoint since Fly was calling it every 10 seconds and it was blowing up the transaction count.

Here's an example error showing the stack trace on the server

And here's what it looks like after you upload the sourcemaps

[kentcdodds]

This is the bit you may be looking for in the Epic Stack: https://github.com/epicweb-dev/epic-stack/blob/main/other/sentry-create-release.js

[cayblood]

@kiliman @kentcdodds thanks so much for these responses. That was enough for me to get it working.