feat: add sentry error tracking

We need to track down some persistent errors in the app, and should have better visibility in general into web client performance - this will help with both.

Staging/prod configuration are included in the build script here, and I've configured separate projects for dev/staging/prod in Sentry.

Author: travis

.env.tpl

@@ -14,4 +14,9 @@ NEXT_PUBLIC_DISABLE_PLAN_GATE=false
 
 # point these at the marketing website and referrals service 
 NEXT_PUBLIC_REFERRAL_URL=http://localhost:3001/referred
-NEXT_PUBLIC_REFERRALS_SERVICE_URL=http://localhost:4001
+NEXT_PUBLIC_REFERRALS_SERVICE_URL=http://localhost:4001
+
+# Sentry
+NEXT_PUBLIC_SENTRY_DSN=https://[email protected]/4508462420393984
+NEXT_PUBLIC_SENTRY_ORG=storacha-it
+NEXT_PUBLIC_SENTRY_PROJECT=console-dev

.github/workflows/deploy-storacha.yml

@@ -44,6 +44,9 @@ jobs:
           echo "NEXT_PUBLIC_STRIPE_TRIAL_PRICING_TABLE_ID=prctbl_1QIDHGF6A5ufQX5vOK9Xl8Up" >> .env
           echo "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51LO87hF6A5ufQX5viNsPTbuErzfavdrEFoBuaJJPfoIhzQXdOUdefwL70YewaXA32ZrSRbK4U4fqebC7SVtyeNcz00qmgNgueC" >> .env
           echo "NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_LINK=https://billing.stripe.com/p/login/test_6oE29Gff99KO6mk8ww" >> .env
+          echo "NEXT_PUBLIC_SENTRY_DSN=https://[email protected]/4508462417772544" >> .env
+          echo "NEXT_PUBLIC_SENTRY_ORG=storacha-it" >> .env
+          echo "NEXT_PUBLIC_SENTRY_PROJECT=console-staging" >> .env
           
           # use example.com in preview because we can't predict the preview URL of the storacha.network site          
           echo "NEXT_PUBLIC_REFERRAL_URL=http://staging.storacha.network/referred" >> .env
@@ -141,6 +144,9 @@ jobs:
           echo "NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_LINK=https://billing.stripe.com/p/login/cN22aA62U6bO1sA9AA" >> .env
           echo "NEXT_PUBLIC_REFERRAL_URL=http://storacha.network/referred" >> .env
           echo "NEXT_PUBLIC_REFERRALS_SERVICE_URL=https://referrals.storacha.network" >> .env
+          echo "NEXT_PUBLIC_SENTRY_DSN=https://[email protected]/4508456692940801" >> .env
+          echo "NEXT_PUBLIC_SENTRY_ORG=storacha-it" >> .env
+          echo "NEXT_PUBLIC_SENTRY_PROJECT=console" >> .env
       - run: pnpm pages:build
         # as long as this uses https://github.com/cloudflare/next-on-pages/blob/dc529d7efa8f8568ea8f71b5cdcf78df89be6c12/packages/next-on-pages/bin/index.js,
         # env vars won't get passed through to wrangler, so if wrangler will need them, write them to .env like the previous step

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Sentry Config File
+.env.sentry-build-plugin

next.config.js

@@ -6,3 +6,45 @@ const nextConfig = {
 }
 
 module.exports = nextConfig
+
+
+// Injected content via Sentry wizard below
+
+const { withSentryConfig } = require("@sentry/nextjs");
+
+module.exports = withSentryConfig(
+  module.exports,
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+
+    org: process.env.NEXT_PUBLIC_SENTRY_ORG,
+    project: process.env.NEXT_PUBLIC_SENTRY_PROJECT,
+
+    // Only print logs for uploading source maps in CI
+    silent: !process.env.CI,
+
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
+
+    // Automatically annotate React components to show their full name in breadcrumbs and session replay
+    reactComponentAnnotation: {
+      enabled: true,
+    },
+
+    // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+    // This can increase your server load as well as your hosting bill.
+    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+    // side errors will fail.
+    // tunnelRoute: "/monitoring",
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+  }
+);

package.json

@@ -19,6 +19,7 @@
     "@ipld/car": "^5.2.4",
     "@ipld/dag-json": "^10.2.2",
     "@ipld/dag-ucan": "^3.4.0",
+    "@sentry/nextjs": "^8",
     "@ucanto/client": "^9.0.1",
     "@ucanto/core": "^10.0.1",
     "@ucanto/interface": "^10.0.1",