getsentry / sentry

Developer-first error tracking and performance monitoring
https://sentry.io
Other
38.5k stars 4.11k forks source link

Cannot get this working using github actions, pushing a nextjs app to vercel #33587

Closed ktravelet closed 2 years ago

ktravelet commented 2 years ago

Environment

SaaS (https://sentry.io/)

Version

No response

Steps to Reproduce

Github action:

      - name: "Deploy to Vercel"
        run: npx vercel --token ${VERCEL_TOKEN} --build-env NODE_ENV=production --build-env DATABASE_URL=${DATABASE_URL} --env NODE_ENV=production --env DATABASE_URL=${DATABASE_URL} --env GOOGLE_ID=${GOOGLE_ID} --env GOOGLE_SECRET=${GOOGLE_SECRET} --env FACEBOOK_ID=${FACEBOOK_ID} --env FACEBOOK_SECRET=${FACEBOOK_SECRET} --env NEXTAUTH_SECRET=${NEXTAUTH_SECRET}
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          DATABASE_URL: ${{ secrets.NEXT_DATABASE_CONNECTION_DEV }}
          GOOGLE_ID: ${{ secrets.OAUTH_GOOGLE_VERCEL_COM_CLIENT_ID }}
          GOOGLE_SECRET: ${{ secrets.OAUTH_GOOGLE_VERCEL_COM_SECRET }}
          FACEBOOK_ID: ${{ secrets.OAUTH_FACEBOOK_VERCEL_COM_CLIENT_ID }}
          FACEBOOK_SECRET: ${{ secrets.OAUTH_FACEBOOK_VERCEL_COM_SECRET }}
          NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET_STAGE }}

sentry.client.config.js:

// This file configures the initialization of Sentry on the browser.
// The config you add here will be used whenever a page is visited.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import * as Sentry from "@sentry/nextjs";

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

if (process.env.VERCEL) {
  Sentry.init({
    dsn: SENTRY_DSN,
    // Adjust this value in production, or use tracesSampler for greater control
    tracesSampleRate: 1.0,
    // ...
    // Note: if you want to override the automatic release value, do not set a
    // `release` value here - use the environment variable `SENTRY_RELEASE`, so
    // that it will also get attached to your source maps
    // authToken: process.env.SENTRY_AUTH_TOKEN,
    // environment: process.env.VERCEL_ENV,
    // release: process.env.VERCEL_GIT_COMMIT_SHA,
  });
}

next.config.js:

// This file sets a custom webpack configuration to use your Next.js app
// with Sentry.
// https://nextjs.org/docs/api-reference/next.config.js/introduction
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

const { withSentryConfig } = require("@sentry/nextjs");

const moduleExports = {
  // Your existing module.exports
  images: {
    domains: ["lh3.googleusercontent.com"],
  },
};

const sentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore

  // silent: true, // Suppresses all logs
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
};

// Make sure adding Sentry options is the last code to run before exporting, to
// ensure that your source maps include changes from all other Webpack plugins
module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);

vercel environment variables: image

component button:

<button
        type="button"
        onClick={() => {
          throw new Error("Sentry Frontend Error");
        }}
      >
        Throw error
      </button>

client failure in component button:

react-dom.production.min.js:101 

       Uncaught Error: Sentry Frontend Error
    at onClick (index.tsx:13:17)
    at Object.$e (react-dom.production.min.js:52:317)
    at Ye (react-dom.production.min.js:52:471)
    at react-dom.production.min.js:53:35
    at xr (react-dom.production.min.js:100:68)
    at Cr (react-dom.production.min.js:101:380)
    at react-dom.production.min.js:113:65
    at Ie (react-dom.production.min.js:292:189)
    at react-dom.production.min.js:50:57
    at Or (react-dom.production.min.js:105:469)

Expected Result

I'd expect my release (or any) dashboard to show information. Especially the self inflicted throw

Actual Result

release dashboard: image

getsentry-release commented 2 years ago

Routing to @getsentry/owners-releases-ui for triage. ⏲️

ktravelet commented 2 years ago

I want to circle back before closing this. The issue was in my client file:

if (process.env.VERCEL) {

This environment variable is not exposed to the client side. For a next project you have to start env vars with NEXTPUBLIC in order to get them on the client. I ended up creating a NEXT_PUBLIC_SENTRY_INIT variable and set the conditional to that.

Thanks for the great product!!