Merge pull request #128 from rollbar/matt/cleanup-nextjs-examples

Cleanup nextjs examples
rollbar · Oct 24, 2024 · a9b7529 · a9b7529
2 parents 418412d + d1bf3b1
commit a9b7529
Show file tree

Hide file tree

Showing 53 changed files with 3,775 additions and 2,563 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -15,8 +15,6 @@ jobs:
     strategy:
       matrix:
         include:
-          - node: 16
-            npm: 8
           - node: 18
             npm: 9
           - node: 20

diff --git a/examples/nextjs-approuter/.eslintrc.json b/examples/nextjs-approuter/.eslintrc.json
@@ -1,4 +1,4 @@
 {
   "root": true,
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals"]
 }
diff --git a/examples/nextjs-approuter/package-lock.json b/examples/nextjs-approuter/package-lock.json
diff --git a/examples/nextjs-approuter/package.json b/examples/nextjs-approuter/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nextjs-approuter",
+  "name": "nextjs-app-router-test",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -8,26 +8,21 @@
     "start": "next start",
     "lint": "next lint"
   },
-  "engines": {
-    "node": ">=18"
-  },
   "dependencies": {
     "@rollbar/react": "file:.yalc/@rollbar/react",
-    "next": "14.1.3",
+    "next": "14.2.15",
     "react": "^18",
-    "react-code-blocks": "^0.1.6",
     "react-dom": "^18",
     "rollbar": "^2.26.4"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "autoprefixer": "^10.0.1",
     "eslint": "^8",
-    "eslint-config-next": "14.1.3",
+    "eslint-config-next": "14.2.15",
     "postcss": "^8",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
 }
diff --git a/examples/nextjs-approuter/postcss.config.js b/examples/nextjs-approuter/postcss.config.js
diff --git a/examples/nextjs-approuter/postcss.config.mjs b/examples/nextjs-approuter/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/examples/nextjs-approuter/public/vercel.svg b/examples/nextjs-approuter/public/vercel.svg
diff --git a/examples/nextjs-approuter/src/app/callback.tsx b/examples/nextjs-approuter/src/app/callback.tsx
diff --git a/examples/nextjs-approuter/src/app/fallback.tsx b/examples/nextjs-approuter/src/app/fallback.tsx
diff --git a/examples/nextjs-approuter/src/app/fonts/GeistMonoVF.woff b/examples/nextjs-approuter/src/app/fonts/GeistMonoVF.woff
diff --git a/examples/nextjs-approuter/src/app/fonts/GeistVF.woff b/examples/nextjs-approuter/src/app/fonts/GeistVF.woff
diff --git a/examples/nextjs-approuter/src/app/global-error.tsx b/examples/nextjs-approuter/src/app/global-error.tsx
@@ -2,20 +2,21 @@
 
 import { useEffect } from 'react';
 import { ResetPage } from '@/components/ResetPage';
-import { useRollbar } from '@rollbar/react';
+import Rollbar from 'rollbar';
+import { clientConfig } from '@/rollbar';
 
 export default function GlobalError({
   error,
   reset,
 }: {
-  error: Error & { digest?: string };
+  error: Error;
   reset: () => void;
 }) {
-  const rollbar = useRollbar();
 
   useEffect(() => {
+    const rollbar = new Rollbar(clientConfig)
     rollbar.error(error);
-  }, [error, rollbar]);
+  }, [error]);
 
   return (
     <html>

diff --git a/examples/nextjs-approuter/src/app/globals.css b/examples/nextjs-approuter/src/app/globals.css
@@ -3,27 +3,21 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --background: #ffffff;
+  --foreground: #171717;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background: #0a0a0a;
+    --foreground: #ededed;
   }
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 @layer utilities {

diff --git a/examples/nextjs-approuter/src/app/layout.tsx b/examples/nextjs-approuter/src/app/layout.tsx
@@ -1,27 +1,40 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import localFont from 'next/font/local';
 
 import { Provider as RollbarProvider } from '@rollbar/react';
 import { clientConfig } from '@/rollbar';
 
 import './globals.css';
 
-const inter = Inter({ subsets: ['latin'] });
+const geistSans = localFont({
+  src: './fonts/GeistVF.woff',
+  variable: '--font-geist-sans',
+  weight: '100 900',
+});
+const geistMono = localFont({
+  src: './fonts/GeistMonoVF.woff',
+  variable: '--font-geist-mono',
+  weight: '100 900',
+});
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <RollbarProvider config={clientConfig}>
       <html lang="en">
-        <body className={inter.className}>{children}</body>
+        <body
+          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        >
+          {children}
+        </body>
       </html>
     </RollbarProvider>
   );

diff --git a/examples/nextjs-approuter/src/app/middleware.ts b/examples/nextjs-approuter/src/app/middleware.ts
diff --git a/examples/nextjs-approuter/src/app/next_error_handler/error.tsx b/examples/nextjs-approuter/src/app/next_error_handler/error.tsx
@@ -1,4 +1,4 @@
-'use client'; // Error components must be Client Components
+'use client';
 
 import { useEffect } from 'react';
 import { ResetPage } from '@/components/ResetPage';
@@ -8,11 +8,14 @@ export default function Error({
   error,
   reset,
 }: {
-  error: Error & { digest?: string };
+  error: Error;
   reset: () => void;
 }) {
+  console.log('NextErrorHandler error', error);
+
   const rollbar = useRollbar();
   useEffect(() => {
+    console.log('NextErrorHandler useEffect', rollbar);
     rollbar.error(error);
   }, [error, rollbar]);
 

diff --git a/examples/nextjs-approuter/src/app/page.tsx b/examples/nextjs-approuter/src/app/page.tsx
@@ -1,33 +1,101 @@
-import * as fs from 'fs';
-import { Code } from '@/components/Code';
-import Link from 'next/link';
-
-const code = fs.readFileSync('./src/rollbar.ts', 'utf-8');
+import Image from "next/image";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-start p-24 space-y-8">
-      <header>
-        <h1 className="mb-4 text-4xl font-extrabold leading-none">
-          Rollbar: Next.js App Router Example
-        </h1>
-      </header>
-      <p>
-        Using Rollbar with the Next.js App Router is quick and easy to
-        implement. The first step for any integration will be creating your own
-        Rollbar instance. This can be done as follows:
-      </p>
-      <Code code={code} />
-      <p>
-        This will create a rollbar instance that you can use to capture your
-        errors. It can be used within the{' '}
-        <Link href="/next_error_handler">Next.JS App Router error handler</Link>{' '}
-        or using the{' '}
-        <Link href="/rollbar_error_boundary">
-          {`<ErrorBoundary`} from the @rollbar/react package
-        </Link>{' '}
-        . It can also be used server side within Next.js middleware
-      </p>
-    </main>
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        <Image
+          className="dark:invert"
+          src="https://nextjs.org/icons/next.svg"
+          alt="Next.js logo"
+          width={180}
+          height={38}
+          priority
+        />
+        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+          <li className="mb-2">
+            Get started by editing{" "}
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
+              src/app/page.tsx
+            </code>
+            .
+          </li>
+          <li>Save and see your changes instantly.</li>
+        </ol>
+
+        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <a
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="https://nextjs.org/icons/vercel.svg"
+              alt="Vercel logomark"
+              width={20}
+              height={20}
+            />
+            Deploy now
+          </a>
+          <a
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read our docs
+          </a>
+        </div>
+      </main>
+      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="https://nextjs.org/icons/file.svg"
+            alt="File icon"
+            width={16}
+            height={16}
+          />
+          Learn
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="https://nextjs.org/icons/window.svg"
+            alt="Window icon"
+            width={16}
+            height={16}
+          />
+          Examples
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="https://nextjs.org/icons/globe.svg"
+            alt="Globe icon"
+            width={16}
+            height={16}
+          />
+          Go to nextjs.org →
+        </a>
+      </footer>
+    </div>
   );
 }
diff --git a/examples/nextjs-approuter/src/app/rollbar_error_boundary/page.tsx b/examples/nextjs-approuter/src/app/rollbar_error_boundary/page.tsx
@@ -6,7 +6,7 @@ import { ResetPage } from '@/components/ResetPage';
 
 export default function RollbarErrorBoundary() {
   return (
-    <ErrorBoundary fallbackUI={() => <ResetPage reset={() => {}} />}>
+    <ErrorBoundary fallbackUI={() => <ResetPage reset={() => { location.reload()}} />}>
       <button
         className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
         onClick={() => {

diff --git a/examples/nextjs-approuter/src/components/Code.tsx b/examples/nextjs-approuter/src/components/Code.tsx
diff --git a/examples/nextjs-approuter/src/components/ResetPage.tsx b/examples/nextjs-approuter/src/components/ResetPage.tsx
@@ -3,8 +3,8 @@
 export function ResetPage({ reset }: { reset: () => void }) {
   return (
     <div>
-      <h2>Something went wrong!</h2>
-      <button onClick={() => reset()}>Try again</button>
+      <h1>Something went wrong!</h1>
+      <button onClick={reset}>Try again</button>
     </div>
   );
 }
diff --git a/examples/nextjs-approuter/src/rollbar.ts b/examples/nextjs-approuter/src/rollbar.ts
@@ -7,11 +7,11 @@ const baseConfig = {
 };
 
 export const clientConfig = {
-  accessToken: process.env.NEXT_PUBLIC_POST_CLIENT_ITEM_TOKEN,
+  accessToken: process.env.NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN,
   ...baseConfig,
 };
 
 export const serverInstance = new Rollbar({
-  accessToken: process.env.POST_SERVER_ITEM_TOKEN,
+  accessToken: process.env.ROLLBAR_SERVER_TOKEN,
   ...baseConfig,
 });