feat(stats): add Sentry observability with distributed tracing (#2530)

Author: Copilot

apps/stats-web/.env.local.sample

@@ -14,4 +14,5 @@ BASE_API_TESTNET_URL=${BASE_API_MAINNET_URL}
 BASE_API_SANDBOX_URL=${BASE_API_MAINNET_URL}
 LOG_LEVEL=debug
 
-NEXT_PUBLIC_LOG_LEVEL=debug
+NEXT_PUBLIC_LOG_LEVEL=debug
+NEXT_PUBLIC_SENTRY_ENABLED=false

apps/stats-web/env/.env

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_UNLEASH_APP_NAME=stats-web
 NEXT_PUBLIC_UNLEASH_ENABLE_ALL=false
+NEXT_PUBLIC_SENTRY_APPLICATION_KEY="AKASH-STATS-WEB"

apps/stats-web/env/.env.production

@@ -12,3 +12,5 @@ BASE_API_SANDBOX_URL=$NEXT_PUBLIC_BASE_API_SANDBOX_URL
 
 NEXT_PUBLIC_UNLEASH_FRONTEND_API_URL=https://features-edge.akash.network/api/frontend
 NEXT_PUBLIC_UNLEASH_FRONTEND_API_TOKEN=*:production.3de2776029292b1860a520b1aa3ee9e417ae300283811fd77d231060
+
+NEXT_PUBLIC_SENTRY_ENABLED="true"

apps/stats-web/env/.env.sample

@@ -2,3 +2,7 @@ NEXT_PUBLIC_API_BASE_URL=
 NEXT_PUBLIC_UNLEASH_ENABLE_ALL=true
 NEXT_PUBLIC_UNLEASH_FRONTEND_API_URL=
 NEXT_PUBLIC_UNLEASH_FRONTEND_API_TOKEN=
+
+NEXT_PUBLIC_SENTRY_APPLICATION_KEY=
+NEXT_PUBLIC_SENTRY_DSN=
+NEXT_PUBLIC_SENTRY_SERVER_NAME=

apps/stats-web/env/.env.staging

@@ -10,3 +10,5 @@ BASE_API_SANDBOX_URL=$NEXT_PUBLIC_BASE_API_SANDBOX_URL
 
 NEXT_PUBLIC_UNLEASH_FRONTEND_API_URL=https://features-edge-beta.akash.network/api/frontend
 NEXT_PUBLIC_UNLEASH_FRONTEND_API_TOKEN=*:development.34efccc4c8ba7d6ddeeb4083d72bc8ac05770774ac4d6668e749ca5a
+
+NEXT_PUBLIC_SENTRY_ENABLED="true"

apps/stats-web/next.config.js

@@ -1,5 +1,6 @@
 require("@akashnetwork/env-loader");
-const { version } = require("./package.json");
+const { version, repository } = require("./package.json");
+const { withSentryConfig } = require("@sentry/nextjs");
 
 try {
   const { browserEnvSchema } = require("./env-config.schema");
@@ -14,13 +15,67 @@ try {
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
-  publicRuntimeConfig: {
-    version
+  env: {
+    NEXT_PUBLIC_APP_VERSION: version
   },
   eslint: {
     ignoreDuringBuilds: true
   },
-  transpilePackages: ["geist", "@akashnetwork/ui"]
+  transpilePackages: ["geist", "@akashnetwork/ui"],
+  experimental: {
+    instrumentationHook: true
+  },
+  /**
+   *
+   * @param {import('webpack').Configuration} config
+   * @returns
+   */
+  webpack: config => {
+    config.externals.push("pino-pretty");
+
+    return config;
+  }
+};
+
+/**
+ * For all available options, see:
+ * https://github.com/getsentry/sentry-webpack-plugin#options.
+ * @type {import('@sentry/nextjs').SentryBuildOptions}
+ */
+const sentryWebpackPluginOptions = {
+  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, org, project, authToken, configFile, stripPrefix,
+  //   urlPrefix, include, ignore
+
+  // silent: !process.env.CI, // Suppresses all logs,
+  // dryRun: true,
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  org: process.env.SENTRY_ORG,
+  project: process.env.SENTRY_PROJECT,
+  release: repository
+    ? {
+        name: version,
+        setCommits: {
+          repo: new URL(repository.url).pathname.slice(1).replace(/\.git$/, ""),
+          commit: process.env.GIT_COMMIT_HASH
+        }
+      }
+    : { name: version },
+  sourcemaps: {
+    deleteSourcemapsAfterUpload: false
+  },
+  widenClientFileUpload: true,
+  debug: !process.env.CI,
+  reactComponentAnnotation: {
+    enabled: true
+  },
+  unstable_sentryWebpackPluginOptions: {
+    applicationKey: process.env.NEXT_PUBLIC_SENTRY_APPLICATION_KEY
+  }
 };
 
-module.exports = nextConfig;
+// Make sure adding Sentry options is the last code to run before exporting, to
+// ensure that your source maps include changes from all other Webpack plugins
+module.exports = sentryWebpackPluginOptions.authToken ? withSentryConfig(nextConfig, sentryWebpackPluginOptions) : nextConfig;

apps/stats-web/package.json

@@ -23,9 +23,9 @@
     "@date-fns/utc": "^2.1.0",
     "@json2csv/plainjs": "^7.0.4",
     "@nivo/line": "^0.87.0",
-    "@opentelemetry/api": "^1.9.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@sentry/nextjs": "^9.37.0",
     "@tanstack/react-query": "^5.67.2",
     "@tanstack/react-table": "^8.11.2",
     "@textea/json-viewer": "^3.2.3",

apps/stats-web/sentry.client.config.ts

@@ -0,0 +1,30 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import { inboundFiltersIntegration, init as initSentry, thirdPartyErrorFilterIntegration } from "@sentry/nextjs";
+
+initSentry({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 0.1,
+  enabled: process.env.NEXT_PUBLIC_SENTRY_ENABLED === "true",
+  // propagate sentry-trace and baggage headers to internal API only
+  // everything else will be done with custom interceptor
+  tracePropagationTargets: [/^\/api\//, /^\/_next\//],
+  integrations: [
+    // Filter out errors originating from browser extensions
+    // Note: uses inboundFiltersIntegration (not eventFiltersIntegration) to override defaultIntegrations
+    inboundFiltersIntegration({
+      denyUrls: [/^chrome-extension:\/\//, /^moz-extension:\/\//]
+    }),
+    thirdPartyErrorFilterIntegration({
+      filterKeys: [process.env.NEXT_PUBLIC_SENTRY_APPLICATION_KEY!],
+      behaviour: "drop-error-if-exclusively-contains-third-party-frames"
+    })
+  ]
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

apps/stats-web/src/app/addresses/[address]/page.tsx

@@ -1,4 +1,3 @@
-import { LoggerService } from "@akashnetwork/logging";
 import type { Network } from "@akashnetwork/network-store";
 import type { Metadata } from "next";
 import { z } from "zod";
@@ -11,12 +10,13 @@ import { LatestTransactions } from "./LatestTransactions";
 
 import { Title } from "@/components/Title";
 import { networkId } from "@/config/env-config.schema";
+import { createLogger } from "@/lib/createLogger/createLogger";
 import { serverFetch } from "@/lib/serverFetch";
 import { UrlService } from "@/lib/urlUtils";
 import { serverApiUrlService } from "@/services/api-url/server-api-url.service";
 import type { AddressDetail } from "@/types";
 
-const logger = new LoggerService({ context: "AddressDetailPage" });
+const logger = createLogger({ context: "AddressDetailPage" });
 
 const AddressDetailPageSchema = z.object({
   params: z.object({
@@ -46,11 +46,11 @@ async function fetchAddressData(address: string, network: Network["id"]): Promis
   const apiUrl = serverApiUrlService.getBaseApiUrlFor(network);
   const response = await serverFetch(`${apiUrl}/v1/addresses/${address}`);
 
+  logger.debug({ event: "FETCHING_ADDRESS_DATA", address, network, status: response.status });
+
   if (!response.ok && response.status !== 404) {
-    logger.error({ event: "ADDRESS_FETCH_ERROR", address, network, status: response.status });
     throw new Error(`Error fetching address data: ${address}`);
   } else if (response.status === 404) {
-    logger.debug({ event: "ADDRESS_NOT_FOUND", address, network });
     return null;
   }
 

apps/stats-web/src/app/blocks/[height]/page.tsx

@@ -1,4 +1,3 @@
-import { LoggerService } from "@akashnetwork/logging";
 import type { Network } from "@akashnetwork/network-store";
 import { Card, CardContent, Table, TableBody, TableHead, TableHeader, TableRow } from "@akashnetwork/ui/components";
 import { SearchX } from "lucide-react";
@@ -11,11 +10,12 @@ import { TransactionRow } from "@/components/blockchain/TransactionRow";
 import PageContainer from "@/components/PageContainer";
 import { Title } from "@/components/Title";
 import { networkId } from "@/config/env-config.schema";
+import { createLogger } from "@/lib/createLogger/createLogger";
 import { serverFetch } from "@/lib/serverFetch";
 import { serverApiUrlService } from "@/services/api-url/server-api-url.service";
 import type { BlockDetail } from "@/types";
 
-const logger = new LoggerService({ context: "BlockDetailPage" });
+const logger = createLogger({ context: "BlockDetailPage" });
 
 const BlockDetailPageSchema = z.object({
   params: z.object({