Merge pull request #268 from scientist-softserv/sentry-for-next-js

8 setup exception tracking

.env

@@ -5,4 +5,4 @@ NEXT_PUBLIC_PROVIDER_NAME=beachsidebiotech
 NEXT_PUBLIC_PROVIDER_ID=5159
 NEXT_PUBLIC_SCIENTIST_API_VERSION=v2
 
-SENTRY_DSN=https://6c537d3cdd954401a893831313a976cc@o1008683.ingest.sentry.io/4504805305810944
+SENTRY_DSN=https://78ce09ae2f694f0e8981cf5cec6fc2c7@o1008683.ingest.sentry.io/4504810271408128

.github/workflows/build.yml

@@ -1,74 +1,78 @@
-name: "Build Docker Images"
-run-name: Build of ${{ github.ref_name }} by @${{ github.actor }}
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-  workflow_dispatch:
-    inputs:
-      debug_enabled:
-        type: boolean
-        description: 'Run the build with tmate debugging enabled (https://github.com/marketplace/actions/debugging-with-tmate)'
-        required: false
-        default: false
+# we are running the build in vercel now so we don't need this github action
+# commenting this out because this action kept failing on https://github.com/scientist-softserv/webstore/pull/268
+# TODO(alishaevn): figure out the sentry error if we switch from vercel to an in house deploy infrastructure
 
-env:
-  REGISTRY: ghcr.io
+# name: "Build Docker Images"
+# run-name: Build of ${{ github.ref_name }} by @${{ github.actor }}
+# on:
+#   push:
+#     branches:
+#       - main
+#   pull_request:
+#     branches:
+#       - main
+#   workflow_dispatch:
+#     inputs:
+#       debug_enabled:
+#         type: boolean
+#         description: 'Run the build with tmate debugging enabled (https://github.com/marketplace/actions/debugging-with-tmate)'
+#         required: false
+#         default: false
 
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - id: setup
-        name: Setup
-        uses: scientist-softserv/actions/[email protected]
-        with:
-          tag: ${{ inputs.tag }}
-          image_name: ${{ inputs.image_name }}
-          token: ${{ secrets.CHECKOUT_TOKEN || secrets.GITHUB_TOKEN }}
-      - uses: actions/setup-node@v3
-        with:
-          registry-url: 'https://npm.pkg.github.com'
-          # Defaults to the user or organization that owns the workflow file
-          scope: '@scientist-softserv'
-          node-version-file: package.json
-      - name: GPR authToken
-        run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" > $NPM_CONFIG_USERCONFIG
-      - name: GPR alias
-        run: echo "@scientist-softserv:registry=https://npm.pkg.github.com" >> $NPM_CONFIG_USERCONFIG
-      - run: yarn install
-      - run: yarn test
+# env:
+#   REGISTRY: ghcr.io
 
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+# jobs:
+#   build:
+#     runs-on: ubuntu-latest
+#     permissions:
+#       contents: read
+#       packages: write
+#     steps:
+#       - id: setup
+#         name: Setup
+#         uses: scientist-softserv/actions/[email protected]
+#         with:
+#           tag: ${{ inputs.tag }}
+#           image_name: ${{ inputs.image_name }}
+#           token: ${{ secrets.CHECKOUT_TOKEN || secrets.GITHUB_TOKEN }}
+#       - uses: actions/setup-node@v3
+#         with:
+#           registry-url: 'https://npm.pkg.github.com'
+#           # Defaults to the user or organization that owns the workflow file
+#           scope: '@scientist-softserv'
+#           node-version-file: package.json
+#       - name: GPR authToken
+#         run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" > $NPM_CONFIG_USERCONFIG
+#       - name: GPR alias
+#         run: echo "@scientist-softserv:registry=https://npm.pkg.github.com" >> $NPM_CONFIG_USERCONFIG
+#       - run: yarn install
+#       - run: yarn test
 
-      - name: Retag action for Docker image
-        id: meta-docker-image
-        uses: docker/[email protected]
-        with:
-          images: |
-            name=${{ env.REGISTRY }}/${{ env.REPO_LOWER }}
-          tags: |
-            type=raw,value=latest,enable={{is_default_branch}}
+#       - name: Login to GitHub Container Registry
+#         uses: docker/login-action@v2
+#         with:
+#           registry: ${{ env.REGISTRY }}
+#           username: ${{ github.actor }}
+#           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - run: cp $NPM_CONFIG_USERCONFIG .npmrc; cat .npmrc
+#       - name: Retag action for Docker image
+#         id: meta-docker-image
+#         uses: docker/[email protected]
+#         with:
+#           images: |
+#             name=${{ env.REGISTRY }}/${{ env.REPO_LOWER }}
+#           tags: |
+#             type=raw,value=latest,enable={{is_default_branch}}
 
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v3
-        with:
-          cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.REPO_LOWER }}:${{ env.TAG }}
-          context: .
-          push: true
-          tags: |
-            ${{ steps.meta-docker-image.outputs.tags }}
-            ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}:${{ env.TAG }}
+#       - run: cp $NPM_CONFIG_USERCONFIG .npmrc; cat .npmrc
+
+#       - name: Build and push Docker image
+#         uses: docker/build-push-action@v3
+#         with:
+#           cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.REPO_LOWER }}:${{ env.TAG }}
+#           context: .
+#           push: true
+#           tags: |
+#             ${{ steps.meta-docker-image.outputs.tags }}
+#             ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}:${{ env.TAG }}

.github/workflows/deploy.yml

@@ -1,22 +1,25 @@
-name: "Deploy"
-run-name: Deploy (${{ github.ref_name }} -> ${{ inputs.environment }}) by @${{ github.actor }}
-on:
-  workflow_dispatch:
-    inputs:
-      environment:
-        description: 'Deploy to Environment'
-        required: true
-        default: 'staging'
-        type: choice
-        options:
-          - staging
-      debug_enabled:
-        type: boolean
-        description: 'Run the build with tmate debugging enabled (https://github.com/marketplace/actions/debugging-with-tmate)'
-        required: false
-        default: false
+# we are running the deploy through vercel now so we don't need this github action
+# TODO(alishaevn): fix any potential sentry error's if we switch from vercel to an in house deploy infrastructure
 
-jobs:
-  deploy:
-    uses: scientist-softserv/actions/.github/workflows/[email protected]
-    secrets: inherit
+# name: "Deploy"
+# run-name: Deploy (${{ github.ref_name }} -> ${{ inputs.environment }}) by @${{ github.actor }}
+# on:
+#   workflow_dispatch:
+#     inputs:
+#       environment:
+#         description: 'Deploy to Environment'
+#         required: true
+#         default: 'staging'
+#         type: choice
+#         options:
+#           - staging
+#       debug_enabled:
+#         type: boolean
+#         description: 'Run the build with tmate debugging enabled (https://github.com/marketplace/actions/debugging-with-tmate)'
+#         required: false
+#         default: false
+
+# jobs:
+#   deploy:
+#     uses: scientist-softserv/actions/.github/workflows/[email protected]
+#     secrets: inherit

.github/workflows/test-suite.yml

@@ -1,23 +1,26 @@
-name: Test Suite
-on:
-  push: {}
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - uses: actions/checkout@v3
-      # Setup .npmrc file to publish to GitHub Packages
-      - uses: actions/setup-node@v3
-        with:
-          registry-url: 'https://npm.pkg.github.com'
-          # Defaults to the user or organization that owns the workflow file
-          scope: '@scientist-softserv'
-          node-version-file: package.json
-      - name: Authenticate with private GPR package
-        run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" > $NPM_CONFIG_USERCONFIG
-      - run: yarn install
-      - run: yarn test
-      - run: yarn build
+# TODO(alishaevn): remove the references to the github package registry
+# TODO(alishaevn): run the cypress tests during this action
+
+# name: Test Suite
+# on:
+#   push: {}
+# jobs:
+#   build:
+#     runs-on: ubuntu-latest
+#     permissions:
+#       contents: read
+#       packages: write
+#     steps:
+#       - uses: actions/checkout@v3
+#       # Setup .npmrc file to publish to GitHub Packages
+#       - uses: actions/setup-node@v3
+#         with:
+#           registry-url: 'https://npm.pkg.github.com'
+#           # Defaults to the user or organization that owns the workflow file
+#           scope: '@scientist-softserv'
+#           node-version-file: package.json
+#       - name: Authenticate with private GPR package
+#         run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" > $NPM_CONFIG_USERCONFIG
+#       - run: yarn install
+#       - run: yarn test
+#       - run: yarn build

.gitignore

@@ -10,3 +10,6 @@ node_modules/
 
 # we want the default npmrc but sometimes folks put in the gh tokens, don't commit those
 .npmrc
+
+# Sentry
+.sentryclirc

README.md

@@ -125,21 +125,22 @@ This project uses both Cypress and Jest for testing.
 
 To run all jest tests for files you have changed, run
 ```
-yarn test
+yarn jest
 ```
 
 or if you want to run tests on changes, in a constant loop
 
 ```
-yarn test-watch
+yarn jest-watch
 ```
 
 and press `a`
 
 ### Cypress
 Cypress is an desktop application that runs on your computer. Cypress is already installed on this project, but your machine will need to meet certain [system requirements](https://docs.cypress.io/guides/getting-started/installing-cypress#System-requirements) to run the Cypress application.
 
-If you meet the requirements in the Cypress docs, you can run the `yarn run cypress open` command to start Cypress. from the Cypress desktop app, you will be able to create and run tests.
+If you meet the requirements in the Cypress docs, you can run either of the cypress scripts in package.json; one runs in the cli and the other in a browser window. From the Cypress desktop app, you will be able to create and run tests.
+
 
 There are 2 types of Cypress tests, e2e & component.
   - e2e: tests entire flows of the application

next.config.js

@@ -1,11 +1,43 @@
+// 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/manual-setup/
+const { withSentryConfig } = require('@sentry/nextjs')
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+const moduleExports = {
   output: 'standalone',
   reactStrictMode: true,
   swcMinify: true,
   eslint: {
     dirs: ['pages', 'utils'], // Only run ESLint on the 'pages' and 'utils' directories during production builds
   },
+  sentry: {
+    // Use `hidden-source-map` rather than `source-map` as the Webpack `devtool`
+    // for client-side builds. (This will be the default starting in
+    // `@sentry/nextjs` version 8.0.0.) See
+    // https://webpack.js.org/configuration/devtool/ and
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map
+    // for more information.
+    hideSourceMaps: true,
+  },
+}
+
+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.
 }
 
-module.exports = nextConfig
+// 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
+)

ops/staging-deploy.tmpl.yaml

@@ -7,7 +7,7 @@ nextPublicToken: $NEXT_PUBLIC_TOKEN
 nextAuthSecret: $NEXTAUTH_SECRET
 clientSecret: $CLIENT_SECRET
 clientId: $CLIENT_ID
-sentryDsn: 'https://6c537d3cdd954401a893831313a976cc@o1008683.ingest.sentry.io/4504805305810944'
+sentryDsn: 'https://78ce09ae2f694f0e8981cf5cec6fc2c7@o1008683.ingest.sentry.io/4504810271408128'
 replicaCount: 1
 
 image:

package.json

@@ -10,17 +10,18 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint --dir pages --dir utils",
-    "test": "jest",
-    "test-watch": "jest --watch",
+    "cypress": "cypress run",
+    "cypress-gui": "cypress open",
+    "jest": "jest",
+    "jest-watch": "jest --watch",
     "release": "release-it"
   },
   "dependencies": {
     "@rjsf/core": "^5.0.0-beta.17",
     "@rjsf/utils": "^5.0.0-beta.17",
     "@rjsf/validator-ajv8": "^5.0.1",
     "@scientist-softserv/webstore-component-library": "^0.1.16",
-    "@sentry/react": "^7.42.0",
-    "@sentry/tracing": "^7.42.0",
+    "@sentry/nextjs": "^7.42.0",
     "axios": "^1.1.3",
     "bootstrap": "^5.2.3",
     "next": "12.3.1",

pages/_app.js

@@ -1,5 +1,3 @@
-import { Integrations } from '@sentry/tracing'
-import * as Sentry from '@sentry/react'
 import { Footer, Header } from '@scientist-softserv/webstore-component-library'
 import { SWRConfig } from 'swr'
 import {
@@ -19,14 +17,6 @@ import {
 } from '../utils'
 import '../utils/theme/globals.scss'
 
-Sentry.init({
-  dsn: process.env.SENTRY_DSN,
-  integrations: [
-    new Integrations.BrowserTracing(),
-  ],
-  tracesSampleRate: 1.0,
-})
-
 const WebStore = ({ Component }) => {
   const { data: session } = useSession()