From 16fb28961d401d938fd17645cbf5119299495829 Mon Sep 17 00:00:00 2001 From: Matias Pequeno Date: Wed, 20 Mar 2024 15:26:07 -0300 Subject: [PATCH] Updated README.md --- README.md | 46 +++++++++++++++++++++++++++-- examples/nextjs-approuter/README.md | 9 ------ 2 files changed, 44 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 954a036..8af8414 100644 --- a/README.md +++ b/README.md @@ -29,18 +29,32 @@ It is currently in a public Beta release right now as we push towards a 1.0 rele we want to provide full capability for using React SDK in your production apps. We expect a 1.0 release to come in the next month. +- [Key benefits of using Rollbar React are:](#key-benefits-of-using-rollbar-react-are) + - [In Beta](#in-beta) - [Setup Instructions](#setup-instructions) - [Prerequisites](#prerequisites) - - [Install Rollbar SDK](#install-rollbar-sdk) + - [Install Rollbar React SDK](#install-rollbar-react-sdk) - [Usage and Reference](#usage-and-reference) - [Simplest Usage Possible](#simplest-usage-possible) + - [Using with Next.js App Router](#using-with-nextjs-app-router) - [Components](#components) - [`Provider` Component](#provider-component) + - [Configuration Only Usage](#configuration-only-usage) + - [Instance Usage](#instance-usage) + - [React Native Usage](#react-native-usage) - [`ErrorBoundary` Component](#errorboundary-component) + - [Simple Usage](#simple-usage) + - [Pass `prop`s to control behavior](#pass-props-to-control-behavior) + - [Pass a Fallback UI](#pass-a-fallback-ui) - [`RollbarContext` Component](#rollbarcontext-component) + - [Basic Usage](#basic-usage) + - [Using with React Router](#using-with-react-router) - [Functions](#functions) - - [`historyContext`](#historycontext) + - [`historyContext` to create `history.listener`](#historycontext-to-create-historylistener) + - [Basic `historyContext` usage](#basic-historycontext-usage) + - [Controlling `historyContext` behavior with options](#controlling-historycontext-behavior-with-options) - [Hooks](#hooks) + - [Reliance on `Provider`](#reliance-on-provider) - [`useRollbar` hook](#userollbar-hook) - [`useRollbarContext` hook](#userollbarcontext-hook) - [`useRollbarPerson` hook](#userollbarperson-hook) @@ -125,6 +139,34 @@ export default function App() { }; ``` +### Using with Next.js App Router + +The first step to using Rollbar with the Next.js App Router is to configure your Rollbar instance. + +```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. + +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. + ## Components The following components are available as named imports from `@rollbar/react`. diff --git a/examples/nextjs-approuter/README.md b/examples/nextjs-approuter/README.md index 71c946b..63bec7d 100644 --- a/examples/nextjs-approuter/README.md +++ b/examples/nextjs-approuter/README.md @@ -16,15 +16,6 @@ bun dev Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - ## 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.