Add Sentry Monitoring (and break API routes)

.github/actions/deploy/action.yml

@@ -13,6 +13,9 @@ inputs:
   git-branch:
     description: Used to prefix the deployment stack name
     required: false
+  sentry-token:
+    description: Auth token for Sentry
+    required: true
 outputs:
   stack-name:
     description: Name of the deployed stack on AWS
@@ -41,6 +44,7 @@ runs:
         APP: ${{ inputs.app }}
         GIT_BRANCH: ${{ inputs.git-branch }}
         BASE_DOMAIN_NAME: ${{ inputs.base-domain }}
+        SENTRY_AUTH_TOKEN: ${{ inputs.sentry-token }}
       run: |
         yarn cdk bootstrap
         yarn cdk deploy

.github/workflows/deploy-app.yml

@@ -13,7 +13,7 @@ jobs:
       git-branch: ${{ steps.branch-and-ref.outputs.branch }}
       git-ref: ${{ steps.branch-and-ref.outputs.ref }}
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v3
       - name: Comment building status on PR
         uses: ostmodern/comment-url-on-pr@v1
         with:
@@ -51,7 +51,7 @@ jobs:
     outputs:
       url: ${{ steps.cdk.outputs.url }}
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v3
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:
@@ -65,11 +65,13 @@ jobs:
           git-branch: ${{ needs.prepare.outputs.git-branch }}
           # hardcode domains until more accounts are supported
           base-domain: ${{ needs.prepare.outputs.git-branch == 'main' && 'skylark-dev.skylarkplatform.io' || 'legacy-skylark-development.skylarkplatform.io' }}
+          sentry-token: ${{ secrets.SENTRY_TOKEN }}
 
   signal:
     name: Signal
     runs-on: ubuntu-latest
     needs: deploy
+    if: always()
     steps:
       - uses: actions/github-script@v6
         id: additional-urls

.github/workflows/pr-checks.yml

@@ -38,6 +38,8 @@ jobs:
       - run: yarn
       # Check all apps build
       - run: yarn lerna-run build --parallel
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_TOKEN }}
 
   chromatic:
     needs: lint

.github/workflows/teardown-app.yml

@@ -20,7 +20,7 @@ jobs:
       git-branch: ${{ steps.branch-and-ref.outputs.branch }}
       git-ref: ${{ steps.branch-and-ref.outputs.ref }}
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v3
       - name: Comment status on PR
         uses: ostmodern/comment-url-on-pr@v1
         with:
@@ -56,7 +56,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: prepare
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v3
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:

.gitignore

@@ -37,4 +37,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 
+# Storybook
 build-storybook.log
+
+# Sentry
+.sentryclirc

README.md

@@ -1,39 +1,56 @@
 # Skylark Reference Apps
 
-## Core tech
+## Usage
+
+Running apps in `dev` mode works out of the box.
+
+To build an app locally you need to configure Sentry:
+
+1. Create a `.sentryclirc` file in the root repository directory
+2. Visit your [auth token user settings page](https://sentry.io/settings/account/api/auth-tokens/) and create or copy an existing token
+3. Add the token into the `.sentryclirc` file in the following format:
+
+```
+[auth]
+token=YOUR_SENTRY_TOKEN_HERE
+```
+
+## Tech
+
+### Core tech
 
 - Next.js
 - Tailwind CSS
 - Typescript
 
-## Monorepo tools
+### Monorepo tools
 
 - Yarn workspaces
 - Lerna?
 - next-transpile-modules
 
-## Additional packages
+### Additional packages
 
 - Storybook (and Chromatic?)
 - next-seo
 - @aws-amplify/auth
 - @aws-amplify/core
 - react-icons
 
-## Code standard tools
+### Code standard tools
 
 - ESlint
 - Prettier
 - Lint-staged & Husky (used together)
 
-## Testing
+### Testing
 
 - Jest
   - react-testing-library?
   - babel.config.js in packages is required for Jest testing only
 - Cypress
 
-## Deployment
+### Deployment
 
 - AWS Amplify for Next.js
 - Serverless Next.js

apps/media/next.config.js

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 
+const { withSentryConfig } = require("@sentry/nextjs");
 const withTM = require("next-transpile-modules")([
   "@skylark-reference-apps/lib",
   "@skylark-reference-apps/react",
@@ -9,4 +10,20 @@ const moduleExports = {
   reactStrictMode: true,
 };
 
-module.exports = withTM(moduleExports);
+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 = withTM(
+  withSentryConfig(moduleExports, sentryWebpackPluginOptions)
+);

apps/media/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@fontsource/inter": "^4.5.1",
     "@fontsource/outfit": "^4.5.2",
+    "@sentry/nextjs": "^6.19.6",
     "@skylark-reference-apps/lib": "*",
     "@skylark-reference-apps/react": "*",
     "next": "12.1.4",
@@ -25,6 +26,7 @@
     "@types/node": "17.0.4",
     "@types/react": "17.0.38",
     "autoprefixer": "^10.4.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "postcss": "^8.4.5",
     "tailwindcss": "^3.0.23",
     "typescript": "4.5.4"

apps/media/pages/_error.tsx

@@ -0,0 +1,59 @@
+import * as Sentry from "@sentry/nextjs";
+import NextErrorComponent, { ErrorProps as NextErrorProps } from "next/error";
+import { NextPageContext } from "next";
+
+type ErrorPageProps = {
+  err: Error;
+  statusCode: number;
+  isReadyToRender: boolean;
+  children?: React.ReactElement;
+};
+
+type ErrorProps = {
+  isReadyToRender: boolean;
+} & NextErrorProps;
+
+const ErrorPage = (props: ErrorPageProps): JSX.Element => {
+  const { statusCode, isReadyToRender, err, children = null } = props;
+
+  if (!isReadyToRender && err) {
+    Sentry.captureException(err);
+  }
+
+  return <>{children ?? <NextErrorComponent statusCode={statusCode} />}</>;
+};
+
+ErrorPage.getInitialProps = async (
+  props: NextPageContext
+): Promise<ErrorProps> => {
+  const { res, err, asPath } = props;
+
+  const errorInitialProps: ErrorProps =
+    (await NextErrorComponent.getInitialProps({
+      res,
+      err,
+    } as NextPageContext)) as ErrorProps;
+
+  errorInitialProps.isReadyToRender = true;
+
+  if (res?.statusCode === 404) {
+    return { statusCode: 404, isReadyToRender: true };
+  }
+
+  if (err) {
+    Sentry.captureException(err);
+    await Sentry.flush(2000);
+    return errorInitialProps;
+  }
+
+  Sentry.captureException(
+    new Error(
+      `_error.js getInitialProps missing data at path: ${asPath as string}`
+    )
+  );
+  await Sentry.flush(2000);
+
+  return errorInitialProps;
+};
+
+export default ErrorPage;

apps/media/sentry.client.config.js

@@ -0,0 +1,10 @@
+// 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";
+import { getSentryOptions } from "@skylark-reference-apps/lib";
+
+Sentry.init({
+  ...getSentryOptions({}),
+});

apps/media/sentry.properties

@@ -0,0 +1,3 @@
+defaults.url=https://sentry.io/
+defaults.org=ostmodern
+defaults.project=skylark-reference-apps

apps/media/sentry.server.config.js

@@ -0,0 +1,10 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+import { getSentryOptions } from "@skylark-reference-apps/lib";
+
+Sentry.init({
+  ...getSentryOptions({}),
+});

apps/storybook/package.json

@@ -35,6 +35,7 @@
     "autoprefixer": "^10.4.0",
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.3",
+    "eslint-plugin-prettier": "^4.0.0",
     "postcss": "^8.4.5",
     "tailwindcss": "^3.0.23",
     "typescript": "4.5.4",

package.json

@@ -9,6 +9,8 @@
   "license": "MIT",
   "scripts": {
     "lerna-run": "lerna run",
+    "lerna-exec": "lerna exec",
+    "deepclean": "lerna exec -- rm -rf node_modules && rm -rf node_modules",
     "lint": "lerna run --parallel lint",
     "test": "lerna run --parallel test",
     "test:ci": "lerna run --parallel test -- --ci --coverage",
@@ -19,6 +21,7 @@
     "dev": "lerna run --parallel dev"
   },
   "devDependencies": {
+    "@lerna/exec": "^4.0.0",
     "@lerna/run": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",

packages/infra/bin/infra.ts

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 import "source-map-support/register";
 import * as cdk from "aws-cdk-lib";
-import { SkylarkReferenceAppStack } from "../lib/stack";
 import { Builder } from "@sls-next/lambda-at-edge";
 import { pathExists } from "fs-extra";
+import { SkylarkReferenceAppStack } from "../lib/stack";
 
 const app = process.env.APP || "media";
 const gitBranch = process.env.GIT_BRANCH;
@@ -33,6 +33,7 @@ const main = async () => {
   const builder = new Builder(appPath, "./build", {
     args: ["build"],
     cwd: appPath,
+    useServerlessTraceTarget: true,
   });
 
   await builder.build();

packages/infra/package.json

@@ -13,13 +13,15 @@
     "@types/jest": "^26.0.10",
     "@types/node": "10.17.27",
     "aws-cdk": "2.19.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "jest": "^26.4.2",
     "ts-jest": "^26.2.0",
     "ts-node": "^9.0.0",
     "typescript": "~3.9.7"
   },
   "dependencies": {
     "@sls-next/cdk-construct": "^3.7.0",
+    "@sls-next/lambda-at-edge": "^3.7.0",
     "aws-cdk-lib": "2.19.0",
     "constructs": "^10.0.0",
     "fs-extra": "^10.0.1",

packages/lib/package.json

@@ -16,11 +16,13 @@
     "@babel/preset-typescript": "^7.16.0",
     "@types/jest": "^27.0.3",
     "eslint": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "jest": "^27.3.1",
     "jest-junit": "^13.0.0"
   },
   "dependencies": {
     "@aws-amplify/auth": "^4.4.1",
+    "@sentry/nextjs": "^6.19.6",
     "amazon-cognito-identity-js": "^5.2.3"
   }
 }

packages/lib/src/index.ts

@@ -1 +1,2 @@
-export * from "./cognito/index";
+export * from "./cognito";
+export * from "./sentry";

packages/lib/src/sentry/index.ts

@@ -0,0 +1 @@
+export * from "./sentry.config";

packages/lib/src/sentry/sentry.config.ts

@@ -0,0 +1,31 @@
+import { NodeOptions } from "@sentry/nextjs";
+
+type NextjsOptions = NodeOptions;
+
+interface SentryOpts {
+  dsn?: string;
+  environment?: string;
+}
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const NODE_ENV = process.env.NODE_ENV || process.env.NEXT_PUBLIC_NODE_ENV;
+
+// DSN from https://sentry.io/settings/ostmodern/projects/skylark-reference-apps/keys/
+const defaultDSN =
+  "https://[email protected]/6323940";
+
+export const getSentryOptions = ({
+  dsn,
+  environment,
+}: SentryOpts): NextjsOptions => ({
+  dsn: dsn || SENTRY_DSN || defaultDSN,
+  environment: environment || NODE_ENV,
+  // Disable when "next dev" is run
+  enabled: environment !== "development",
+  // 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
+});

packages/react/package.json

@@ -21,6 +21,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.0.3",
     "eslint": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "jest": "^27.3.1",
     "jest-junit": "^13.0.0",
     "react-icons": "^4.3.1"