Install Sentry

NOTES.md

@@ -26,7 +26,6 @@
 - [ ] URL builder helpers
 - [ ] Form to request resend link(s) for email address
 - [ ] Resend confirmation if an RSVP enters an existing email
-- [ ] Add Sentry to frontend
 - [ ] Diff dates in `notify` so that they are omitted when unchanged
 - [ ] Investigate why some emailed URLs use incorrect hosts for Netlify Deploy Preview
 - [ ] Stably sort RSVP list
@@ -48,6 +47,8 @@
   - [x] Delete unconfirmed events
   - [x] Delete unconfirmed responses
   - [ ] Archive completed events
+- [x] Add Sentry to frontend
+- [x] Add Sentry to Prisma
 - [x] Write README
 - [x] Clean up relative imports
 - [x] Spinners on loading pages with fun text

README.md

@@ -44,6 +44,7 @@ Example values are provided in [.env.example](.env.example). Make a copy of that
 | FROM_NAME           | string | yes       | The human-readable “from” name on outgoing emails                                                                                          |
 | LOCAL_CHROMIUM      | string |           | Path to the Chromium binary, used to generate Open Graph event preview images                                                              |
 | SENTRY_DSN          | string | yes       | DSN URL for your Sentry project, where errors are reported                                                                                 |
+| SENTRY_ENV          | string | no        | Custom name reported for the environment for frontend Sentry errors. If unset, defaults to `process.env.NODE_ENV`.                         |
 | SITE_HOST           | string | yes       | The hostname of your Freevite instance, used in absolute URLs (e.g. email content)                                                         |
 | SMTP_HOST           | string | yes       | Hostname for your SMTP outgoing mail server                                                                                                |
 | SMTP_PASS           | string | yes       | Password for your SMTP outgoing mail server                                                                                                |

api/package.json

@@ -4,12 +4,14 @@
   "private": true,
   "dependencies": {
     "@aws-sdk/client-s3": "^3.289.0",
+    "@envelop/sentry": "5",
     "@react-email/components": "^0.0.25",
     "@redwoodjs/api": "8.4.0",
     "@redwoodjs/graphql-server": "8.4.0",
     "@redwoodjs/mailer-core": "8.4.0",
     "@redwoodjs/mailer-handler-nodemailer": "8.4.0",
     "@redwoodjs/mailer-renderer-react-email": "8.4.0",
+    "@sentry/node": "7",
     "@sparticuz/chromium": "^129.0.0",
     "handlebars": "^4.7.8",
     "ics": "^3.8.1",

api/src/functions/graphql.ts

@@ -1,3 +1,5 @@
+import { useSentry } from '@envelop/sentry'
+
 import { createGraphQLHandler } from '@redwoodjs/graphql-server'
 
 import directives from 'src/directives/**/*.{js,ts}'
@@ -13,6 +15,7 @@ const baseHandler = createGraphQLHandler({
   directives,
   sdls,
   services,
+  extraPlugins: [useSentry()],
   onException: () => {
     // Disconnect from your database with an unhandled exception.
     db.$disconnect()

netlify.toml

@@ -34,3 +34,9 @@ schedule = '*/15 * * * *'
 
 [functions."tidyUnconfirmed"]
 schedule = '0 9 * * *'
+
+[[plugins]]
+package = "@sentry/netlify-build-plugin"
+[plugins.inputs]
+sentryOrg = "kesdev"
+sentryProject = "freevite"

package.json

@@ -18,7 +18,8 @@
   },
   "dependencies": {
     "@netlify/functions": "^2.8.2",
-    "@sentry/serverless": "^7.38.0",
+    "@sentry/serverless": "^7.114.0",
+    "@sentry/vite-plugin": "^2.22.6",
     "common-tags": "^1.8.2",
     "dayjs": "^1.11.13",
     "escape-html": "^1.0.3",

redwood.toml

@@ -6,35 +6,35 @@
 # https://redwoodjs.com/docs/app-configuration-redwood-toml
 
 [web]
-  title = "Freevite"
-  port = 8910
-  apiUrl = "${API_URL:/.netlify/functions}"
-  includeEnvironmentVariables = [
-    'SITE_HOST',
+title = "Freevite"
+port = 8910
+apiUrl = "${API_URL:/.netlify/functions}"
+includeEnvironmentVariables = [
+  'SITE_HOST',
 
-    'SENTRY_DSN',
+  'SENTRY_DSN', # Why doesn't this work?
 
-    # Netlify: https://docs.netlify.com/configure-builds/environment-variables
-    'CONTEXT',
-    'DEPLOY_PRIME_URL',
+  # Netlify: https://docs.netlify.com/configure-builds/environment-variables
+  'CONTEXT',
+  'DEPLOY_PRIME_URL',
 
-    # Email
-    'FROM_EMAIL',
-    'SMTP_HOST',
-    'SMTP_PORT',
-    'SMTP_USER',
-    'SMTP_PASS',
+  # Email
+  'FROM_EMAIL',
+  'SMTP_HOST',
+  'SMTP_PORT',
+  'SMTP_USER',
+  'SMTP_PASS',
 
-    # S3
-    'S3_REGION',
-    'S3_BUCKET',
-    'S3_NAMESPACE',
-    'S3_USER',
-    'S3_PASS',
-  ]
+  # S3
+  'S3_REGION',
+  'S3_BUCKET',
+  'S3_NAMESPACE',
+  'S3_USER',
+  'S3_PASS',
+]
 [api]
-  port = 8911
+port = 8911
 [browser]
-  open = true
+open = true
 [notifications]
-  versionUpdates = ["latest"]
+versionUpdates = ["latest"]

web/package.json

@@ -16,6 +16,8 @@
     "@redwoodjs/forms": "8.4.0",
     "@redwoodjs/router": "8.4.0",
     "@redwoodjs/web": "8.4.0",
+    "@sentry/browser": "7",
+    "@sentry/react": "7",
     "@vermaysha/discord-webhook": "^1.4.0",
     "bulma": "<1",
     "bulma-prefers-dark": "^0.1.0-beta.1",

web/src/App.tsx

@@ -1,19 +1,21 @@
-import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
+import { RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
+import Sentry from 'src/lib/sentry'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
 import './index.scss'
 
 const App = () => (
-  <FatalErrorBoundary page={FatalErrorPage}>
+  // @ts-expect-error FIXME: The error boundary type is incompatible
+  <Sentry.ErrorBoundary fallback={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
       <RedwoodApolloProvider>
         <Routes />
       </RedwoodApolloProvider>
     </RedwoodProvider>
-  </FatalErrorBoundary>
+  </Sentry.ErrorBoundary>
 )
 
 export default App

web/src/lib/sentry.ts

@@ -0,0 +1,24 @@
+import * as Sentry from '@sentry/react'
+
+function main() {
+  const environment = process.env.REDWOOD_ENV_SENTRY_ENV || process.env.NODE_ENV
+  // HACK: Redwood+Netlify doesn't seem to be obeying our `includeEnvironmentVariables` setting
+  const dsn = process.env.SENTRY_DSN || process.env.REDWOOD_ENV_SENTRY_DSN
+  if (!dsn) {
+    console.error(
+      'Missing SENTRY_DSN environment variable. Sentry is disabled.'
+    )
+    return
+  }
+
+  Sentry.init({
+    dsn,
+    environment,
+    integrations: [new Sentry.BrowserTracing()],
+    tracesSampleRate: 1.0,
+  })
+}
+
+main()
+
+export default Sentry

web/vite.config.ts

@@ -1,5 +1,6 @@
 import dns from 'dns'
 
+import { sentryVitePlugin } from '@sentry/vite-plugin'
 import { defineConfig, UserConfig } from 'vite'
 
 import redwood from '@redwoodjs/vite'
@@ -13,7 +14,15 @@ dns.setDefaultResultOrder('verbatim')
  * @type {import('vite').UserConfig}
  */
 const viteConfig: UserConfig = {
-  plugins: [redwood()],
+  build: { sourcemap: true },
+  plugins: [
+    redwood(),
+    sentryVitePlugin({
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      org: 'kesdev',
+      project: 'freevite',
+    }),
+  ],
 }
 
 export default defineConfig(viteConfig)