joshuawootonn · joshuawootonn · Dec 22, 2025
diff --git a/api/.env.example b/api/.env.example
@@ -1,10 +1,32 @@
-DATABASE_URL=
-SECRET_KEY_BASE=
-GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
-APP_URL=
-API_URL=
-PHX_HOST=
-MIX_ENV=
-MAILPACE_API_KEY=
-KAMAL_REGISTRY_PASSWORD=
+# Database
+DATABASE_URL=ecto://USER:PASS@HOST/DATABASE
+
+# Redis
+REDIS_URL=redis://hostname:6379/0
+
+# Phoenix Secret Key
+SECRET_KEY_BASE=generate_with_mix_phx.gen.secret
+
+# Server Configuration
+PHX_SERVER=true
+PHX_HOST=42colors.com
+PORT=4000
+
+# App URLs
+APP_URL=https://42colors.com
+API_URL=https://api.42colors.com
+ENV=prod
+
+# Google OAuth
+GOOGLE_CLIENT_ID=your_google_client_id
+GOOGLE_CLIENT_SECRET=your_google_client_secret
+
+# Mailer
+MAILPACE_API_KEY=your_mailpace_api_key
+
+# Admin Dashboard
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=your_secure_password
+
+# Sentry Error Reporting
+SENTRY_DSN=https://your-sentry-dsn@sentry.io/project-id
diff --git a/api/config/config.exs b/api/config/config.exs
@@ -61,6 +61,12 @@ config :logger, :console,
 # Use Jason for JSON parsing in Phoenix
 config :phoenix, :json_library, Jason
 
+# Sentry configuration
+config :sentry,
+  environment_name: Mix.env(),
+  enable_source_code_context: true,
+  root_source_code_paths: [File.cwd!()]
+
 client_id = System.get_env("GOOGLE_CLIENT_ID")
 client_secret = System.get_env("GOOGLE_CLIENT_SECRET")
 # Google Auth Credentials

diff --git a/api/config/runtime.exs b/api/config/runtime.exs
@@ -21,6 +21,13 @@ if System.get_env("PHX_SERVER") do
 end
 
 if config_env() == :prod do
+  # Sentry configuration for production
+  if sentry_dsn = System.get_env("SENTRY_DSN") do
+    config :sentry,
+      dsn: sentry_dsn,
+      environment_name: :prod
+  end
+
   # Redis configuration is required in production
   redis_url =
     System.get_env("REDIS_URL") ||

diff --git a/api/lib/api/application.ex b/api/lib/api/application.ex
@@ -5,6 +5,11 @@ defmodule Api.Application do
 
   @impl true
   def start(_type, _args) do
+    # Set up Sentry logger handler before starting the supervision tree
+    :logger.add_handler(:sentry_handler, Sentry.LoggerHandler, %{
+      config: %{metadata: [:file, :line]}
+    })
+
     children = [
       ApiWeb.Telemetry,
       Api.PromEx,

diff --git a/api/lib/api_web/endpoint.ex b/api/lib/api_web/endpoint.ex
@@ -1,5 +1,6 @@
 defmodule ApiWeb.Endpoint do
   use Phoenix.Endpoint, otp_app: :api
+  use Sentry.PlugCapture
 
   # The session will be stored in the cookie and signed,
   # this means its contents can be read but not tampered with.
@@ -57,6 +58,7 @@ defmodule ApiWeb.Endpoint do
   plug Plug.MethodOverride
   plug Plug.Head
   plug Plug.Session, @session_options
+  plug Sentry.PlugContext
   plug CORSPlug
   plug ApiWeb.Router
 end
diff --git a/api/mix.exs b/api/mix.exs
@@ -71,7 +71,9 @@ defmodule Api.MixProject do
       {:redix, "~> 1.5"},
       {:tidewave, "~> 0.5", only: :dev},
       {:mix_test_watch, "~> 1.0", only: [:dev, :test], runtime: false},
-      {:prom_ex, "~> 1.9"}
+      {:prom_ex, "~> 1.9"},
+      {:sentry, "~> 10.0"},
+      {:hackney, "~> 1.8"}
     ]
   end
 

diff --git a/web/app/error.tsx b/web/app/error.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-4">
+      <h2 className="mb-4 text-xl font-bold">Something went wrong!</h2>
+      <button
+        onClick={() => reset()}
+        className="rounded bg-black px-4 py-2 text-white hover:bg-gray-800"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}
diff --git a/web/app/global-error.tsx b/web/app/global-error.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        <NextError statusCode={500} />
+      </body>
+    </html>
+  );
+}
diff --git a/web/instrumentation-client.ts b/web/instrumentation-client.ts
@@ -1,3 +1,5 @@
+import "./sentry.client.config";
+
 import assert from "assert";
 import posthog from "posthog-js";
 

diff --git a/web/instrumentation.ts b/web/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from "@sentry/nextjs";
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./sentry.server.config");
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("./sentry.edge.config");
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/web/next.config.ts b/web/next.config.ts
@@ -1,3 +1,4 @@
+import { withSentryConfig } from "@sentry/nextjs";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
@@ -23,4 +24,43 @@ const nextConfig: NextConfig = {
   skipTrailingSlashRedirect: true,
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
+
+  org: process.env.SENTRY_ORG,
+  project: process.env.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,
+  },
+
+  // 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",
+
+  // Configure source maps
+  sourcemaps: {
+    deleteSourcemapsAfterUpload: true,
+  },
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: true,
+});