CODEWITHSUNDEEP
next.jsvercelsentry
Ajouve
Ajouve

Reputation: 10049

Artifacts not uploaded on Sentry on Vercel build

As I am using a private Gitlab server, this is the way I am deploying my app using vercel cli

DEPLOYMENT_URL=$(VERCEL_ORG_ID=$VERCEL_ORG_ID VERCEL_PROJECT_ID=$VERCEL_PROJECT_ID vercel --yes --force \
    --token $VERCEL_TOKEN \
    --env NEXT_PUBLIC_SENTRY_DSN=$SENTRY_DNS \
    --build-env NEXT_PUBLIC_SENTRY_DSN=$SENTRY_DNS \
    --build-env SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN \
    --build-env SENTRY_RELEASE=$CI_COMMIT_SHA \
    --env SENTRY_RELEASE=$CI_COMMIT_SHA \
    --regions fra1 )

vercel alias set $DEPLOYMENT_URL $APPLICATION_URL -t $VERCEL_TOKEN --scope ajouve

When I am running a npm run build in my local environment or in my gitlab-ci pipeline with the variables SENTRY_AUTH_TOKEN set I have my artifacts uploaded on sentry

I expect the artifacts to be uploaded with Vercel

See the attached screenshot, the 0 are the deploys from vercel and the 166 from local or gitlab ci

enter image description here

Upvotes: 2

Views: 1364

Answers (1)

Michael Haar
Michael Haar

Reputation: 711

I had a similar issue with Nextjs, Vercel and Sentry.

Creating a PR on Github triggered a new Vercel deployment and I expected the Sentry-Vercel integration to upload the sourcemaps to Sentry, which didn't work. It created a new release in Sentry but the artifacts were zero (same as shown in your screen shot)

I tried running yarn build locally which did work (created a release and added the artifacts).

But, it seems that this is actually the expected behaviour as described here:

In general, sourcemaps shouldn't be uploaded to Sentry for anything but prod deployments...

Setting disableClientWebpackPlugin or disableServerWebpackPlugin to false fixed it for me.

Content of my next.config.js file:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withSentryConfig } = require("@sentry/nextjs");

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: ["@prisma/client"],
  },
  eslint: {
    dirs: ["."],
  },
};

const moduleExports = {
  ...nextConfig,

  sentry: {
    hideSourceMaps: true,
    disableServerWebpackPlugin: false,
    disableClientWebpackPlugin: false,
  },
};

const sentryWebpackPluginOptions = {
  silent: true,
};

module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);

Hope that helps!

Upvotes: 2

Related Questions