feat(dapp): add sentry support

dapp/.gitignore

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

dapp/next.config.mjs

@@ -3,6 +3,9 @@
 
 import { execSync } from 'child_process';
 import nextMdx from '@next/mdx';
+import { withSentryConfig } from '@sentry/nextjs';
+
+import { SENTRY_ORG_NAME, SENTRY_PROJECT_NAME } from './sentry.common.config.mjs';
 
 let NEXT_PUBLIC_IOTA_NAMES_REV = 'development';
 const NEXT_PUBLIC_BUILD_ENV = process.env.BUILD_ENV;
@@ -32,4 +35,37 @@ const nextConfig = withMDX({
     },
 });
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+    // For all available options, see:
+    // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+    org: SENTRY_ORG_NAME,
+    project: SENTRY_PROJECT_NAME,
+
+    // 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,
+
+    // 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: false,
+
+    // 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: false,
+});

dapp/package.json

@@ -36,6 +36,7 @@
         "@iota/kiosk": "^0.4.8",
         "@next/mdx": "^15.5.0",
         "@noble/hashes": "^1.4.0",
+        "@sentry/nextjs": "^10",
         "@tanstack/react-query": "^5.76.1",
         "bignumber.js": "^9.3.0",
         "class-variance-authority": "^0.7.1",

dapp/sentry.common.config.mjs

@@ -0,0 +1,11 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const IS_PROD = process.env.NEXT_PUBLIC_BUILD_ENV === 'production';
+
+export const SENTRY_DSN = IS_PROD
+    ? 'https://880b00b12c5d12e3fbabfc2f9dc83344@o4508279186718720.ingest.de.sentry.io/4510205355360337'
+    : 'https://de5a2b44cc967804379ecefe61281ccb@o4508279186718720.ingest.de.sentry.io/4510205404643408';
+
+export const SENTRY_PROJECT_NAME = IS_PROD ? 'iota-names-dapp' : 'iota-names-dapp-dev';
+export const SENTRY_ORG_NAME = 'iota-foundation-eu';

dapp/sentry.edge.config.ts

@@ -0,0 +1,22 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+import { IS_PROD, SENTRY_DSN } from './sentry.common.config.mjs';
+
+Sentry.init({
+    enabled: IS_PROD && Boolean(SENTRY_DSN),
+    dsn: SENTRY_DSN,
+
+    // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+    tracesSampleRate: 0, // Edge is not traced
+
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+});

dapp/sentry.server.config.ts

@@ -0,0 +1,21 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+// 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';
+
+import { IS_PROD, SENTRY_DSN } from './sentry.common.config.mjs';
+
+Sentry.init({
+    enabled: IS_PROD && Boolean(SENTRY_DSN),
+    dsn: SENTRY_DSN,
+
+    // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+    tracesSampleRate: 0, // Server is not traced
+
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+});

dapp/src/app/global-error.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+'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` is the default Next.js error page component. Its type
+                definition requires a `statusCode` prop. However, since the App Router
+                does not expose status codes for errors, we simply pass 0 to render a
+                generic error message. */}
+                <NextError statusCode={0} />
+            </body>
+        </html>
+    );
+}

dapp/src/app/layout.tsx

@@ -4,6 +4,8 @@
 import '@iota/dapp-kit/dist/index.css';
 import './globals.css';
 
+import * as Sentry from '@sentry/nextjs';
+import type { Metadata } from 'next';
 import { Suspense } from 'react';
 
 import { ConnectionGuard } from '@/components';
@@ -14,7 +16,14 @@ import { DEFAULT_METADATA } from '@/lib/constants/metadata.constants';
 import { APP_STATIC_THEME } from '@/lib/constants/theme.constants';
 import { AppProviders } from '@/providers';
 
-export const metadata = DEFAULT_METADATA;
+export function generateMetadata(): Metadata {
+    return {
+        ...DEFAULT_METADATA,
+        other: {
+            ...Sentry.getTraceData(),
+        },
+    };
+}
 
 export default function RootLayout({
     children,

dapp/src/auctions/components/dialogs/AuctionBidDialog.tsx

@@ -36,6 +36,7 @@ import { useCountdown } from '@/auctions/hooks/useCountdown';
 import { useGetAuctionMetadata } from '@/auctions/hooks/useGetAuctionMetadata';
 import { formatTimeRemaining, getTimeRemaining, getUserAuctionStatus } from '@/auctions/lib/utils';
 import { NameRecordData, queryKey, useCalculatePriceInFiat, useNameRecord } from '@/hooks';
+import { captureException } from '@/instrumentation';
 import {
     formatNanosToIota,
     getUserFriendlyErrorMessage,
@@ -155,6 +156,7 @@ export function AuctionBidDialog({ name, closeDialog, onCompleted }: AuctionBidD
             onCompleted?.();
         },
         onError(err) {
+            captureException(err);
             toast.error(getUserFriendlyErrorMessage(err));
         },
     });

dapp/src/auctions/hooks/useClaimAuctionTransaction.ts

@@ -6,6 +6,7 @@ import { useMutation, UseMutationOptions } from '@tanstack/react-query';
 
 import { useIotaNamesClient } from '@/contexts';
 import { queryKey } from '@/hooks/queryKey';
+import { captureException } from '@/instrumentation';
 
 import { buildClaimNameTransaction } from '../lib/utils/transaction';
 import { useAuctionHouse } from './useAuctionHouse';
@@ -45,5 +46,9 @@ export function useClaimAuctionTransaction(
         },
         gcTime: 0,
         ...options,
+        onError: (error, ...args) => {
+            captureException(error);
+            options.onError?.(error, ...args);
+        },
     });
 }

dapp/src/components/dialogs/ConnectToAddressDialog.tsx

@@ -35,6 +35,7 @@ import toast from 'react-hot-toast';
 import { NameRecordData, queryKey, useNameRecord, useRegistrationNfts } from '@/hooks';
 import { useGetDefaultName } from '@/hooks/useGetDefaultName';
 import { NameUpdate, useUpdateNameTransaction } from '@/hooks/useUpdateNameTransaction';
+import { captureException } from '@/instrumentation';
 import { getUserFriendlyErrorMessage } from '@/lib/utils';
 import { ampli } from '@/lib/utils/analytics/ampli';
 import { copyToClipboard } from '@/lib/utils/copyToClipboard';
@@ -168,6 +169,7 @@ export function ConnectToAddressDialog({ name, setOpen }: ConnectToAddressDialog
             }
         },
         onError: (error) => {
+            captureException(error);
             toast.error(getUserFriendlyErrorMessage(error));
         },
     });

dapp/src/components/dialogs/CreateSubnameDialog.tsx

@@ -34,6 +34,7 @@ import toast from 'react-hot-toast';
 
 import { NameRecordData, queryKey, useNameRecord, useRegistrationNfts } from '@/hooks';
 import { NameUpdate, useUpdateNameTransaction } from '@/hooks/useUpdateNameTransaction';
+import { captureException } from '@/instrumentation';
 import { RegistrationNft } from '@/lib/interfaces';
 import { getUserFriendlyErrorMessage } from '@/lib/utils';
 import { ampli } from '@/lib/utils/analytics/ampli';
@@ -184,6 +185,7 @@ export function CreateSubnameDialog({ name, setOpen }: CreateSubnameProps) {
             closeDialog();
         },
         onError: (error) => {
+            captureException(error);
             toast.error(getUserFriendlyErrorMessage(error));
         },
     });

dapp/src/components/dialogs/DeleteNameDialog.tsx

@@ -27,6 +27,7 @@ import toast from 'react-hot-toast';
 import { useRegistrationNfts } from '@/hooks';
 import { queryKey } from '@/hooks/queryKey';
 import { NameUpdate, useUpdateNameTransaction } from '@/hooks/useUpdateNameTransaction';
+import { captureException } from '@/instrumentation';
 import { RegistrationNft } from '@/lib/interfaces/registration.interfaces';
 import { getUserFriendlyErrorMessage } from '@/lib/utils';
 import { getNameObject } from '@/lib/utils/names';
@@ -93,6 +94,7 @@ export function DeleteNameDialog({ nft, setOpen }: DeleteNameDialogProps) {
             closeDialog();
         },
         onError: (error) => {
+            captureException(error);
             toast.error(getUserFriendlyErrorMessage(error));
         },
     });

dapp/src/components/dialogs/EditMetadata.tsx

@@ -35,6 +35,7 @@ import {
     useRegistrationNfts,
     useUpdateNameTransaction,
 } from '@/hooks';
+import { captureException } from '@/instrumentation';
 import { METADATA_KEYS, SCHEMAS } from '@/lib/schemas';
 import { getUserFriendlyErrorMessage } from '@/lib/utils';
 import { getNameObject } from '@/lib/utils/names';
@@ -137,6 +138,7 @@ export function EditMetadataDialog({ name, setOpen }: EditMetadataDialogProps) {
             queryClient.invalidateQueries({ queryKey: queryKey.nameRecord(name) });
         },
         onError: (error) => {
+            captureException(error);
             toast.error(getUserFriendlyErrorMessage(error));
         },
     });

dapp/src/components/dialogs/PersonalizeAvatarDialog.tsx

@@ -33,6 +33,7 @@ import {
     useUpdateNameTransaction,
 } from '@/hooks';
 import { useGetVisualAssets } from '@/hooks/useGetVisualAssets';
+import { captureException } from '@/instrumentation';
 import { getUserFriendlyErrorMessage } from '@/lib/utils';
 import { getNameObject } from '@/lib/utils/names';
 
@@ -139,6 +140,7 @@ export function PersonalizeAvatarDialog({ name, setOpen }: PersonalizeAvatarDial
             );
         },
         onError: (error) => {
+            captureException(error);
             toast.error(getUserFriendlyErrorMessage(error));
         },
     });

dapp/src/components/dialogs/PurchaseNameDialog.tsx

@@ -38,6 +38,7 @@ import {
     useUpdateNameTransaction,
 } from '@/hooks';
 import { useNameRecord } from '@/hooks/useNameRecord';
+import { captureException } from '@/instrumentation';
 import { formatNanosToIota, getUserFriendlyErrorMessage } from '@/lib/utils';
 import { ampli } from '@/lib/utils/analytics/ampli';
 import { getTargetExpirationDate } from '@/lib/utils/names';
@@ -169,6 +170,7 @@ export function PurchaseNameDialog({ name, open, setOpen, onPurchase }: Purchase
             if (onPurchase) onPurchase();
         },
         onError(error) {
+            captureException(error);
             toast.error(getUserFriendlyErrorMessage(error));
         },
     });

dapp/src/components/dialogs/RenewNameDialog.tsx

@@ -38,6 +38,7 @@ import {
 } from '@/hooks';
 import { useNamesConfig } from '@/hooks/useNamesConfig';
 import { NameUpdate, useUpdateNameTransaction } from '@/hooks/useUpdateNameTransaction';
+import { captureException } from '@/instrumentation';
 import { formatNanosToIota, getUserFriendlyErrorMessage } from '@/lib/utils';
 import { ampli } from '@/lib/utils/analytics/ampli';
 import { formatExpirationDate } from '@/lib/utils/format/formatExpirationDate';
@@ -155,6 +156,7 @@ export function RenewNameDialog({ setOpen, name, onRenew }: RenewDialogProps) {
             toast.success('Name renewed successfully');
         },
         onError(error) {
+            captureException(error);
             toast.error(getUserFriendlyErrorMessage(error));
         },
     });

dapp/src/components/dialogs/RenewSubameDialog.tsx

@@ -27,6 +27,7 @@ import toast from 'react-hot-toast';
 import { NameRecordData, queryKey, useNameRecord, useRegistrationNfts } from '@/hooks';
 import { useNamesConfig } from '@/hooks/useNamesConfig';
 import { NameUpdate, useUpdateNameTransaction } from '@/hooks/useUpdateNameTransaction';
+import { captureException } from '@/instrumentation';
 import { RegistrationNft } from '@/lib/interfaces';
 import { getUserFriendlyErrorMessage } from '@/lib/utils';
 import { ampli } from '@/lib/utils/analytics/ampli';
@@ -138,6 +139,7 @@ export function RenewSubnameDialog({ setOpen, name, onRenew }: RenewDialogProps)
             toast.success('Subname renewed successfully');
         },
         onError(error) {
+            captureException(error);
             toast.error(getUserFriendlyErrorMessage(error));
         },
     });

dapp/src/components/dialogs/SetPermissionsDialog.tsx

@@ -25,6 +25,7 @@ import toast from 'react-hot-toast';
 
 import { NameRecordData, queryKey, useNameRecord, useRegistrationNfts } from '@/hooks';
 import { NameUpdate, useUpdateNameTransaction } from '@/hooks/useUpdateNameTransaction';
+import { captureException } from '@/instrumentation';
 import { RegistrationNft } from '@/lib/interfaces';
 import { getUserFriendlyErrorMessage } from '@/lib/utils';
 import { getNamePermissions, getParentObject, isNameRecordExpired } from '@/lib/utils/names';
@@ -144,6 +145,7 @@ export function SetPermissionsDialog({ name, setOpen }: CreateSubnameProps) {
             closeDialog();
         },
         onError: (error: Error) => {
+            captureException(error);
             toast.error(getUserFriendlyErrorMessage(error));
         },
     });

dapp/src/instrumentation-client.ts

@@ -0,0 +1,22 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+// 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';
+
+import { IS_PROD, SENTRY_DSN } from '../sentry.common.config.mjs';
+
+Sentry.init({
+    enabled: IS_PROD && Boolean(SENTRY_DSN),
+    dsn: SENTRY_DSN,
+
+    // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+    tracesSampleRate: 0.0025,
+    // Enable logs to be sent to Sentry
+    enableLogs: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

dapp/src/instrumentation.ts

@@ -0,0 +1,17 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+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;
+export const captureException = Sentry.captureException;