add instrumentation.ts file and fix ESM error

next.config.mjs

@@ -26,20 +26,29 @@ const CSP = `
  **/
 const nextConfig = {
   distDir: process.env.DIST_DIR || 'dist',
-  generateBuildId: async () => nextBuildId({ dir: process.env.__dirname, describe: true }),
+  generateBuildId: async () =>
+    nextBuildId({ dir: process.env.__dirname, describe: true }),
   generateEtags: true,
   poweredByHeader: false,
   reactStrictMode: true,
   experimental: {
     newNextLinkBehavior: false,
     webVitalsAttribution: ['CLS', 'LCP'],
-    optimizePackageImports: ['@api', '@components', '@chakra-ui/react', 'ramda'],
+    optimizePackageImports: [
+      '@api',
+      '@components',
+      '@chakra-ui/react',
+      'ramda',
+    ],
   },
   async rewrites() {
     if (process.env.NODE_ENV !== 'production') {
       return {
         beforeFiles: [
-          { source: '/link_gateway/:path*', destination: `${process.env.BASE_CANONICAL_URL}/link_gateway/:path*` },
+          {
+            source: '/link_gateway/:path*',
+            destination: `${process.env.BASE_CANONICAL_URL}/link_gateway/:path*`,
+          },
         ],
       };
     }
@@ -191,7 +200,14 @@ const sentryConfig = {
   disableLogger: true,
 };
 
-const config = process.env.ANALYZE === 'true' ? withBundleAnalyzer(nextConfig) : nextConfig;
-const nextConfigWithSentry = withSentryConfig(config, sentrySettings, sentryConfig);
+const config =
+  process.env.ANALYZE === 'true' ? withBundleAnalyzer(nextConfig) : nextConfig;
+const nextConfigWithSentry = withSentryConfig(
+  config,
+  sentrySettings,
+  sentryConfig,
+);
 
-export default process.env.NODE_ENV === 'production' ? nextConfigWithSentry : config;
+export default process.env.NODE_ENV === 'production'
+  ? nextConfigWithSentry
+  : config;

src/components/Visualizations/Graphs/BarGraph.tsx

@@ -1,7 +1,10 @@
-import { BarDatum, BarSvgProps, ResponsiveBar } from '@nivo/bar';
+import type { BarDatum, BarSvgProps } from '@nivo/bar';
 import { ReactElement, useState } from 'react';
 import { Box, Radio, RadioGroup, Stack, useColorMode } from '@chakra-ui/react';
 import { useNivoDarkTheme } from '@/lib/useNivoDarkTheme';
+import dynamic from 'next/dynamic';
+
+const ResponsiveBar = dynamic(() => import('@nivo/bar').then((m) => m.default.ResponsiveBar), { ssr: false });
 
 export interface IBarGraphProps extends Omit<BarSvgProps<BarDatum>, 'height' | 'width'> {
   data: BarDatum[];

src/components/Visualizations/Graphs/LineGraph.tsx

@@ -1,8 +1,11 @@
 import { Box, useColorMode } from '@chakra-ui/react';
 import { useNivoDarkTheme } from '@/lib/useNivoDarkTheme';
-import { ResponsiveLine, Serie } from '@nivo/line';
+import type { Serie } from '@nivo/line';
 import { memo, ReactElement } from 'react';
 import { X_Axis, Y_Axis } from '../types';
+import dynamic from 'next/dynamic';
+
+const ResponsiveLine = dynamic(() => import('@nivo/line').then((m) => m.default.ResponsiveLine), { ssr: false });
 
 export interface ILineGraphProps {
   data: Serie[];
@@ -23,7 +26,12 @@ export const LineGraph = memo(
           <ResponsiveLine
             theme={colorMode === 'dark' ? darkTheme : null}
             data={data}
-            margin={{ top: 50, right: showLegend ? 110 : 50, bottom: 50, left: 60 }}
+            margin={{
+              top: 50,
+              right: showLegend ? 110 : 50,
+              bottom: 50,
+              left: 60,
+            }}
             colors={{ scheme: 'category10' }}
             xScale={xScaleType === 'linear' ? { type: 'linear', min: 'auto', max: 'auto' } : { type: 'point' }}
             yScale={

src/components/Visualizations/types.tsx

@@ -1,5 +1,5 @@
-import { BarDatum } from '@nivo/bar';
-import { Serie } from '@nivo/line';
+import type { BarDatum } from '@nivo/bar';
+import type { Serie } from '@nivo/line';
 import { BasicStatsKey, CitationsStatsKey, TimeSeriesKey } from '@/api/metrics/types';
 
 export interface IBubblePlotNodeData {

src/components/Visualizations/utils/graphUtils.ts

@@ -8,7 +8,7 @@ import {
   IBibcodeDict,
 } from '@/api/vis/types';
 
-import { Datum, Serie } from '@nivo/line';
+import type { Datum, Serie } from '@nivo/line';
 import * as d3 from 'd3';
 import { decode } from 'he';
 import {
@@ -454,10 +454,16 @@ export const getAuthorNetworkSummaryGraph = (response: IADSApiAuthorNetworkRespo
     allYears.forEach((year) => (skeleton[year.toString()] = 0));
 
     // into year and paper count array [ ... {year: count} ]
-    const yearPaperCount = { ...skeleton, ...countBy((bibcode) => bibcode.slice(0, 4), bibcodes) };
+    const yearPaperCount = {
+      ...skeleton,
+      ...countBy((bibcode) => bibcode.slice(0, 4), bibcodes),
+    };
 
     // convert to line graph data [ ... {x: year, y: count} ]
-    const graphData = Object.entries(yearPaperCount).map(([year, count]) => ({ x: year, y: count }));
+    const graphData = Object.entries(yearPaperCount).map(([year, count]) => ({
+      x: year,
+      y: count,
+    }));
 
     data.push({ id: group.name as string, data: graphData });
   });
@@ -495,7 +501,12 @@ export const getAuthorNetworkNodeDetails = (
       })
       [bibcodes.length - 1].slice(0, 4);
 
-    return { name: node.name as string, type: 'author', papers, mostRecentYear };
+    return {
+      name: node.name as string,
+      type: 'author',
+      papers,
+      mostRecentYear,
+    };
   }
   // if selected a group node
   else {
@@ -558,7 +569,12 @@ export const getAuthorNetworkNodeDetails = (
       }, papers),
     );
 
-    return { name: `Group ${node.name as string}`, type: 'group', papers, mostRecentYear };
+    return {
+      name: `Group ${node.name as string}`,
+      type: 'group',
+      papers,
+      mostRecentYear,
+    };
   }
 };
 
@@ -600,10 +616,16 @@ export const getPaperNetworkSummaryGraph = (response: IADSApiPaperNetworkRespons
     allYears.forEach((year) => (skeleton[year.toString()] = 0));
 
     // all papers in this group into year and paper count [ ... {year: count} ]
-    const yearPaperCount = { ...skeleton, ...countBy((bibcode) => bibcode.slice(0, 4), bibcodes) };
+    const yearPaperCount = {
+      ...skeleton,
+      ...countBy((bibcode) => bibcode.slice(0, 4), bibcodes),
+    };
 
     // convert graph data to [ ... {x: year, y: count} ]
-    const graphData = Object.entries(yearPaperCount).map(([year, count]) => ({ x: year, y: count }));
+    const graphData = Object.entries(yearPaperCount).map(([year, count]) => ({
+      x: year,
+      y: count,
+    }));
 
     data.push({ id: groupName, data: graphData });
   });
@@ -680,7 +702,11 @@ export const getPaperNetworkLinkDetails = (
   intersection(allReferences1, allReferences2).forEach((b) => {
     const percent1 = allReferences1.filter((b1) => b1 === b).length / allReferences1.length;
     const percent2 = allReferences2.filter((b1) => b1 === b).length / allReferences2.length;
-    references.push({ bibcode: b, percent1: percent1 * 100, percent2: percent2 * 100 });
+    references.push({
+      bibcode: b,
+      percent1: percent1 * 100,
+      percent2: percent2 * 100,
+    });
   });
 
   references.sort((a, b) => b.percent1 * b.percent2 - a.percent1 * a.percent2);

src/components/__mocks__/data.ts

@@ -1,5 +1,5 @@
-import { BarDatum } from '@nivo/bar';
-import { Serie } from '@nivo/line';
+import type { BarDatum } from '@nivo/bar';
+import type { Serie } from '@nivo/line';
 import { Esources, IDocsEntity } from '@/api/search/types';
 import { IADSApiMetricsResponse } from '@/api/metrics/types';
 

src/instrumentation.ts

@@ -0,0 +1,9 @@
+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');
+  }
+}