fix: capture performance with vercel

rainbow-me · Jan 22, 2025 · 1f4faef · 1f4faef
1 parent 75c00d2
commit 1f4faef
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 20 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/site/package.json b/site/package.json
@@ -18,6 +18,7 @@
     "@vanilla-extract/next-plugin": "2.4.5",
     "@vanilla-extract/recipes": "0.5.5",
     "@vanilla-extract/sprinkles": "1.6.3",
+    "@vercel/speed-insights": "^1.1.0",
     "clsx": "2.1.1",
     "copy-to-clipboard": "^3.3.1",
     "deepmerge": "^4.2.2",

diff --git a/site/pages/_app.tsx b/site/pages/_app.tsx
@@ -1,12 +1,14 @@
 import '@rainbow-me/rainbowkit/styles.css';
-import { Provider } from 'components/Provider/Provider';
+import { SpeedInsights } from '@vercel/speed-insights/next';
+import { NextIntlClientProvider } from 'next-intl';
 import type { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
 import React, { useEffect } from 'react';
+
+import { Provider } from 'components/Provider/Provider';
 import { DocsLayout } from '../components/DocsLayout/DocsLayout';
 import { GuidesLayout } from '../components/GuidesLayout/GuidesLayout';
 
-import { NextIntlClientProvider } from 'next-intl';
 import '../css/docsSearch.css';
 import '../css/global.css';
 import { vars } from '../css/vars.css';
@@ -60,25 +62,28 @@ function App({ Component, pageProps }: AppProps) {
   }, [isDocs, isGuides]);
 
   return (
-    <NextIntlClientProvider
-      locale={router.locale}
-      messages={pageProps.messages}
-      timeZone="America/New_York" // Required to not get warnings
-    >
-      <Provider>
-        {isDocs ? (
-          <DocsLayout>
-            <Component {...pageProps} />
-          </DocsLayout>
-        ) : isGuides ? (
-          <GuidesLayout>
+    <>
+      <NextIntlClientProvider
+        locale={router.locale}
+        messages={pageProps.messages}
+        timeZone="America/New_York" // Required to not get warnings
+      >
+        <Provider>
+          {isDocs ? (
+            <DocsLayout>
+              <Component {...pageProps} />
+            </DocsLayout>
+          ) : isGuides ? (
+            <GuidesLayout>
+              <Component {...pageProps} />
+            </GuidesLayout>
+          ) : (
             <Component {...pageProps} />
-          </GuidesLayout>
-        ) : (
-          <Component {...pageProps} />
-        )}
-      </Provider>
-    </NextIntlClientProvider>
+          )}
+        </Provider>
+      </NextIntlClientProvider>
+      <SpeedInsights />
+    </>
   );
 }