feat(wallet-dashboard): Integrate Sentry (#4820)

* refactor(tooling): Update usage of Sentry deprecated methods * feat(dashboard): Integrate Sentry * attempto to fix * deps * chore: add enabled check * chore: Get sentry traces rate from growthbook * chore: Embedded sentry traces rate * fmt * fix(dashboard): clean debris --------- Co-authored-by: cpl121 <[email protected]> Co-authored-by: cpl121 <[email protected]>
iotaledger · Jan 29, 2025 · b1d8ed3 · b1d8ed3
1 parent 45ad366
commit b1d8ed3
Show file tree

Hide file tree

Showing 12 changed files with 799 additions and 378 deletions.
diff --git a/apps/wallet-dashboard/.gitignore b/apps/wallet-dashboard/.gitignore
@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Sentry Config File
+.env.sentry-build-plugin
diff --git a/apps/wallet-dashboard/app/global-error.tsx b/apps/wallet-dashboard/app/global-error.tsx
@@ -0,0 +1,31 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+'use client';
+
+import '@iota/dapp-kit/dist/index.css';
+import './globals.css';
+import { Inter } from 'next/font/google';
+import { AppProviders } from '@/providers';
+import { FontLinks } from '@/components/FontLinks';
+import { useEffect } from 'react';
+import { captureException } from '@/instrumentation';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+    useEffect(() => {
+        captureException(error);
+    }, [error]);
+
+    return (
+        <html lang="en">
+            <body className={inter.className}>
+                <AppProviders>
+                    <FontLinks />
+                    <h2>Something went wrong!</h2>
+                </AppProviders>
+            </body>
+        </html>
+    );
+}
diff --git a/apps/wallet-dashboard/instrumentation.ts b/apps/wallet-dashboard/instrumentation.ts
@@ -0,0 +1,5 @@
+export { captureException } from '@sentry/nextjs';
+
+export async function register() {
+    // Only client is needed
+}
diff --git a/apps/wallet-dashboard/lib/utils/defaultRpcClient.ts b/apps/wallet-dashboard/lib/utils/defaultRpcClient.ts
@@ -0,0 +1,36 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SentryHttpTransport } from '@iota/core';
+import {
+    IotaClient,
+    IotaHTTPTransport,
+    getNetwork,
+    Network,
+    type NetworkId,
+    getAllNetworks,
+} from '@iota/iota-sdk/client';
+
+export const SupportedNetworks = getAllNetworks();
+
+const defaultClientMap: Map<NetworkId, IotaClient> = new Map();
+
+// NOTE: This class should not be used directly in React components, prefer to use the useIotaClient() hook instead
+export const createIotaClient = (network: NetworkId): IotaClient => {
+    const existingClient = defaultClientMap.get(network);
+    if (existingClient) return existingClient;
+
+    const supportedNetwork = getNetwork(network);
+    // If network is not supported, we use assume we are using a custom RPC
+    const networkUrl = supportedNetwork?.url ?? network;
+
+    const client = new IotaClient({
+        transport:
+            supportedNetwork && network === Network.Testnet // Sentry dev hint: change this to eg [Network.Localnet]
+                ? new SentryHttpTransport(networkUrl)
+                : new IotaHTTPTransport({ url: networkUrl }),
+    });
+    defaultClientMap.set(network, client);
+    return client;
+};
diff --git a/apps/wallet-dashboard/next.config.mjs b/apps/wallet-dashboard/next.config.mjs
@@ -1,6 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { SENTRY_ORG_NAME, SENTRY_PROJECT_NAME } from './sentry.common.config.mjs';
+import { withSentryConfig } from '@sentry/nextjs';
 import { execSync } from 'child_process';
 const NEXT_PUBLIC_DASHBOARD_REV = execSync('git rev-parse HEAD').toString().trim().toString();
 
@@ -24,4 +26,37 @@ const nextConfig = {
     },
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+    // For all available options, see:
+    // https://github.com/getsentry/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,
+});
diff --git a/apps/wallet-dashboard/package.json b/apps/wallet-dashboard/package.json
@@ -3,8 +3,8 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "dev": "next dev",
-        "build": "next build",
+        "dev": "cross-env NODE_ENV=\"development\" next dev",
+        "build": "cross-env NODE_ENV=\"production\" next build",
         "start": "next start",
         "lint": "next lint && pnpm run prettier:check",
         "prettier:check": "prettier -c --ignore-unknown --ignore-path=../../.prettierignore --ignore-path=.prettierignore .",
@@ -23,11 +23,12 @@
         "@iota/dapp-kit": "workspace:*",
         "@iota/iota-sdk": "workspace:*",
         "@iota/wallet-standard": "workspace:*",
+        "@sentry/nextjs": "^7.120.3",
         "@tanstack/react-query": "^5.50.1",
         "@tanstack/react-virtual": "^3.5.0",
         "clsx": "^2.1.1",
         "formik": "^2.4.2",
-        "next": "14.2.15",
+        "next": "14.2.23",
         "react": "^18.3.1",
         "react-hot-toast": "^2.4.1",
         "zustand": "^4.4.1"
@@ -37,6 +38,7 @@
         "@types/jest": "^29.5.2",
         "@types/node": "^20.14.10",
         "@types/react": "^18.3.3",
+        "cross-env": "^7.0.3",
         "eslint": "^8.45.0",
         "eslint-config-next": "14.2.3",
         "jest": "^29.5.0",

diff --git a/apps/wallet-dashboard/providers/AppProviders.tsx b/apps/wallet-dashboard/providers/AppProviders.tsx
@@ -13,6 +13,7 @@ import { useState } from 'react';
 import { KioskClientProvider, useLocalStorage } from '@iota/core';
 import { growthbook } from '@/lib/utils';
 import { ThemeProvider } from '@iota/core';
+import { createIotaClient } from '@/lib/utils/defaultRpcClient';
 
 growthbook.init();
 
@@ -31,6 +32,7 @@ export function AppProviders({ children }: React.PropsWithChildren) {
             <QueryClientProvider client={queryClient}>
                 <IotaClientProvider
                     networks={allNetworks}
+                    createClient={createIotaClient}
                     defaultNetwork={persistedNetwork}
                     onNetworkChange={handleNetworkChange}
                 >

diff --git a/apps/wallet-dashboard/sentry.client.config.ts b/apps/wallet-dashboard/sentry.client.config.ts
@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add 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,
+    dsn: SENTRY_DSN,
+
+    // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+    tracesSampleRate: 0.0025,
+
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+});
diff --git a/apps/wallet-dashboard/sentry.common.config.mjs b/apps/wallet-dashboard/sentry.common.config.mjs
@@ -0,0 +1,8 @@
+export const IS_PROD = process.env.NODE_ENV === 'production';
+
+export const SENTRY_DSN = IS_PROD
+    ? 'https://cb83626ca07d6cf66ca2f901cf53c051@o4508279186718720.ingest.de.sentry.io/4508647247249488'
+    : 'https://ba5d6596291f12e88625e02eb942b742@o4508279186718720.ingest.de.sentry.io/4508647248691280';
+
+export const SENTRY_PROJECT_NAME = IS_PROD ? 'iota-wallet-dashboard' : 'iota-wallet-dashboard-dev';
+export const SENTRY_ORG_NAME = 'iota-foundation-eu';
diff --git a/apps/wallet-dashboard/sentry.edge.config.ts b/apps/wallet-dashboard/sentry.edge.config.ts
@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add 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,
+    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,
+});
diff --git a/apps/wallet-dashboard/sentry.server.config.ts b/apps/wallet-dashboard/sentry.server.config.ts
@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add 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,
+    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,
+});