The app is now wired to GlitchTip with the Sentry SDKs

frontend/.env.example

@@ -5,3 +5,7 @@ NEXT_PUBLIC_API_URL=http://localhost:3000/api
 NEXT_PUBLIC_APP_NAME=DyoLink
 # URL where users open the frontend (used for metadata, images, etc.)
 NEXT_PUBLIC_APP_URL=http://localhost:3001
+
+# GlitchTip frontend project DSN (optional locally). Baked into the Docker image in CI.
+# NEXT_PUBLIC_SENTRY_DSN=https://PUBLIC_KEY@errors.wixur.ir/2
+# NEXT_PUBLIC_SENTRY_ENVIRONMENT=development

frontend/Dockerfile

@@ -18,12 +18,16 @@ COPY . .
 ARG NEXT_PUBLIC_API_URL
 ARG NEXT_PUBLIC_APP_URL
 ARG NEXT_PUBLIC_APP_NAME
+ARG NEXT_PUBLIC_SENTRY_DSN
+ARG NEXT_PUBLIC_SENTRY_ENVIRONMENT
 
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV NODE_ENV=production
 ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
 ENV NEXT_PUBLIC_APP_URL=${NEXT_PUBLIC_APP_URL}
 ENV NEXT_PUBLIC_APP_NAME=${NEXT_PUBLIC_APP_NAME}
+ENV NEXT_PUBLIC_SENTRY_DSN=${NEXT_PUBLIC_SENTRY_DSN}
+ENV NEXT_PUBLIC_SENTRY_ENVIRONMENT=${NEXT_PUBLIC_SENTRY_ENVIRONMENT}
 
 RUN npm run build
 

frontend/messages/en.json

@@ -18,6 +18,9 @@
     "redirecting": "Redirecting…",
     "readOnlyAccess": "Read-only access for this organization.",
     "errorGeneric": "Something went wrong",
+    "pageErrorTitle": "Something went wrong",
+    "pageErrorBody": "This page failed to load. You can try again.",
+    "tryAgain": "Try again",
     "loadingEllipsis": "Loading...",
     "search": "Search",
     "action": "Action",

frontend/messages/fa.json

@@ -18,6 +18,9 @@
     "redirecting": "در حال انتقال...",
     "readOnlyAccess": "دسترسی فقط خواندنی برای این سازمان.",
     "errorGeneric": "خطایی رخ داده است",
+    "pageErrorTitle": "خطایی رخ داده است",
+    "pageErrorBody": "این صفحه بارگذاری نشد. می‌توانید دوباره تلاش کنید.",
+    "tryAgain": "تلاش دوباره",
     "loadingEllipsis": "در حال بارگذاری...",
     "search": "جستجو",
     "action": "عملیات",

frontend/messages/nl.json

@@ -18,6 +18,9 @@
     "redirecting": "Bezig met doorsturen...",
     "readOnlyAccess": "Alleen-lezen toegang voor deze organisatie.",
     "errorGeneric": "Er is iets misgegaan",
+    "pageErrorTitle": "Er is iets misgegaan",
+    "pageErrorBody": "Deze pagina kon niet worden geladen. U kunt het opnieuw proberen.",
+    "tryAgain": "Opnieuw proberen",
     "loadingEllipsis": "Laden...",
     "search": "Zoeken",
     "action": "Actie",

frontend/next.config.ts

@@ -1,4 +1,5 @@
 import type { NextConfig } from 'next';
+import { withSentryConfig } from '@sentry/nextjs';
 import createNextIntlPlugin from 'next-intl/plugin';
 
 const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts');
@@ -35,9 +36,15 @@ const nextConfig: NextConfig = {
     NEXT_PUBLIC_APP_NAME: process.env.NEXT_PUBLIC_APP_NAME,
     NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
     NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
+    NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    NEXT_PUBLIC_SENTRY_ENVIRONMENT: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
   },
   output: 'standalone',
   compress: true,
 };
 
-export default withNextIntl(nextConfig);
+export default withSentryConfig(withNextIntl(nextConfig), {
+  silent: true,
+  sourcemaps: { disable: true },
+  disableLogger: true,
+});

frontend/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
+    "@sentry/nextjs": "^10.72.0",
     "@tanstack/react-query": "^5.90.21",
     "axios": "^1.13.6",
     "js-cookie": "^3.0.5",

frontend/src/app/[locale]/error.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import * as Sentry from '@sentry/nextjs';
+import { Button } from '@/components/ui/shared/Button';
+
+export default function LocaleError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const t = useTranslations('common');
+
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 px-4 text-center">
+      <h1 className="text-lg font-semibold">{t('pageErrorTitle')}</h1>
+      <p className="max-w-md text-sm text-text-secondary">{t('pageErrorBody')}</p>
+      <Button type="button" onClick={() => reset()}>
+        {t('tryAgain')}
+      </Button>
+    </div>
+  );
+}

frontend/src/app/global-error.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useEffect } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html lang="en">
+      <body>
+        <div
+          style={{
+            display: 'flex',
+            minHeight: '100vh',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '1rem',
+            padding: '1rem',
+            textAlign: 'center',
+            fontFamily: 'system-ui, sans-serif',
+          }}
+        >
+          <h1 style={{ fontSize: '1.125rem', fontWeight: 600 }}>Something went wrong</h1>
+          <p style={{ maxWidth: '28rem', fontSize: '0.875rem' }}>
+            The page failed to load. You can try again.
+          </p>
+          <button type="button" onClick={() => reset()}>
+            Try again
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}

frontend/src/components/ui/today/TodayWidgetErrorBoundary.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import * as Sentry from '@sentry/nextjs';
 import { Component, type ErrorInfo, type ReactNode } from 'react';
 
 interface TodayWidgetErrorBoundaryProps {
@@ -23,6 +24,7 @@ export class TodayWidgetErrorBoundary extends Component<
 
   componentDidCatch(error: Error, info: ErrorInfo) {
     console.error('Today widget render error:', error, info);
+    Sentry.captureException(error, { extra: { componentStack: info.componentStack } });
   }
 
   render() {

frontend/src/instrumentation-client.ts

@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/nextjs';
+import { sentrySharedOptions } from '@/lib/error-tracking/sentrySharedOptions';
+
+const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN?.trim();
+
+if (dsn) {
+  Sentry.init({
+    dsn,
+    environment:
+      process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT?.trim() ||
+      process.env.NODE_ENV ||
+      'development',
+    ...sentrySharedOptions(),
+  });
+}

frontend/src/instrumentation.ts

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register(): Promise<void> {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./lib/error-tracking/sentry.server.config');
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;

frontend/src/lib/api/client.ts

@@ -2,6 +2,7 @@
 import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
 import type { ApiError } from '@/types/api';
 import { notifyAccessTokenRefreshed } from '@/lib/auth/accessTokenEvents';
+import { reportUnexpectedApiFailure } from '@/lib/error-tracking/reportUnexpectedApiFailure';
 
 interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
   _retry?: boolean;
@@ -46,6 +47,7 @@ function shouldSkipRefreshRetry(url: string | undefined): boolean {
 apiClient.interceptors.response.use(
   (response) => response,
   async (error: AxiosError) => {
+    reportUnexpectedApiFailure(error);
     const originalRequest = error.config as CustomAxiosRequestConfig;
 
     if (

frontend/src/lib/error-tracking/reportUnexpectedApiFailure.ts

@@ -0,0 +1,20 @@
+import * as Sentry from '@sentry/nextjs';
+import type { AxiosError } from 'axios';
+
+/** Report network failures and HTTP 5xx only — not coded 4xx AppExceptions. */
+export function reportUnexpectedApiFailure(error: AxiosError): void {
+  const status = error.response?.status;
+  if (status !== undefined && status < 500) {
+    return;
+  }
+
+  Sentry.captureException(error, {
+    tags: {
+      api_status: status ? String(status) : 'network',
+    },
+    extra: {
+      url: error.config?.url,
+      method: error.config?.method,
+    },
+  });
+}

frontend/src/lib/error-tracking/sentry.server.config.ts

@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/nextjs';
+import { sentrySharedOptions } from '@/lib/error-tracking/sentrySharedOptions';
+
+const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN?.trim();
+
+if (dsn) {
+  Sentry.init({
+    dsn,
+    environment:
+      process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT?.trim() ||
+      process.env.NODE_ENV ||
+      'development',
+    ...sentrySharedOptions(),
+  });
+}

frontend/src/lib/error-tracking/sentrySharedOptions.ts

@@ -0,0 +1,28 @@
+import type { ErrorEvent } from '@sentry/core';
+
+/** Shared Sentry/GlitchTip options — no session replay, no PII in payloads. */
+export function sentrySharedOptions() {
+  return {
+    sendDefaultPii: false as const,
+    tracesSampleRate: 0,
+    replaysSessionSampleRate: 0,
+    replaysOnErrorSampleRate: 0,
+    beforeSend(event: ErrorEvent): ErrorEvent {
+      if (event.request) {
+        delete event.request.cookies;
+        delete event.request.data;
+        if (event.request.headers) {
+          delete event.request.headers.cookie;
+          delete event.request.headers.authorization;
+          delete event.request.headers.Authorization;
+        }
+      }
+      if (event.user) {
+        delete event.user.email;
+        delete event.user.ip_address;
+        delete event.user.username;
+      }
+      return event;
+    },
+  };
+}