enh(app): better application monitoring (#84)

* enh(web): refactor link navigation

* enh(app): better sentry configuration

* fix: headless dialog

.changeset/rich-phones-clap.md

@@ -0,0 +1,11 @@
+---
+'@snipcode/domain': patch
+'@snipcode/front': patch
+'@snipcode/backend': patch
+'@snipcode/web': patch
+---
+
+Update the readme of the package domain
+Fix Next.js link navigation in the web app
+Configure Sentry in the frontend
+Update the CI to release the sourcemaps

.github/workflows/build.yml

@@ -8,6 +8,7 @@ env:
  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+ SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
 concurrency:
  group: "${{ github.workflow }}-${{ github.head_ref || github.run_id }}"
@@ -70,12 +71,17 @@ jobs:
  - name: Install Vercel CLI
  run: npm install --global vercel@latest
 
+ - name: Generate Application Version
+ run: |
+ RELEASE_VERSION="${{ github.head_ref }}-$(git rev-parse --short ${{ github.sha }})"
+ echo "APP_VERSION=$RELEASE_VERSION" >> $GITHUB_ENV
+
  - name: Pull Vercel Environment Information
  run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
 
  - name: Build Project Artifacts
  env:
- APP_VERSION: ${{ github.sha }}
+ SENTRY_RELEASE: ${{ env.APP_VERSION }}
  run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
 
  - name: Deploy Project Artifacts to Vercel

.github/workflows/deploy-backend.yml

@@ -19,6 +19,7 @@ env:
  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  AWS_DEFAULT_REGION: ${{ secrets.AWS_REGION }}
+ RELEASE_VERSION: ${{ github.event.inputs.version }}
 
 jobs:
  sourcemaps:
@@ -61,7 +62,7 @@ jobs:
  IMAGE_TAG: ${{ inputs.version }}
  run: |
  aws ecr-public get-login-password --region $REGION | docker login --username AWS --password-stdin $REGISTRY
- docker build -t $REPOSITORY:$IMAGE_TAG .
+ docker build -t $REPOSITORY:$IMAGE_TAG --build-arg APP_VERSION=$IMAGE_TAG .
  docker tag $REPOSITORY:$IMAGE_TAG $REGISTRY/$REPOSITORY:$IMAGE_TAG
  docker tag $REPOSITORY:$IMAGE_TAG $REGISTRY/$REPOSITORY:latest
  docker push --all-tags $REGISTRY/$REPOSITORY

.github/workflows/deploy-frontend.yml

@@ -11,6 +11,7 @@ on:
 env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+ SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
 jobs:
  deploy:
@@ -30,9 +31,14 @@ jobs:
  - name: Pull Vercel Environment Information
  run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
 
+ - name: Generate Application Version
+ run: |
+ RELEASE_VERSION="${{ inputs.version }}-$(git rev-parse --short ${{ github.sha }})"
+ echo "APP_VERSION=$RELEASE_VERSION" >> $GITHUB_ENV
+
  - name: Build Project Artifacts
  env:
- APP_VERSION: $(git rev-parse --short ${{ github.sha }})
+ SENTRY_RELEASE: ${{ env.APP_VERSION }}
  run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
 
  - name: Deploy Project Artifacts to Vercel

apps/web/.env.example

@@ -3,5 +3,7 @@ NEXT_PUBLIC_GITHUB_CLIENT_ID=<github_client_id_here>
 NEXT_PUBLIC_SERVER_URL=http:https://localhost:7501/graphql
 NEXT_PUBLIC_APP_URL=http:https://localhost:7500
 NEXT_PUBLIC_SENTRY_DSN=
+NEXT_PUBLIC_SENTRY_ENABLED=false
+SENTRY_AUTH_TOKEN=
 SHAREABLE_HOST=http:https://localhost:7500
 EMBEDDABLE_HOST=http:https://localhost:7502

apps/web/.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
  'next-sitemap.js',
  'sentry.client.config.js',
  'sentry.server.config.js',
+ 'sentry.edge.config.js',
  '.eslintrc.js',
  ],
  parserOptions: {

apps/web/env.d.ts

@@ -2,6 +2,8 @@ export type EnvironmentVariables = {
  APP_ENV: string;
  NEXT_PUBLIC_APP_URL: string;
  NEXT_PUBLIC_GITHUB_CLIENT_ID: string;
+ NEXT_PUBLIC_SENTRY_DSN: string;
+ NEXT_PUBLIC_SENTRY_ENABLED: string;
  NEXT_PUBLIC_SERVER_URL: string;
 };
 

apps/web/next.config.js

@@ -9,12 +9,12 @@ const nextConfigOptions = {
  transpilePackages: ['@snipcode/front'],
 };
 
-// For all available options, see: https://github.com/getsentry/sentry-webpack-plugin#options.
-const sentryWebpackPluginOptions = {
- dryRun: true,
- silent: true,
-};
-
-// 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(nextConfigOptions, sentryWebpackPluginOptions, { hideSourceMaps: true });
+module.exports = withSentryConfig(nextConfigOptions, {
+ hideSourceMaps: true,
+ org: 'snipcode',
+ project: 'frontend',
+ // release: "[email protected]",
+ authToken: process.env.SENTRY_AUTH_TOKEN, // An auth token is required for uploading source maps.
+ silent: false,
+ telemetry: false,
+});

apps/web/package.json

@@ -19,7 +19,7 @@
  "@snipcode/front": "workspace:*",
  "@snipcode/utils": "workspace:*",
  "classnames": "2.5.1",
- "graphql": "16.8.1",
+ "graphql": "16.9.0",
  "next": "14.2.4",
  "next-seo": "6.5.0",
  "react": "18.3.1",

apps/web/sentry.client.config.js

@@ -1,9 +1,19 @@
 import * as Sentry from '@sentry/nextjs';
 
-const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
-
 Sentry.init({
- dsn: SENTRY_DSN,
+ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV || 'development',
+ // Replay may only be enabled for the client-side
+ integrations: [Sentry.replayIntegration()],
+ enabled: process.env.NEXT_PUBLIC_SENTRY_ENABLED === 'true',
+ // Set tracesSampleRate to 1.0 to capture 100% of transactions for tracing. We recommend adjusting this value in production
  tracesSampleRate: 1.0,
+
+ // Capture Replay for 10% of all sessions, plus for 100% of sessions with an error
+ replaysSessionSampleRate: 0.1,
+ replaysOnErrorSampleRate: 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
 });

apps/web/sentry.edge.config.js

@@ -1,8 +1,6 @@
 import * as Sentry from '@sentry/nextjs';
 
-const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
-
 Sentry.init({
- dsn: SENTRY_DSN,
+ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
 });

apps/web/sentry.server.config.js

@@ -1,8 +1,8 @@
 import * as Sentry from '@sentry/nextjs';
 
-const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
-
 Sentry.init({
- dsn: SENTRY_DSN,
+ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+ // Set tracesSampleRate to 1.0 to capture 100% of transactions for tracing. We recommend adjusting this value in production
  tracesSampleRate: 1.0,
 });

apps/web/src/components/layout/private/header.tsx

@@ -47,18 +47,18 @@ const Header = () => {
  </div>
  <div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
  {navigation.map((item) => (
- <Link href={item.href} key={item.name}>
- <a
-  aria-current={isActive(pathname, item.href) ? 'page' : undefined}
- className={classNames(
- isActive(pathname, item.href)
-  ? 'border-gray-900 text-gray-900'
-  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
-  'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
-  )}
- >
-  {item.name}
- </a>
+ <Link
+ aria-current={isActive(pathname, item.href) ? 'page' : undefined}
+ className={classNames(
+ isActive(pathname, item.href)
+ ? 'border-gray-900 text-gray-900'
+ : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+ 'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
+ )}
+ href={item.href}
+ key={item.name}
+ >
+ {item.name}
  </Link>
  ))}
  </div>
@@ -81,10 +81,11 @@ const Header = () => {
  leaveTo="transform opacity-0 scale-95"
  >
  <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
- <Link href="/app/profile">
- <a className="block px-4 py-2 text-sm text-gray-700 hover:text-gray-800 hover:bg-gray-100">
- Profile
- </a>
+ <Link
+ className="block px-4 py-2 text-sm text-gray-700 hover:text-gray-800 hover:bg-gray-100"
+ href="/app/profile"
+ >
+ Profile
  </Link>
  <Menu.Item>
  <button
@@ -142,10 +143,11 @@ const Header = () => {
  </div>
  </div>
  <div className="mt-3 space-y-1">
- <Link href="/app/profile">
- <a className="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
- Profile
- </a>
+ <Link
+ className="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
+ href="/app/profile"
+ >
+ Profile
  </Link>
  <Disclosure.Button
  className="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"

apps/web/src/components/snippets/public-snippet.tsx

@@ -17,20 +17,13 @@ const PublicSnippet = ({ snippet }: Props) => {
  <div className="flex items-center">
  <div>
  <Link href={`/users/${user.username}`}>
- <a>
- <UserAvatar name={user?.username} url={user?.pictureUrl} />
- </a>
+ <UserAvatar name={user?.username} url={user?.pictureUrl} />
  </Link>
  </div>
  <div className="ml-2">
  <div className="font-bold">
- <Link href={`/users/${user.username}`}>
- <a>{user.username}</a>
- </Link>{' '}
- /{' '}
- <Link href={`/snippets/${snippet.id}`}>
- <a>{snippet.name}</a>
- </Link>
+ <Link href={`/users/${user.username}`}>{user.username}</Link> /{' '}
+ <Link href={`/snippets/${snippet.id}`}>{snippet.name}</Link>
  </div>
  <div className="text-xs text-gray-400">{snippet.createdAt}</div>
  </div>

apps/web/src/instrumentation.ts

@@ -0,0 +1,11 @@
+export async function register() {
+ // eslint-disable-next-line turbo/no-undeclared-env-vars
+ if (process.env.NEXT_RUNTIME === 'nodejs') {
+ await import('../sentry.server.config');
+ }
+
+ // eslint-disable-next-line turbo/no-undeclared-env-vars
+ if (process.env.NEXT_RUNTIME === 'edge') {
+ await import('../sentry.edge.config');
+ }
+}

packages/domain/README.md

@@ -29,14 +29,22 @@ Create the .env file from the template. This file is useful for test executions,
 cp .env.template .env
 ```
 
+Create git branch for your feature; there is no convention for the branch name.
+```shell
+git checkout -b your-feature-name
+```
+
 ### Connect to the local database locally
 This project uses PlanetScale as the database.<br>
 To connect to the database locally, you must authenticate first (Ask the credentials to [@tericcabrel](https://github.com/tericcabrel)).<br>
-Once authenticated from the terminal, execute the commands below on two separate terminals.
+Once authenticated from the terminal, execute the commands below to create a database branch for your feature and create local tunnel to it.
+```shell
+yarn db:branch:dev
+yarn db:branch:connect
+```
+Open a second terminal and run the command below to start the shadow database; 
+this is only necessary to run generate or execute database migrations with prisma schema
 ```shell
-# On a first terminal
-yarn db:dev
-# On a second terminal (only necessary if you update the prisma schema)
 yarn db:shadow
 ```
 
@@ -45,6 +53,12 @@ The shadow database runs on Docker, you can stop it when you don't need it
 yarn db:shadow:stop
 ```
 
+### Connect to the development database
+The development database is used to beta test features. Execute the command below to connect to it
+```shell
+yarn db:dev:connect
+```
+
 ### Run the database migration, generate Prisma types and seed the database with default data
 ```shell
 yarn db:generate

packages/domain/package.json

@@ -12,8 +12,9 @@
  "clean": "rm -rf .turbo dist coverage",
  "lint": "eslint --fix",
  "env": "dotenv -e .env.local",
- "db:dev:create": "pscale branch create core-db $(git rev-parse --abbrev-ref HEAD)",
- "db:dev:connect": "pscale connect core-db $(git rev-parse --abbrev-ref HEAD) --port 3311",
+ "db:branch:create": "pscale branch create core-db $(git rev-parse --abbrev-ref HEAD)",
+ "db:branch:connect": "pscale connect core-db $(git rev-parse --abbrev-ref HEAD) --port 3311",
+ "db:dev:connect": "pscale connect core-db dev --port 3311",
  "db:shadow": "docker run -d --rm -e MYSQL_ROOT_PASSWORD=secret -e MYSQL_DATABASE=snipcode --name snipcode-shadow-db -p 3312:3306 mysql:8.0.34",
  "db:shadow:stop": "docker kill snipcode-shadow-db && docker container prune -f",
  "db:deploy:create": "pscale deploy-request create core-db dev",