Skip to content

Commit 677f28d

Browse files
matuxmatux
authored
Example for Next.js 14 using App Router (#122)
* Next.js app router example * Update READMEs * Avoid building examples on unsupported nodes * Let ci continue building with the other node versions * Use the latest rollbar version 2.26.4 --------- Co-authored-by: Matthew LaForest <[email protected]>
1 parent 17a46d9 commit 677f28d

38 files changed

+6018
-337
lines changed

‎.github/workflows/ci.yaml

+2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ jobs:
2424
- node: 21
2525
npm: 10
2626

27+
continue-on-error: true
28+
2729
steps:
2830
- name: Checkout
2931
uses: actions/checkout@v4

‎README.md

+44-2
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,32 @@ It is currently in a public Beta release right now as we push towards a 1.0 rele
2929
we want to provide full capability for using React SDK in your production apps. We expect a 1.0 release to come in the
3030
next month.
3131

32+
- [Key benefits of using Rollbar React are:](#key-benefits-of-using-rollbar-react-are)
33+
- [In Beta](#in-beta)
3234
- [Setup Instructions](#setup-instructions)
3335
- [Prerequisites](#prerequisites)
34-
- [Install Rollbar SDK](#install-rollbar-sdk)
36+
- [Install Rollbar React SDK](#install-rollbar-react-sdk)
3537
- [Usage and Reference](#usage-and-reference)
3638
- [Simplest Usage Possible](#simplest-usage-possible)
39+
- [Using with Next.js App Router](#using-with-nextjs-app-router)
3740
- [Components](#components)
3841
- [`Provider` Component](#provider-component)
42+
- [Configuration Only Usage](#configuration-only-usage)
43+
- [Instance Usage](#instance-usage)
44+
- [React Native Usage](#react-native-usage)
3945
- [`ErrorBoundary` Component](#errorboundary-component)
46+
- [Simple Usage](#simple-usage)
47+
- [Pass `prop`s to control behavior](#pass-props-to-control-behavior)
48+
- [Pass a Fallback UI](#pass-a-fallback-ui)
4049
- [`RollbarContext` Component](#rollbarcontext-component)
50+
- [Basic Usage](#basic-usage)
51+
- [Using with React Router](#using-with-react-router)
4152
- [Functions](#functions)
42-
- [`historyContext`](#historycontext)
53+
- [`historyContext` to create `history.listener`](#historycontext-to-create-historylistener)
54+
- [Basic `historyContext` usage](#basic-historycontext-usage)
55+
- [Controlling `historyContext` behavior with options](#controlling-historycontext-behavior-with-options)
4356
- [Hooks](#hooks)
57+
- [Reliance on `Provider`](#reliance-on-provider)
4458
- [`useRollbar` hook](#userollbar-hook)
4559
- [`useRollbarContext` hook](#userollbarcontext-hook)
4660
- [`useRollbarPerson` hook](#userollbarperson-hook)
@@ -125,6 +139,34 @@ export default function App() {
125139
};
126140
```
127141

142+
### Using with Next.js App Router
143+
144+
The first step to using Rollbar with the Next.js App Router is to configure your Rollbar instance.
145+
146+
```ts
147+
import Rollbar from 'rollbar';
148+
149+
const baseConfig = {
150+
captureUncaught: true,
151+
captureUnhandledRejections: true,
152+
environment: process.env.NODE_ENV,
153+
};
154+
155+
export const clientConfig = {
156+
accessToken: process.env.NEXT_PUBLIC_POST_CLIENT_ITEM_TOKEN,
157+
...baseConfig,
158+
};
159+
160+
export const serverInstance = new Rollbar({
161+
accessToken: process.env.POST_SERVER_ITEM_TOKEN,
162+
...baseConfig,
163+
});
164+
```
165+
166+
We suggest you create a single instance for use server side, to be certain there are not more than one, and a config to use in your client side components. React Server Components limit you to passing simple objects as props from Server Components to Client Components. The config object can be used by the Rollbar Provider to construct your Rollbar instance.
167+
168+
There's a fully functional [example](./examples/nextjs-approuter) that showcases the many ways in which you can integrate Rollbar into your modern web-app leveraging React Server Components and the Next.js App Router.
169+
128170
## Components
129171

130172
The following components are available as named imports from `@rollbar/react`.

‎examples/nextjs-approuter/.eslintrc.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"root": true,
3+
"extends": "next/core-web-vitals"
4+
}

‎examples/nextjs-approuter/.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎examples/nextjs-approuter/README.md

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
## Using Rollbar with the Next.js App Router
20+
21+
The first step to using Rollbar with the Next.js App Router is to configure your Rollbar instance.
22+
23+
```
24+
// ./src/rollbar.ts
25+
import Rollbar from 'rollbar';
26+
27+
const baseConfig = {
28+
captureUncaught: true,
29+
captureUnhandledRejections: true,
30+
environment: process.env.NODE_ENV,
31+
};
32+
33+
export const clientConfig = {
34+
accessToken: process.env.NEXT_PUBLIC_POST_CLIENT_ITEM_TOKEN,
35+
...baseConfig,
36+
};
37+
38+
export const serverInstance = new Rollbar({
39+
accessToken: process.env.POST_SERVER_ITEM_TOKEN,
40+
...baseConfig,
41+
});
42+
```
43+
44+
We suggest you create a single instance for use server side, to be certain there are not more than one, and a config to use in your client side components. React Server Components limit you to passing simple objects as props from Server Components to Client Components. The config object can be used by the Rollbar Provider to construct your Rollbar instance.
45+
46+
### Configuring the Rollbar Provider
47+
48+
To be able to use the hooks consistently through your application. It is easiest if you configure your Rollbar Provider within your root layout.
49+
50+
**_Note:_** The Rollbar Provider uses a React Context. This context, like hooks are only available for use in your client components.
51+
52+
### Configuring the global-error handler
53+
54+
To be certain that you are catching all errors within your application, you will want to [configure a `global-error.js/tsx`](./src/app/global-error.tsx). This handler will catch errors, including from your root layout and relay then to Rollbar.
55+
56+
### Using the Next.js route error handler (Recommended)
57+
58+
Next.js provides an [error handler]() this handler will automatically wrap your router, at the desired level, within an [Error Boundary](). It is recommended to [use your Rollbar instance within this error handler](./src/app//next_error_handler/error.tsx) to report errors to Rollbar.
59+
60+
### Using the Rollbar ErrorBoundary
61+
62+
The `<ErrorBoundary>` component provided by this library [may still be used](./src/app/rollbar_error_boundary/page.tsx) if you would prefer that over the built in Next.js error handler
63+
64+
#### Special note on Error boundaries
65+
66+
The ErrorBoundary class is not perfect at catching and stopping the propagation of all errors. Be aware, that if you turn on `captureUncaught` or `captureUnhandledRejections` in your Rollbar config you may receive doubled occurrences.

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {};
3+
4+
export default nextConfig;

0 commit comments

Comments
 (0)