@appsignal/react

Installation

With npm or yarn

Add the @appsignal/react and @appsignal/javascript packages to your package.json. Then, run npm install/yarn install.

You can also add these packages to your package.json on the command line:

sh
yarn add @appsignal/javascript @appsignal/react npm install --save @appsignal/javascript @appsignal/react

You can also use the React integration with React Native and Expo.

With JSPM.io import maps

Using the JSPM.io import map generator, you can generate an import map for your application's dependencies.

Add @appsignal/javascript and @appsignal/react to the dependencies list in the generator, then add the generated import map and ES module shims to your application's code.

With rails-importmap

Use the following command to add these packages to your Rails application's import maps:

sh
./bin/importmap pin @appsignal/javascript @appsignal/react

Usage

Error Boundary

If you are using React v16 or higher, you can use the ErrorBoundary component to catch errors from anywhere in the child component tree.

jsx
import React from "react"; import ReactDOM from "react-dom"; import { appsignal } from "./appsignal"; import { ErrorBoundary } from "@appsignal/react"; const FallbackComponent = () => ( <div>Uh oh! There was an error :(</div> ); const App = () => ( <ErrorBoundary instance={appsignal} tags={{ tag: "value" }} {/* Optional */} fallback={(error) => <FallbackComponent />} {/* Optional */} > { /** Child components here **/} </ErrorBoundary> ); ReactDOM.render(<App />, document.getElementById("root"));

Legacy Boundary

The API that this component uses is unstable at this point in React's development. We offer this component as a means to support those running React v15, but do not guarantee its reliablity. You are encouraged to use the ErrorBoundary whenever possible.

The LegacyBoundary works in almost exactly the same way as the ErrorBoundary:

jsx
import React from "react"; import ReactDOM from "react-dom"; import { appsignal } from "./appsignal"; import { LegacyBoundary } from "@appsignal/react"; const FallbackComponent = () => <div>Uh oh! There was an error :(</div>; const App = () => ( <LegacyBoundary instance={appsignal} fallback={(error) => <FallbackComponent />} > {/** Child components here **/} </LegacyBoundary> ); ReactDOM.render(<App />, document.getElementById("root"));