add vercel speed insights

aidenybai · Dec 8, 2024 · b0d0c45 · b0d0c45
1 parent 9022eac
commit b0d0c45
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -15,5 +15,8 @@
     "eslint": "^8.57.1",
     "prettier": "^3.3.3"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@vercel/speed-insights": "^1.1.0"
+  }
 }
diff --git a/packages/extension/src/assets/css/no-react.css b/packages/extension/src/assets/css/no-react.css
@@ -1,4 +1,4 @@
-html.freeze>body {
+html.freeze > body {
   pointer-events: none;
 }
 
@@ -46,7 +46,8 @@ html.freeze #react-scan-toast {
   max-width: 480px;
   color: #fff;
   font-size: 12px;
-  font-family: Menlo, Consolas, Monaco, 'Liberation Mono', 'Lucida Console', monospace;
+  font-family: Menlo, Consolas, Monaco, 'Liberation Mono', 'Lucida Console',
+    monospace;
   line-height: 1.5;
   background: rgba(0, 0, 0, 0.95);
   border: 1px solid rgba(255, 255, 255, 0.1);

diff --git a/packages/kitchen-sink/src/index.jsx b/packages/kitchen-sink/src/index.jsx
@@ -2,6 +2,7 @@ import { scan } from 'react-scan/dist/index.mjs'; // force production build
 import React, { useState, createContext } from 'react';
 import ReactDOMClient from 'react-dom/client';
 import { Analytics } from '@vercel/analytics/react';
+import { SpeedInsights } from '@vercel/speed-insights/react';
 
 import './styles.css';
 
@@ -195,6 +196,7 @@ export const Input = ({ onChange, onEnter, value }) => {
 ReactDOMClient.createRoot(document.getElementById('root')).render(
   <>
     <Analytics />
+    <SpeedInsights />
     <App />
     {/* <Monitor apiKey="123" /> */}
   </>,

diff --git a/packages/website/app/layout.tsx b/packages/website/app/layout.tsx
@@ -1,8 +1,8 @@
 import './globals.css';
 import localFont from 'next/font/local';
+import Script from 'next/script';
 import Header from '../components/header';
 import Footer from '../components/footer';
-import Script from 'next/script';
 
 const geistSans = localFont({
   src: './fonts/GeistVF.woff',
@@ -67,7 +67,10 @@ export default function RootLayout({
         <meta name="author" content="Aiden Bai" />
         <meta name="theme-color" content="#8b5cf6" />
         <link rel="canonical" href="https://react-scan.million.dev" />
-        <Script strategy="beforeInteractive" src="https://unpkg.com/react-scan/dist/auto.global.js" />
+        <Script
+          strategy="beforeInteractive"
+          src="https://unpkg.com/react-scan/dist/auto.global.js"
+        />
       </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen`}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml