Skip to content

Commit a9b7529

Browse files
mudetroitmudetroit
authored
Merge pull request #128 from rollbar/matt/cleanup-nextjs-examples
Cleanup nextjs examples
2 parents 418412d + d1bf3b1 commit a9b7529

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+3775
-2563
lines changed

‎.github/workflows/ci.yaml

-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ jobs:
1515
strategy:
1616
matrix:
1717
include:
18-
- node: 16
19-
npm: 8
2018
- node: 18
2119
npm: 9
2220
- node: 20

‎examples/nextjs-approuter/.eslintrc.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"root": true,
3-
"extends": "next/core-web-vitals"
3+
"extends": ["next/core-web-vitals"]
44
}

‎examples/nextjs-approuter/package-lock.json

+1,327-1,282
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/nextjs-approuter/package.json

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "nextjs-approuter",
2+
"name": "nextjs-app-router-test",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
@@ -8,26 +8,21 @@
88
"start": "next start",
99
"lint": "next lint"
1010
},
11-
"engines": {
12-
"node": ">=18"
13-
},
1411
"dependencies": {
1512
"@rollbar/react": "file:.yalc/@rollbar/react",
16-
"next": "14.1.3",
13+
"next": "14.2.15",
1714
"react": "^18",
18-
"react-code-blocks": "^0.1.6",
1915
"react-dom": "^18",
2016
"rollbar": "^2.26.4"
2117
},
2218
"devDependencies": {
2319
"@types/node": "^20",
2420
"@types/react": "^18",
2521
"@types/react-dom": "^18",
26-
"autoprefixer": "^10.0.1",
2722
"eslint": "^8",
28-
"eslint-config-next": "14.1.3",
23+
"eslint-config-next": "14.2.15",
2924
"postcss": "^8",
30-
"tailwindcss": "^3.3.0",
25+
"tailwindcss": "^3.4.1",
3126
"typescript": "^5"
3227
}
3328
}

‎examples/nextjs-approuter/postcss.config.js

-6
This file was deleted.

‎examples/nextjs-approuter/postcss.config.mjs

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('postcss-load-config').Config} */
2+
const config = {
3+
plugins: {
4+
tailwindcss: {},
5+
},
6+
};
7+
8+
export default config;

‎examples/nextjs-approuter/public/vercel.svg

-1
This file was deleted.

‎examples/nextjs-approuter/src/app/callback.tsx

-7
This file was deleted.

‎examples/nextjs-approuter/src/app/fallback.tsx

-7
This file was deleted.

‎examples/nextjs-approuter/src/app/fonts/GeistMonoVF.woff

66.3 KB
Binary file not shown.

‎examples/nextjs-approuter/src/app/fonts/GeistVF.woff

64.7 KB
Binary file not shown.

‎examples/nextjs-approuter/src/app/global-error.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,21 @@
22

33
import { useEffect } from 'react';
44
import { ResetPage } from '@/components/ResetPage';
5-
import { useRollbar } from '@rollbar/react';
5+
import Rollbar from 'rollbar';
6+
import { clientConfig } from '@/rollbar';
67

78
export default function GlobalError({
89
error,
910
reset,
1011
}: {
11-
error: Error & { digest?: string };
12+
error: Error;
1213
reset: () => void;
1314
}) {
14-
const rollbar = useRollbar();
1515

1616
useEffect(() => {
17+
const rollbar = new Rollbar(clientConfig)
1718
rollbar.error(error);
18-
}, [error, rollbar]);
19+
}, [error]);
1920

2021
return (
2122
<html>

‎examples/nextjs-approuter/src/app/globals.css

+7-13
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,21 @@
33
@tailwind utilities;
44

55
:root {
6-
--foreground-rgb: 0, 0, 0;
7-
--background-start-rgb: 214, 219, 220;
8-
--background-end-rgb: 255, 255, 255;
6+
--background: #ffffff;
7+
--foreground: #171717;
98
}
109

1110
@media (prefers-color-scheme: dark) {
1211
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
12+
--background: #0a0a0a;
13+
--foreground: #ededed;
1614
}
1715
}
1816

1917
body {
20-
color: rgb(var(--foreground-rgb));
21-
background: linear-gradient(
22-
to bottom,
23-
transparent,
24-
rgb(var(--background-end-rgb))
25-
)
26-
rgb(var(--background-start-rgb));
18+
color: var(--foreground);
19+
background: var(--background);
20+
font-family: Arial, Helvetica, sans-serif;
2721
}
2822

2923
@layer utilities {

‎examples/nextjs-approuter/src/app/layout.tsx

+17-4
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,40 @@
11
import type { Metadata } from 'next';
2-
import { Inter } from 'next/font/google';
2+
import localFont from 'next/font/local';
33

44
import { Provider as RollbarProvider } from '@rollbar/react';
55
import { clientConfig } from '@/rollbar';
66

77
import './globals.css';
88

9-
const inter = Inter({ subsets: ['latin'] });
9+
const geistSans = localFont({
10+
src: './fonts/GeistVF.woff',
11+
variable: '--font-geist-sans',
12+
weight: '100 900',
13+
});
14+
const geistMono = localFont({
15+
src: './fonts/GeistMonoVF.woff',
16+
variable: '--font-geist-mono',
17+
weight: '100 900',
18+
});
1019

1120
export const metadata: Metadata = {
1221
title: 'Create Next App',
1322
description: 'Generated by create next app',
1423
};
1524

16-
export default function RootLayout({
25+
export default async function RootLayout({
1726
children,
1827
}: Readonly<{
1928
children: React.ReactNode;
2029
}>) {
2130
return (
2231
<RollbarProvider config={clientConfig}>
2332
<html lang="en">
24-
<body className={inter.className}>{children}</body>
33+
<body
34+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
35+
>
36+
{children}
37+
</body>
2538
</html>
2639
</RollbarProvider>
2740
);

‎examples/nextjs-approuter/src/app/middleware.ts

-8
This file was deleted.

‎examples/nextjs-approuter/src/app/next_error_handler/error.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
'use client'; // Error components must be Client Components
1+
'use client';
22

33
import { useEffect } from 'react';
44
import { ResetPage } from '@/components/ResetPage';
@@ -8,11 +8,14 @@ export default function Error({
88
error,
99
reset,
1010
}: {
11-
error: Error & { digest?: string };
11+
error: Error;
1212
reset: () => void;
1313
}) {
14+
console.log('NextErrorHandler error', error);
15+
1416
const rollbar = useRollbar();
1517
useEffect(() => {
18+
console.log('NextErrorHandler useEffect', rollbar);
1619
rollbar.error(error);
1720
}, [error, rollbar]);
1821

‎examples/nextjs-approuter/src/app/page.tsx

+96-28
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,101 @@
1-
import * as fs from 'fs';
2-
import { Code } from '@/components/Code';
3-
import Link from 'next/link';
4-
5-
const code = fs.readFileSync('./src/rollbar.ts', 'utf-8');
1+
import Image from "next/image";
62

73
export default function Home() {
84
return (
9-
<main className="flex min-h-screen flex-col items-start p-24 space-y-8">
10-
<header>
11-
<h1 className="mb-4 text-4xl font-extrabold leading-none">
12-
Rollbar: Next.js App Router Example
13-
</h1>
14-
</header>
15-
<p>
16-
Using Rollbar with the Next.js App Router is quick and easy to
17-
implement. The first step for any integration will be creating your own
18-
Rollbar instance. This can be done as follows:
19-
</p>
20-
<Code code={code} />
21-
<p>
22-
This will create a rollbar instance that you can use to capture your
23-
errors. It can be used within the{' '}
24-
<Link href="/next_error_handler">Next.JS App Router error handler</Link>{' '}
25-
or using the{' '}
26-
<Link href="/rollbar_error_boundary">
27-
{`<ErrorBoundary`} from the @rollbar/react package
28-
</Link>{' '}
29-
. It can also be used server side within Next.js middleware
30-
</p>
31-
</main>
5+
<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)]">
6+
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
7+
<Image
8+
className="dark:invert"
9+
src="https://nextjs.org/icons/next.svg"
10+
alt="Next.js logo"
11+
width={180}
12+
height={38}
13+
priority
14+
/>
15+
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
16+
<li className="mb-2">
17+
Get started by editing{" "}
18+
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
19+
src/app/page.tsx
20+
</code>
21+
.
22+
</li>
23+
<li>Save and see your changes instantly.</li>
24+
</ol>
25+
26+
<div className="flex gap-4 items-center flex-col sm:flex-row">
27+
<a
28+
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"
29+
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
30+
target="_blank"
31+
rel="noopener noreferrer"
32+
>
33+
<Image
34+
className="dark:invert"
35+
src="https://nextjs.org/icons/vercel.svg"
36+
alt="Vercel logomark"
37+
width={20}
38+
height={20}
39+
/>
40+
Deploy now
41+
</a>
42+
<a
43+
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"
44+
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
45+
target="_blank"
46+
rel="noopener noreferrer"
47+
>
48+
Read our docs
49+
</a>
50+
</div>
51+
</main>
52+
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
53+
<a
54+
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
55+
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
>
59+
<Image
60+
aria-hidden
61+
src="https://nextjs.org/icons/file.svg"
62+
alt="File icon"
63+
width={16}
64+
height={16}
65+
/>
66+
Learn
67+
</a>
68+
<a
69+
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
70+
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
71+
target="_blank"
72+
rel="noopener noreferrer"
73+
>
74+
<Image
75+
aria-hidden
76+
src="https://nextjs.org/icons/window.svg"
77+
alt="Window icon"
78+
width={16}
79+
height={16}
80+
/>
81+
Examples
82+
</a>
83+
<a
84+
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
85+
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
86+
target="_blank"
87+
rel="noopener noreferrer"
88+
>
89+
<Image
90+
aria-hidden
91+
src="https://nextjs.org/icons/globe.svg"
92+
alt="Globe icon"
93+
width={16}
94+
height={16}
95+
/>
96+
Go to nextjs.org →
97+
</a>
98+
</footer>
99+
</div>
32100
);
33101
}

‎examples/nextjs-approuter/src/app/rollbar_error_boundary/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ResetPage } from '@/components/ResetPage';
66

77
export default function RollbarErrorBoundary() {
88
return (
9-
<ErrorBoundary fallbackUI={() => <ResetPage reset={() => {}} />}>
9+
<ErrorBoundary fallbackUI={() => <ResetPage reset={() => { location.reload()}} />}>
1010
<button
1111
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
1212
onClick={() => {

‎examples/nextjs-approuter/src/components/Code.tsx

-7
This file was deleted.

‎examples/nextjs-approuter/src/components/ResetPage.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
export function ResetPage({ reset }: { reset: () => void }) {
44
return (
55
<div>
6-
<h2>Something went wrong!</h2>
7-
<button onClick={() => reset()}>Try again</button>
6+
<h1>Something went wrong!</h1>
7+
<button onClick={reset}>Try again</button>
88
</div>
99
);
1010
}

‎examples/nextjs-approuter/src/rollbar.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ const baseConfig = {
77
};
88

99
export const clientConfig = {
10-
accessToken: process.env.NEXT_PUBLIC_POST_CLIENT_ITEM_TOKEN,
10+
accessToken: process.env.NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN,
1111
...baseConfig,
1212
};
1313

1414
export const serverInstance = new Rollbar({
15-
accessToken: process.env.POST_SERVER_ITEM_TOKEN,
15+
accessToken: process.env.ROLLBAR_SERVER_TOKEN,
1616
...baseConfig,
1717
});

0 commit comments

Comments
 (0)