-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 <matt.laforest@rollbar.com>
- Loading branch information
Showing
38 changed files
with
6,018 additions
and
337 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -24,6 +24,8 @@ jobs: | |
- node: 21 | ||
npm: 10 | ||
|
||
continue-on-error: true | ||
|
||
steps: | ||
- name: Checkout | ||
uses: actions/checkout@v4 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"root": true, | ||
"extends": "next/core-web-vitals" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
.yarn/install-state.gz | ||
|
||
# testing | ||
/coverage | ||
|
||
# next.js | ||
/.next/ | ||
/out/ | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
*.pem | ||
|
||
# debug | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
|
||
# local env files | ||
.env*.local | ||
|
||
# vercel | ||
.vercel | ||
|
||
# typescript | ||
*.tsbuildinfo | ||
next-env.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
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). | ||
|
||
## Getting Started | ||
|
||
First, run the development server: | ||
|
||
```bash | ||
npm run dev | ||
# or | ||
yarn dev | ||
# or | ||
pnpm dev | ||
# or | ||
bun dev | ||
``` | ||
|
||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. | ||
|
||
## Using Rollbar with the Next.js App Router | ||
|
||
The first step to using Rollbar with the Next.js App Router is to configure your Rollbar instance. | ||
|
||
``` | ||
// ./src/rollbar.ts | ||
import Rollbar from 'rollbar'; | ||
const baseConfig = { | ||
captureUncaught: true, | ||
captureUnhandledRejections: true, | ||
environment: process.env.NODE_ENV, | ||
}; | ||
export const clientConfig = { | ||
accessToken: process.env.NEXT_PUBLIC_POST_CLIENT_ITEM_TOKEN, | ||
...baseConfig, | ||
}; | ||
export const serverInstance = new Rollbar({ | ||
accessToken: process.env.POST_SERVER_ITEM_TOKEN, | ||
...baseConfig, | ||
}); | ||
``` | ||
|
||
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. | ||
|
||
### Configuring the Rollbar Provider | ||
|
||
To be able to use the hooks consistently through your application. It is easiest if you configure your Rollbar Provider within your root layout. | ||
|
||
**_Note:_** The Rollbar Provider uses a React Context. This context, like hooks are only available for use in your client components. | ||
|
||
### Configuring the global-error handler | ||
|
||
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. | ||
|
||
### Using the Next.js route error handler (Recommended) | ||
|
||
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. | ||
|
||
### Using the Rollbar ErrorBoundary | ||
|
||
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 | ||
|
||
#### Special note on Error boundaries | ||
|
||
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
/** @type {import('next').NextConfig} */ | ||
const nextConfig = {}; | ||
|
||
export default nextConfig; |
Oops, something went wrong.