diff --git a/README.md b/README.md index d444c6c..9c08f2f 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ next month. - [Prerequisites](#prerequisites) - [Install Rollbar SDK](#install-rollbar-sdk) - [Usage and Reference](#usage-and-reference) + - [Simplest Usage Possible](#simplest-usage-possible) - [Components](#components) - [`Provider` Component](#provider-component) - [`ErrorBoundary` Component](#errorboundary-component) @@ -39,7 +40,7 @@ After following those 2 steps, you will be ready. ### Install Rollbar React SDK We are hosting our `@rollbar` scoped packages in Github Packages. In order to use this you will need to follow the -instructions for [Installing a Package from Github Packages](https://docs.github.com/en/packages/guides/configuring-npm-for-use-with-github-packages#installing-a-package) +instructions for [Installing a Package from Github Packages][1] In the same directory as your `package.json` file, add a `.npmrc` file with the following: @@ -59,6 +60,26 @@ To install with `yarn`: yarn add @rollbar/react ``` +To install by adding to `package.json` (as suggested by [Github Packages docs][1]), add the following to your project's +`package.json` file: + +```json + … + "dependencies": { + "@rollbar/react": "^0.7.0", + … + } + … +``` + +then run either using `npm` or `yarn` (or other package manager): + +```shell +npm install +# OR +yarn install +``` + ## Usage and Reference The React SDK is very new and has not been given the full documentation treatment we expect to get from [Rollbar Docs], @@ -66,6 +87,35 @@ but that will be coming shortly and a direct link will be put here for your refe In the meantime, the basic usage reference is available below. +### Simplest Usage Possible + +To get you started quickly, here is an example that will get you started right away by providing the easiest and simplest +usage possible: + +```javascript +import React from 'react'; +import { Provider, ErrorBoundary } from '@rollbar/react'; // <-- Provider imports 'rollbar' for us + +// same configuration you would create for the Rollbar.js SDK +const rollbarConfig = { + accessToken: 'POST_CLIENT_ITEM_ACCESS_TOKEN', + environment: 'production', +}; + +export default function App() { + return ( + {/* Provider instantiates Rollbar client instance handling any uncaught errors or unhandled promises in the browser */} + + {/* ErrorBoundary catches all React errors in the tree below and logs them to Rollbar */} + + // all other app providers and components - Rollbar will just work + … + + + ); +}; +``` + ## Components The following components are available as named imports from `@rollbar/react`. @@ -162,12 +212,12 @@ introduced in React 16. The `ErrorBoundary` is used to wrap any tree or subtree in your React App to catch React Errors and log them to Rollbar automatically. -The `ErrorBoundary` relies on the [`Provider`](#provider-component) above for the instance of Rollbar, so it will utilize +The `ErrorBoundary` relies on the [`Provider`] above for the instance of Rollbar, so it will utilize whatever configuration has been provided. #### Simple Usage -You can add an `ErrorBoundary` component to the top of your tree right after the `Provider` with no additional props +You can add an `ErrorBoundary` component to the top of your tree right after the [`Provider`] with no additional props and it will just work: ```javascript @@ -261,7 +311,7 @@ messages to [Rollbar]. This works for your `ErrorBoundary` from above or any other log or message sent to [Rollbar] while the `RollbarContext` is mounted on the tree. -Like `ErrorBoundary` above, `RollbarContext` relies on a `Provider` for an instance of a [Rollbar.js] client. +Like `ErrorBoundary` above, `RollbarContext` relies on a [`Provider`] for an instance of a [Rollbar.js] client. #### Basic Usage @@ -338,10 +388,6 @@ export default function About(props) { } ``` -#### Controlling when the context is set - -- `onRender` (optional) is any value that will be treated as a `Boolean` (truthy or falsey) - ## Functions The following functions are available as named imports from `@rollbar/react`. @@ -425,17 +471,172 @@ const unlisten = history.listen(historyListener); ## Hooks +The following hooks are available as named imports from `@rollbar/react` for use in [Functional Components] making use of the +[React Hooks API] introduced in React 16.8. + +### Reliance on `Provider` + +All of these hooks below require there to be a [`Provider`] in the React Tree as an ancestor to the component using the hook. + ### `useRollbar` hook +To consume the [Rollbar.js] instance directly from the [`Provider`] in your React Tree and make use of the client API within +your [Functional Component], use the `useRollbar` hook which will return the instance from the currently scoped [React Context]. + +Here is a basic example: + +```javascript +import { useRollbar } from '@rollbar/react'; + +function ContactDetails({ contactId }) { + const rollbar = useRollbar(); // <-- must have parent Provider + const [contact, setContact] = useState(); + + useEffect(async () => { + try { + const { data } = await getContactFromApi(contactId); + setContact(data.contact); + } catch (error) { + rollbar.error('Error fetching contact', error, { contactId }); + } + }, [contactId]); + + return ( +
+ … +
+ ); +} +``` ### `useRollbarContext` hook +As an alternative to the [`RollbarContext`] component, you can use the `useRollbarContext` hook in your [Functional Component] +to set the `context` in the [Rollbar.js] client provided by the [`Provider`] above in the React Tree. + +Here's an example of using it in several components: + +```javascript +// src/pages/HomePage.js +import { useRollbarContext } from '@rollbar/react'; + +function HomePage(props) { + useRollbarContext('home#index'); + + return ( +
+ … +
+ ); +} + +// src/pages/UsersPage.js +import { useRollbarContext } from '@rollbar/react'; +import UserTable from '../components/users/UserTable'; + +function UsersPage(props) { + useRollbarContext('users#list'); + + return ( + + ); +} + +// src/pages/UserDetailsPage.js +import { useRollbarContext } from '@rollbar/react'; +import UserDetails from '../components/users/UserDetails'; + +function UserDetailsPage(props) { + useRollbarContext('users#details'); + + return ( + + ); +} +``` ### `useRollbarPerson` hook +It's very usefull in [Rollbar] to log the identity of a person or user using your App for 2 major reasons: + +1. It allows you to know exactly who has been affected by an item or error in your App +2. It allows [Rollbar] to tell you the impact a given item or error is having on your users + +To make it convenient and easy to set the identity of a person in your React App, the `@rollbar/react` package +has the `userRollbarPerson` hook. + +To use it, simply pass an `Object` that has keys and values used to identify an individual user of your App, +and for any future events or messages logged to [Rollbar] will include that person data attached to the log. + +Here is a simple example of using it once the current user has been determined: + +```javascript +import { useState } from 'react'; +import { useRollbarPerson } from '@rollbar/react'; +import LoggedInHome from './LoggedInHome'; +import LoggedOutHome from './LoggedOutHome'; + +function Home() { + const [currentUser, setCurrentUser] = useState(); + + useEffect(async () => { + const user = await Auth.getCurrentUser(); + if (user) { + useRollbarPerson(user); + } + setCurrentUser(user); + }); + + if (currentUser != null) { + return ; + } + + return ; +} +``` ### `useRollbarCaptureEvent` hook +[Rollbar.js] already provides automated [Telemetry] with the default configuration `autoInstrument: true` in the client +which will capture useful telemetry events and data for you. + +To provide more breadcrumbs useful for identifying the cause of an item or error, you can add your own capture events +that will be included in the [Telemetry] of an item in [Rollbar] with the `useRollbarCaptureEvent` hook. + +The `useRollbarCaptureEvent` hook is designed to capture a new event in your [Functional Component] any time the +`metadata` or `level` you provide to the hook changes. On rerenders, no event is captured if there is not a change +to the references provided to those 2 arguments (utilizing the `dependencies` array arg underneath within the call to +the built-in React `useEffect` hook). + +Here is an example of using `useRollbarCaptureEvent` in the render cycle of a [Functional Component] to send a telemetry +event related to the data that will be rendered in the component + +```javascript +import { useEffect, useState } from 'react'; +import { userRollbar, useRollbarCaptureEvent, LEVEL_INFO } from '@rollbar/react'; + +function BookDetails({ bookId }) { + const rollbar = useRollbar(); // <-- must have parent Provider + const [book, setBook] = useState(); + + useEffect(async () => { + try { + const { data } = await getBook(bookId); + setBook(data.book); + } catch (error) { + rollbar.error('Error fetching book', error, { bookId }); // <-- use rollbar to log errors as normal + } + }, [bookId]); + + useRollbarCaptureEvent(book, LEVEL_INFO); // <-- only fires when book changes + + return ( +
+ … +
+ ) +} +``` [Rollbar]: https://rollbar.com @@ -443,8 +644,15 @@ const unlisten = history.listen(historyListener); [Rollbar.js]: https://github.com/rollbar/rollbar.js [Rollbar.js Setup Instructions]: https://github.com/rollbar/rollbar.js/#setup-instructions [React Native SDK]: https://github.com/rollbar/rollbar-react-native +[Telemetry]: https://docs.rollbar.com/docs/rollbarjs-telemetry +[`Provider`]: #provider-component +[`ErrorBoundary`]: #errorboundary-component +[`RollbarContext`]: #rollbarcontext-component +[Functional Components]: https://reactjs.org/docs/components-and-props.html#function-and-class-components [React Context]: https://reactjs.org/docs/context.html [Error Boundaries]: https://reactjs.org/docs/error-boundaries.html +[React Hooks API]: https://reactjs.org/docs/hooks-intro.html [history]: https://www.npmjs.com/package/history [history.location]: https://github.com/ReactTraining/history/blob/master/docs/api-reference.md#location [history.action]: https://github.com/ReactTraining/history/blob/master/docs/api-reference.md#action +[1]: https://docs.github.com/en/packages/guides/configuring-npm-for-use-with-github-packages#installing-a-package