diff --git a/examples/create-react-app/src/App.js b/examples/create-react-app/src/App.js
index 7d08425..f0dc5f1 100644
--- a/examples/create-react-app/src/App.js
+++ b/examples/create-react-app/src/App.js
@@ -4,17 +4,14 @@ import {
Provider as RollbarProvider,
ErrorBoundary,
RollbarContext,
- useRollbar
+ useRollbar,
} from '@rollbar/react'
-import './App.css';
+import './App.css'
const rollbarConfig = {
accessToken: process.env.REACT_APP_PUBLIC_ROLLBAR_TOKEN,
- hostSafeList: [
- 'localhost:3000',
- 'localhost:4000',
- ],
+ hostSafeList: ['localhost:3000', 'localhost:4000'],
captureUncaught: true,
captureUnhandledRejections: true,
payload: {
@@ -26,7 +23,7 @@ const rollbarConfig = {
},
},
},
-};
+}
function App() {
return (
@@ -34,7 +31,9 @@ function App() {
Oops, there was an error.
}
+ fallbackUI={() => (
+ Oops, there was an error.
+ )}
extra={{ more: 'data' }}
callback={() => console.log('an exception was sent to rollbar')}
>
@@ -51,10 +50,10 @@ function App() {
- );
+ )
}
-export default App;
+export default App
function Router() {
return (
@@ -62,50 +61,55 @@ function Router() {
} />
} />
- );
+ )
}
function RouteA() {
- const rollbar = useRollbar();
+ const rollbar = useRollbar()
- const [message, setMessage] = useState('example');
+ const [message, setMessage] = useState('example')
- const fullMessage = useMemo(() => `Hello, ${message}!`, [message]);
+ const fullMessage = useMemo(() => `Hello, ${message}!`, [message])
return (
A
Message: {fullMessage}
- setMessage(event.target.value)} />
+ setMessage(event.target.value)}
+ />
-
+
- );
+ )
}
function RouteB() {
- const [errorState, setErrorState] = useState({ error: false });
+ const [errorState, setErrorState] = useState({ error: false })
const updateErrorState = () => {
// Use an error state and throw inside render,
// because React won't send errors within event handlers
// to the error boundary component.
setErrorState({
- error: true
- });
- };
+ error: true,
+ })
+ }
if (errorState.error) {
// This uncaught error will be handled by the ErrorBoundary.
- throw new Error('uncaught test error');
+ throw new Error('uncaught test error')
}
return (
B
-
- );
+ )
}
diff --git a/examples/create-react-app/src/App.test.js b/examples/create-react-app/src/App.test.js
index 1f03afe..4741580 100644
--- a/examples/create-react-app/src/App.test.js
+++ b/examples/create-react-app/src/App.test.js
@@ -1,8 +1,8 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from '@testing-library/react'
+import App from './App'
test('renders learn react link', () => {
- render();
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
+ render()
+ const linkElement = screen.getByText(/learn react/i)
+ expect(linkElement).toBeInTheDocument()
+})
diff --git a/examples/create-react-app/src/index.js b/examples/create-react-app/src/index.js
index 44b5f8b..1c0b889 100644
--- a/examples/create-react-app/src/index.js
+++ b/examples/create-react-app/src/index.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { BrowserRouter } from "react-router-dom";
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
ReactDOM.render(
@@ -12,9 +12,9 @@ ReactDOM.render(
,
document.getElementById('root')
-);
+)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()
diff --git a/examples/create-react-app/src/logo.svg b/examples/create-react-app/src/logo.svg
index 9dfc1c0..7169476 100644
--- a/examples/create-react-app/src/logo.svg
+++ b/examples/create-react-app/src/logo.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/examples/create-react-app/src/reportWebVitals.js b/examples/create-react-app/src/reportWebVitals.js
index 5253d3a..dc6ff07 100644
--- a/examples/create-react-app/src/reportWebVitals.js
+++ b/examples/create-react-app/src/reportWebVitals.js
@@ -1,13 +1,13 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
+ getCLS(onPerfEntry)
+ getFID(onPerfEntry)
+ getFCP(onPerfEntry)
+ getLCP(onPerfEntry)
+ getTTFB(onPerfEntry)
+ })
}
-};
+}
-export default reportWebVitals;
+export default reportWebVitals
diff --git a/examples/create-react-app/src/setupTests.js b/examples/create-react-app/src/setupTests.js
index 8f2609b..52aaef1 100644
--- a/examples/create-react-app/src/setupTests.js
+++ b/examples/create-react-app/src/setupTests.js
@@ -2,4 +2,4 @@
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'
diff --git a/examples/index.js b/examples/index.js
index 2a29787..250bcfc 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -1,50 +1,69 @@
-import React, { useEffect, useState } from 'react';
-import Rollbar from 'rollbar';
-import { Router, Switch, Route } from 'react-router-dom';
-import { Client } from 'rollbar-react-native';
-import { Provider, Context, ErrorBoundary, useRollbar, useRollbarCaptureEvent, LEVEL_INFO, useRollbarPerson, useContext, RollbarContext, historyContext } from '../src';
-
-function ErrorDisplay({error, resetError}) { // <-- props passed to fallbackUI component
+/* eslint-disable */
+
+import React, { useEffect, useState } from 'react'
+import Rollbar from 'rollbar'
+import { Router, Switch, Route } from 'react-router-dom'
+import { Client } from 'rollbar-react-native'
+import {
+ Provider,
+ Context,
+ ErrorBoundary,
+ useRollbar,
+ useRollbarCaptureEvent,
+ LEVEL_INFO,
+ useRollbarPerson,
+ useContext,
+ RollbarContext,
+ historyContext,
+} from '../src'
+
+function ErrorDisplay({ error, resetError }) {
+ // <-- props passed to fallbackUI component
if (error instanceof AggregateError) {
- return ;
+ return
}
return (
Something went wrong.
{error &&
{error.toString()}
}
- );
+ )
}
const rollbarConfig = {
accessToken: 'POST_CLIENT_ITEM_ACCESS_TOKEN',
environment: 'production',
-};
+}
-const rollbar = new Client('POST_CLIENT_ITEM_ACCESS_TOKEN');
+const rollbar_client = new Client('POST_CLIENT_ITEM_ACCESS_TOKEN')
-const ROUTE_PARAMS_RE = /\/\d+/g;
+const ROUTE_PARAMS_RE = /\/\d+/g
-const historyListener = historyContext(rollbar, {
+const historyListener = historyContext(rollbar_client, {
// optional: default uses location.pathname
- formatter: (location, action) => location.pathname.replace(ROUTE_PARAMS_RE, ''),
+ formatter: (location, action) =>
+ location.pathname.replace(ROUTE_PARAMS_RE, ''),
// optional: true return sets Rollbar context
filter: (location, action) => !location.pathname.includes('admin'),
-});
-const unlisten = history.listen(historyListener);
-
+})
+const unlisten = history.listen(historyListener)
-const rollbar = new Rollbar(rollbarConfig);
+const rollbar = new Rollbar(rollbarConfig)
-function level(error, info) { // <-- same signature as componentDidCatch(error, info)
- return error instanceof TypeError ? 'error' : 'warn';
+function level(error, info) {
+ // <-- same signature as componentDidCatch(error, info)
+ return error instanceof TypeError ? 'error' : 'warn'
}
function errorMessage(error, { componentStack }) {
- const sourceComponents = componentStack.split('\n').map(c => c.trim().replace('in ', ''))
- return `component ${sourceComponents[0]} had an error`;
+ const sourceComponents = componentStack
+ .split('\n')
+ .map((c) => c.trim().replace('in ', ''))
+ return `component ${sourceComponents[0]} had an error`
}
function extraData(error, info) {
- return info.componentStack.includes('Experiment') ? { experiment: true } : null;
+ return info.componentStack.includes('Experiment')
+ ? { experiment: true }
+ : null
}
const stack = `\n in Card\n in App\n in ErrorBoundary\n in ErrorProvider`
@@ -74,68 +93,62 @@ const Routes = () => (
function Contacts(props) {
return (
-
- …
-
+ …
)
}
function Home() {
- const [currentUser, setCurrentUser] = useState();
+ const [currentUser, setCurrentUser] = useState()
useEffect(async () => {
- const user = await Auth.getCurrentUser();
+ const user = await Auth.getCurrentUser()
if (user) {
- useRollbarPerson(user);
+ useRollbarPerson(user)
}
- setCurrentUser(user);
- });
+ setCurrentUser(user)
+ })
if (currentUser != null) {
- return ;
+ return
}
- return ;
+ return
}
function ContactDetails({ contactId }) {
- const rollbar = useRollbar(); // <-- must have parent Provider
- const [contact, setContact] = useState();
+ const rollbar = useRollbar() // <-- must have parent Provider
+ const [contact, setContact] = useState()
useEffect(async () => {
try {
- const { data } = await getContact(contactId);
- setContact(data.contact);
+ const { data } = await getContact(contactId)
+ setContact(data.contact)
} catch (error) {
- rollbar.error('Error fetching contact', error, { contactId });
+ rollbar.error('Error fetching contact', error, { contactId })
}
- }, [contactId]);
+ }, [contactId])
- useRollbarCaptureEvent(contact, LEVEL_INFO); // <-- only fires when contact changes
+ useRollbarCaptureEvent(contact, LEVEL_INFO) // <-- only fires when contact changes
- return (
-
- …
-
- )
+ return …
}
function App(props) {
return (
-
-
-
+
I'm Here
- `${error.message}`} extraData={{ person: {}, form: { name: 'myform' } }}>
-
+ `${error.message}`}
+ extraData={{ person: {}, form: { name: 'myform' } }}
+ >
+
@@ -146,33 +159,26 @@ function App(props) {
}
function HomePage(props) {
- useContext('home#index');
+ useContext('home#index')
- return (
-
- …
-
- );
+ return …
}
function UsersPage(props) {
- useContext('users#list');
+ useContext('users#list')
- return (
-
- );
+ return
}
function MyInput(props) {
- const rollbar = useRollbar();
+ const rollbar = useRollbar()
useEffect(() => {
try {
-
} catch (err) {
- rollbar.error('error fetching data', err);
+ rollbar.error('error fetching data', err)
}
- });
+ })
}
/**
diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
index af80a6c..d04c726 100644
--- a/examples/nextjs/pages/_app.tsx
+++ b/examples/nextjs/pages/_app.tsx
@@ -1,13 +1,11 @@
+import React from 'react'
import '../styles/globals.css'
import type { AppProps } from 'next/app'
-import { Provider, ErrorBoundary } from '@rollbar/react';
+import { Provider, ErrorBoundary } from '@rollbar/react'
const rollbarConfig = {
accessToken: process.env.NEXT_PUBLIC_ROLLBAR_TOKEN,
- hostSafeList: [
- 'localhost:3000',
- 'localhost:4000',
- ],
+ hostSafeList: ['localhost:3000', 'localhost:4000'],
captureUncaught: true,
captureUnhandledRejections: true,
payload: {
@@ -16,9 +14,9 @@ const rollbarConfig = {
javascript: {
code_version: '1.0.0',
source_map_enabled: true,
- }
- }
- }
+ },
+ },
+ },
}
function MyApp({ Component, pageProps }: AppProps) {
@@ -27,14 +25,16 @@ function MyApp({ Component, pageProps }: AppProps) {
Oops, there was an error.
}
+ fallbackUI={() => (
+ Oops, there was an error.
+ )}
extra={{ more: 'data' }}
callback={() => console.log('an exception was sent to rollbar')}
>
- );
+ )
}
export default MyApp
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
index 3e0b246..2335f31 100644
--- a/examples/nextjs/pages/index.tsx
+++ b/examples/nextjs/pages/index.tsx
@@ -1,22 +1,23 @@
+import React from 'react'
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
-import { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react'
import styles from '../styles/Home.module.css'
-import { useRollbar, RollbarContext } from '@rollbar/react';
+import { useRollbar, RollbarContext } from '@rollbar/react'
const Home: NextPage = () => {
- const rollbar = useRollbar();
+ const rollbar = useRollbar()
const sendMessage = useCallback(() => {
- rollbar.info('manual message');
+ rollbar.info('manual message')
}, [rollbar])
- const [errorState, setErrorState] = useState(false);
+ const [errorState, setErrorState] = useState(false)
if (errorState) {
- throw new Error('uncaught error (nextjs)');
+ throw new Error('uncaught error (nextjs)')
}
return (
@@ -32,12 +33,11 @@ const Home: NextPage = () => {
-
+
Get started by sending a message{' '}
- {' '}
- or throwing an uncaught exception{' '}
-
+ or throwing an uncaught
+ exception
@@ -49,7 +49,12 @@ const Home: NextPage = () => {
>
Powered by{' '}
-
+
diff --git a/examples/nextjs/public/vercel.svg b/examples/nextjs/public/vercel.svg
index fbf0e25..7daff19 100644
--- a/examples/nextjs/public/vercel.svg
+++ b/examples/nextjs/public/vercel.svg
@@ -1,4 +1,4 @@
-
\ No newline at end of file
+
diff --git a/examples/typescript/.eslintrc b/examples/typescript/.eslintrc
index 36f9ade..04709d9 100644
--- a/examples/typescript/.eslintrc
+++ b/examples/typescript/.eslintrc
@@ -5,11 +5,7 @@
},
"root": true,
"parser": "@typescript-eslint/parser",
- "plugins": [
- "react",
- "react-hooks",
- "@typescript-eslint"
- ],
+ "plugins": ["react", "react-hooks", "@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
@@ -17,7 +13,7 @@
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
- "prettier",
+ "prettier"
],
"parserOptions": {
"tsconfigRootDir": ".",
diff --git a/examples/typescript/README.md b/examples/typescript/README.md
index f1d0e72..866a625 100644
--- a/examples/typescript/README.md
+++ b/examples/typescript/README.md
@@ -3,12 +3,13 @@
This project demonstrates @rollbar/react in a basic Typescript app.
## Rollbar usage in this example
-* Provider component
-* ErrorBoundary
-* Usage from class components
-* Hooks
- * useRollbar
- * useRollbarContext
+
+- Provider component
+- ErrorBoundary
+- Usage from class components
+- Hooks
+ - useRollbar
+ - useRollbarContext
## Rollbar configuration
@@ -16,6 +17,7 @@ To send live reports to Rollbar, replace `POST_CLIENT_ITEM_TOKEN` in App.tsx
with your valid client token before building your webpack bundle.
## Documentation
+
For complete documentation see https://docs.rollbar.com/docs/react
and https://docs.rollbar.com/docs/react-ts.
diff --git a/examples/typescript/src/App.tsx b/examples/typescript/src/App.tsx
index bd2a457..0def860 100644
--- a/examples/typescript/src/App.tsx
+++ b/examples/typescript/src/App.tsx
@@ -1,11 +1,11 @@
-import React, { ReactElement } from 'react';
-import './App.css';
-import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
-import Rollbar from 'rollbar';
-import { Provider, ErrorBoundary } from '@rollbar/react';
-import ExampleErrors from './ExampleErrors';
-import ExampleClass from './ExampleClass';
-import { FallbackUI } from './FallbackUI';
+import React, { ReactElement } from 'react'
+import './App.css'
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
+import Rollbar from 'rollbar'
+import { Provider, ErrorBoundary } from '@rollbar/react'
+import ExampleErrors from './ExampleErrors'
+import ExampleClass from './ExampleClass'
+import { FallbackUI } from './FallbackUI'
function App(): ReactElement {
const rollbarConfig: Rollbar.Configuration = {
@@ -18,10 +18,10 @@ function App(): ReactElement {
javascript: {
code_version: '1.0.0',
source_map_enabled: true,
- }
- }
- }
- };
+ },
+ },
+ },
+ }
// To provide your own Rollbar.js instance, pass `instance` to Provider
// instead of `config`. One might do this if loading from a non-npm source.
@@ -29,12 +29,10 @@ function App(): ReactElement {
//
return (
-
+
@@ -49,15 +47,15 @@ function App(): ReactElement {
- } />
- } />
+ } />
+ } />
- );
+ )
}
-export default App;
+export default App
diff --git a/examples/typescript/src/ExampleClass.tsx b/examples/typescript/src/ExampleClass.tsx
index 4323d9b..3faf224 100644
--- a/examples/typescript/src/ExampleClass.tsx
+++ b/examples/typescript/src/ExampleClass.tsx
@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import Rollbar from 'rollbar';
-import { Context, getRollbarFromContext } from '@rollbar/react';
+import React, { ReactNode } from 'react'
+import Rollbar from 'rollbar'
+import { Context, getRollbarFromContext } from '@rollbar/react'
// Example of using the Rollbar object from a class component.
@@ -8,13 +8,13 @@ export default class ExampleClass extends React.Component {
// Context here is a React Context and contextType is a special value used by React.
// This technique can only be used when consuming one provider.
// For multiple providers, see https://docs.rollbar.com/docs/react
- static contextType = Context;
- rollbar: Rollbar | undefined;
+ static contextType = Context
+ rollbar: Rollbar | undefined
componentDidMount(): void {
- this.rollbar = getRollbarFromContext(this.context);
+ this.rollbar = getRollbarFromContext(this.context)
- this.rollbar.info('message from class component');
+ this.rollbar.info('message from class component')
}
render(): ReactNode {
diff --git a/examples/typescript/src/ExampleErrors.tsx b/examples/typescript/src/ExampleErrors.tsx
index 92f8acd..84fb0a5 100644
--- a/examples/typescript/src/ExampleErrors.tsx
+++ b/examples/typescript/src/ExampleErrors.tsx
@@ -1,55 +1,61 @@
-import React, { ReactElement } from 'react';
-import PropTypes from 'prop-types';
-import Rollbar from 'rollbar';
-import { useState } from 'react';
-import { useRollbar, useRollbarContext } from '@rollbar/react';
+import React, { ReactElement } from 'react'
+import PropTypes from 'prop-types'
+import Rollbar from 'rollbar'
+import { useState } from 'react'
+import { useRollbar, useRollbarContext } from '@rollbar/react'
interface Props {
name: string
}
function ExampleErrors(props: Props): ReactElement {
- const rollbar: Rollbar = useRollbar();
- useRollbarContext(`/${props.name}`);
+ const rollbar: Rollbar = useRollbar()
+ useRollbarContext(`/${props.name}`)
const sendRollbarMessage = () => {
- rollbar.info(`test react-app message: ${props.name}`);
+ rollbar.info(`test react-app message: ${props.name}`)
}
const sendRollbarError = () => {
try {
- throw new Error('caught test error');
+ throw new Error('caught test error')
} catch (e) {
- rollbar.error(e as Rollbar.LogArgument);
+ rollbar.error(e as Rollbar.LogArgument)
}
}
- const [errorState, setErrorState] = useState({ error: false });
+ const [errorState, setErrorState] = useState({ error: false })
const updateErrorState = () => {
// Use an error state and throw inside render,
// because React won't send errors within event handlers
// to the error boundary component.
- setErrorState({ error: true });
+ setErrorState({ error: true })
}
if (errorState.error) {
// This uncaught error will be handled by the ErrorBoundary.
- throw new Error('uncaught test error');
+ throw new Error('uncaught test error')
}
return (
<>
Rollbar Example for React Child Component: {props.name}
-
-
-
+
+
+
)
}
ExampleErrors.propTypes = {
- name: PropTypes.string
+ name: PropTypes.string,
}
-export default ExampleErrors;
+export default ExampleErrors
diff --git a/examples/typescript/src/FallbackUI.tsx b/examples/typescript/src/FallbackUI.tsx
index aede402..77c7e2c 100644
--- a/examples/typescript/src/FallbackUI.tsx
+++ b/examples/typescript/src/FallbackUI.tsx
@@ -1,10 +1,10 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement } from 'react'
export interface FallbackProps {
error?: Error
}
-export const FallbackUI = ({ error }:FallbackProps): ReactElement => {
- const message = error?.message || 'unknown error';
+export const FallbackUI = ({ error }: FallbackProps): ReactElement => {
+ const message = error?.message || 'unknown error'
return Oops, there was an error: {message}
}
diff --git a/examples/typescript/src/index.tsx b/examples/typescript/src/index.tsx
index 6832e78..606a3cf 100644
--- a/examples/typescript/src/index.tsx
+++ b/examples/typescript/src/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
ReactDOM.render(
,
document.getElementById('root')
-);
+)
diff --git a/examples/typescript/src/setupTests.ts b/examples/typescript/src/setupTests.ts
index 8f2609b..52aaef1 100644
--- a/examples/typescript/src/setupTests.ts
+++ b/examples/typescript/src/setupTests.ts
@@ -2,4 +2,4 @@
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'
diff --git a/examples/typescript/tsconfig.json b/examples/typescript/tsconfig.json
index a273b0c..9d379a3 100644
--- a/examples/typescript/tsconfig.json
+++ b/examples/typescript/tsconfig.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
@@ -20,7 +16,5 @@
"noEmit": true,
"jsx": "react-jsx"
},
- "include": [
- "src"
- ]
+ "include": ["src"]
}