@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:
yarn add @appsignal/javascript @appsignal/react npm install --save @appsignal/javascript @appsignal/react
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:
./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.
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 LegacyBoundary
works in almost exactly the same way as the ErrorBoundary
:
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"));