update to next 16 stable and add sentry

Author: mattdjenkinson

apps/login/.gitignore

@@ -1,3 +1,6 @@
 custom-config.js
 .env*.local
 standalone
+
+# Sentry Config File
+.env.sentry-build-plugin

apps/login/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/login/next.config.mjs apps/login/next.config.tsapps/login/next.config.mjs renamed to apps/login/next.config.ts

@@ -1,3 +1,5 @@
+import { withSentryConfig } from "@sentry/nextjs";
+import type { NextConfig } from "next";
 import createNextIntlPlugin from "next-intl/plugin";
 import { DEFAULT_CSP } from "./constants/csp.js";
 
@@ -49,41 +51,36 @@ const secureHeaders = (() => {
 
 const imageRemotePatterns = [
   {
-    protocol: "http",
+    protocol: "http" as const,
     hostname: "localhost",
     port: "8080",
     pathname: "/**",
   },
   {
-    protocol: "https",
+    protocol: "https" as const,
     hostname: "*.zitadel.*",
     port: "",
     pathname: "/**",
   },
-];
+] satisfies NonNullable<NextConfig["images"]>["remotePatterns"];
 
 if (process.env.ZITADEL_API_URL) {
   imageRemotePatterns.push({
-    protocol: "https",
+    protocol: "https" as const,
     hostname: process.env.ZITADEL_API_URL?.replace("https://", "") || "",
     port: "",
     pathname: "/**",
   });
 }
 
-const nextConfig = {
+const nextConfig: NextConfig = {
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
-  output: process.env.NEXT_OUTPUT_MODE || undefined,
+  output: process.env.NEXT_OUTPUT_MODE as "standalone" | "export" | undefined,
   reactStrictMode: true, // Recommended for the `pages` directory, default in `app`.
-  experimental: {
-    dynamicIO: true,
-  },
+  cacheComponents: true,
   images: {
     remotePatterns: imageRemotePatterns,
   },
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
   async headers() {
     return [
       {
@@ -94,4 +91,29 @@ const nextConfig = {
   },
 };
 
-export default withNextIntl(nextConfig);
+export default withSentryConfig(withNextIntl(nextConfig), {
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+  org: "sentry",
+
+  project: "auth-ui",
+  sentryUrl: process.env.NEXT_PUBLIC_SENTRY_URL,
+
+  // 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,
+
+  // 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",
+
+  
+});

apps/login/package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@headlessui/react": "^2.1.9",
     "@heroicons/react": "2.1.3",
+    "@sentry/nextjs": "^10.34.0",
     "@tailwindcss/forms": "0.5.7",
     "@vercel/analytics": "^1.2.2",
     "@zitadel/client": "workspace:*",
@@ -35,13 +36,13 @@
     "fathom-client": "^3.7.2",
     "lucide-react": "0.469.0",
     "moment": "^2.29.4",
-    "next": "15.6.0-canary.58",
+    "next": "16.1.1",
     "next-intl": "^4.7.0",
     "next-themes": "^0.4.6",
     "nice-grpc": "2.0.1",
     "qrcode.react": "^3.1.0",
-    "react": "19.1.4",
-    "react-dom": "19.1.4",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-hook-form": "7.39.5",
     "tinycolor2": "1.4.2",
     "uuid": "^11.1.0"
@@ -52,8 +53,8 @@
     "@testing-library/react": "^16.3.0",
     "@types/ms": "2.1.0",
     "@types/node": "^22.14.1",
-    "@types/react": "19.1.4",
-    "@types/react-dom": "19.1.4",
+    "@types/react": "19.2.3",
+    "@types/react-dom": "19.2.3",
     "@types/tinycolor2": "1.4.3",
     "@types/uuid": "^10.0.0",
     "@vercel/git-hooks": "1.0.0",

apps/login/sentry.server.config.ts

@@ -0,0 +1,16 @@
+// 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";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Enable sending user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+});

apps/login/src/app/(main)/error.tsx

@@ -3,11 +3,13 @@
 import { Boundary } from "@/components/boundary";
 import { Button } from "@/components/button";
 import { Translated } from "@/components/translated";
+import { captureException } from "@sentry/nextjs";
 import { useEffect } from "react";
 
 export default function Error({ error, reset }: any) {
   useEffect(() => {
     console.log("logging error:", error);
+    captureException(error);
   }, [error]);
 
   return (

apps/login/src/app/(main)/error/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Button } from "@/components/button";
+
+const page = () => {
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          throw new Error("Test error");
+        }}
+      >
+        Test
+      </Button>
+    </div>
+  );
+};
+
+export default page;

apps/login/src/app/global-error.tsx

@@ -4,6 +4,8 @@ import { Boundary } from "@/components/boundary";
 import { Button } from "@/components/button";
 import { ThemeWrapper } from "@/components/theme-wrapper";
 import { Translated } from "@/components/translated";
+import { captureException } from "@sentry/nextjs";
+import { useEffect } from "react";
 
 export default function GlobalError({
   error,
@@ -12,6 +14,9 @@ export default function GlobalError({
   error: Error & { digest?: string };
   reset: () => void;
 }) {
+  useEffect(() => {
+    captureException(error);
+  }, [error]);
   return (
     // global-error must include html and body tags
     <html>

apps/login/src/instrumentation-client.ts

@@ -0,0 +1,29 @@
+// This file configures the initialization of Sentry on the client.
+// The added config here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Add optional integrations for additional features
+  integrations: [Sentry.replayIntegration()],
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Define how likely Replay events are sampled.
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // Define how likely Replay events are sampled when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+
+  // Enable sending user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

apps/login/src/instrumentation.ts

@@ -0,0 +1,7 @@
+import * as Sentry from "@sentry/nextjs";
+
+export async function register() {
+  await import("../sentry.server.config");
+}
+
+export const onRequestError = Sentry.captureRequestError;