feat(nextjs): Add scripts to allow deploying a branch to vercel (#3624)

packages/nextjs/package.json

@@ -53,7 +53,9 @@
     "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
     "test": "jest",
     "test:watch": "jest --watch",
-    "pack": "npm pack"
+    "pack": "npm pack",
+    "vercel:branch": "source vercel/set-up-branch-for-test-app-use.sh",
+    "vercel:project": "source vercel/make-project-use-current-branch.sh"
   },
   "volta": {
     "extends": "../../package.json"

packages/nextjs/vercel/install-sentry-from-branch.sh

@@ -0,0 +1,75 @@
+# SCRIPT TO INCLUDE AS PART OF A VERCEL-DEPLOYED PROJECT, SO THAT IT USES A BRANCH FROM THE SDK REPO
+# USE `yarn vercel:project <path-to-project>` TO HAVE IT AUTOMATICALLY ADDED TO YOUR PROJECT
+
+# CUSTOM INSTALL COMMAND FOR PROJECT ON VERCEL: `source .sentry/install-sentry-from-branch.sh`
+
+PROJECT_DIR=$(pwd)
+
+# Set BRANCH_NAME as an environment variable
+source .sentry/set-branch-name.sh
+
+echo " "
+echo "CLONING SDK REPO"
+git clone https://github.com/getsentry/sentry-javascript.git
+cd sentry-javascript
+git checkout $BRANCH_NAME
+echo "Latest commit: $(git log --format="%C(auto) %h - %s" | head -n 1)"
+
+echo " "
+echo "INSTALLING SDK DEPENDENCIES"
+# We need dev dependencies so that we can build the SDK
+yarn --prod false
+
+echo " "
+echo "BUILDING SDK"
+# we need to build es5 versions because `next.config.js` calls `require` on the SDK (to get `withSentryConfig`) and
+# therefore it looks for `dist/index.js`
+yarn build:es5
+# we need to build esm versions because that's what `next` actually uses when it builds the app
+yarn build:esm
+cd $PROJECT_DIR
+
+# Add built SDK as a file dependency. This has the side effect of forcing yarn to install all of the other dependencies,
+# saving us the trouble of needing to call `yarn` separately after this
+echo " "
+echo "SUBSTITUTING LOCAL SDK FOR PUBLISHED ONE AND INSTALLING PROJECT DEPENDENCIES"
+echo "yarn add file:sentry-javascript/packages/nextjs"
+yarn add file:sentry-javascript/packages/nextjs
+
+# In case for any reason we ever need to link the local SDK rather than adding it as a file dependency:
+
+# for abs_package_path in ${PROJECT_DIR}/sentry-javascript/packages/*; do
+
+# # link the built packages into project dependencies
+# for abs_package_path in sentry-javascript/packages/*; do
+#   package=$(basename $abs_package_path)
+
+#   # this one will error out because it's not called @sentry/typescript, it's
+#   # called @sentry-internal/typescript, but we don't need it, so just move on
+#   if [ "$package" = "typescript" ]; then
+#     continue
+#   fi
+
+#   echo " "
+#   echo "Linking @sentry/${package}"
+
+#   cd $abs_package_path
+#   yarn link
+
+#   cd $PROJECT_DIR
+#   yarn link "@sentry/$package"
+# done
+
+# # These aren't in the repo and therefore have to be done separately (we link these even though they're not in the repo
+# # because the branch might specify a different version of either than the published SDK does)
+# for package in "cli" "webpack-plugin"; do
+
+#   echo " "
+#   echo "Linking @sentry/${package}"
+
+#   cd sentry-javascript/node_modules/@sentry/$package
+#   yarn link
+
+#   cd $PROJECT_DIR
+#   yarn link "@sentry/$package"
+# done

packages/nextjs/vercel/instructions.md

@@ -0,0 +1,38 @@
+### To prepare branch for deploying on Vercel:
+
+From `packages/nextjs`, run
+
+  `yarn vercel:branch`.
+
+This will delete unneeded packages (angular, vue, etc) in order to speed up deployment. It will then commit that change.
+When your branch is ready to PR, just rebase and drop that commit.
+
+### To prepare test app for using current branch:
+
+First, make sure the branch you want to test is checked out in your `sentry-javascript` repo, and that all changes you
+want to test are pushed to GitHub.
+
+From `packages/nextjs`, run
+
+  `yarn vercel:project <path/to/testapp>`.
+
+This will copy a script into a `.sentry` folder at the root level of your test app,and create a second one. (The first
+script is the one you'll run on Vercel. The second is a helper to the first, so that it knows which branch to use.) It
+will then commit (but not push) this change.
+
+Go into your project settings on Vercel and change the install command to
+
+  `source .sentry/install-sentry-from-branch.sh`.
+
+If you're using bundle analyzer, change the build command to
+
+  `yarn build && mv .next/analyze/* public`.
+
+The bundle visualizations will be available on your deployed site at `/client.html` and `/server.html`.
+
+### To test the SDK:
+
+Once you have pushed the changes made by `yarn vercel:project` to GitHub, just make changes and push, and Vercel will
+always use the latest version of both the SDK and your test app. Pushing changes to your test app will trigger a new
+build in Vercel; for changes to the SDK, you'll need to manually redeploy, either by kicking off a new build or simply
+choosing 'Redeploy' on your most recent existing build.

packages/nextjs/vercel/make-project-use-current-branch.sh

@@ -0,0 +1,62 @@
+# SCRIPT TO MAKE TEST APP USE THIS BRANCH
+
+# CALL THIS BY RUNNING `yarn vercel:project <path-to-project>`
+
+NEXTJS_SDK_DIR=$(pwd)
+PROJECT_DIR=$1
+SDK_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
+
+if [ ! -n "${PROJECT_DIR}" ]; then
+  echo " "
+  echo "ERROR: Missing project directory. Please supply the path to your project as an argument to the command."
+  exit 1
+fi
+
+# make sure branch is already set up
+echo " "
+echo "Making sure branch is set up for vercel deployment."
+yarn vercel:branch
+
+cd $PROJECT_DIR
+
+# make sure we're dealing with a clean repo
+STASHED_CHANGES=$(git status --porcelain)
+if [ -n "${STASHED_CHANGES}" ]; then
+  echo "Found uncommitted changes in your project. Stashing them."
+  git stash --quiet --include-untracked
+fi
+
+# make sure we have a clean directory into which to put our scripts
+echo " "
+if [ -d .sentry ]; then
+  echo "Clearing .sentry directory"
+  rm -rf .sentry
+else
+  echo "Creating .sentry directory"
+fi
+mkdir .sentry
+
+# set up scripts for use in vercel deployment
+echo " "
+echo "Creating install scripts and committing the changes"
+cp $NEXTJS_SDK_DIR/vercel/install-sentry-from-branch.sh .sentry
+echo "export BRANCH_NAME=${SDK_BRANCH_NAME}" >>.sentry/set-branch-name.sh
+git add .
+git commit -m "add scripts for using ${SDK_BRANCH_NAME} branch of @sentry/nextjs"
+
+# restore working directory, if necessary
+if [ -n "${STASHED_CHANGES}" ]; then
+  echo " "
+  echo "Restoring changes from earlier stash:"
+  git stash pop --quiet
+  git status --porcelain
+  echo " "
+fi
+
+cd $NEXTJS_SDK_DIR
+
+echo " "
+echo "SUCCESS!"
+echo "Your project will now use this branch of the SDK repo when deployed to Vercel. If you haven't done so already, go to your project settings in Vercel and set a custom install command:"
+echo "  $(source .sentry/install-sentry-from-branch.sh)"
+echo " "

packages/nextjs/vercel/set-up-branch-for-test-app-use.sh

@@ -0,0 +1,49 @@
+# SCRIPT TO SET UP BRANCH FOR USE IN VERCEL-DEPLOYED TEST APPS
+
+# CALL THIS WITH `yarn vercel:branch`
+
+echo " "
+
+NEXTJS_SDK_DIR=$(pwd)
+
+# this puts us in the repo root
+cd ../..
+
+# make sure we're dealing with a clean repo
+STASHED_CHANGES=$(git status --porcelain)
+if [ -n "${STASHED_CHANGES}" ]; then
+  echo "Found uncommitted changes. Stashing them."
+  git stash --quiet --include-untracked
+fi
+
+# if this hasn't already been done, get rid of irrelevant packages to speed up deploy process
+PACKAGES_DELETED=false
+for package in "angular" "ember" "eslint-config-sdk" "eslint-plugin-sdk" "gatsby" "serverless" "vue" "wasm"; do
+  if [ -d packages/${package} ]; then
+    echo "Deleting ${package}"
+    rm -rf packages/${package}
+    PACKAGES_DELETED=true
+  fi
+done
+
+echo " "
+
+# if we deleted anything, commit the result
+if [ "$PACKAGES_DELETED" = true ]; then
+  echo "Committing deletions. Don't forget to push this commit before you deploy."
+  git add .
+  git commit -m "delete unneeded packages"
+else
+  echo "Branch already set up for vercel deployment"
+fi
+
+# restore working directory, if necessary
+if [ -n "${STASHED_CHANGES}" ]; then
+  echo " "
+  echo "Restoring changes from earlier stash:"
+  git stash pop --quiet
+  git status --porcelain
+  echo " "
+fi
+
+cd $NEXTJS_SDK_DIR