Fixed lint warnings and errors and formatted examples

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,15 +23,17 @@ const rollbarConfig = {
       },
     },
   },
-};
+}
 
 function App() {
   return (
     <RollbarProvider config={rollbarConfig}>
       <ErrorBoundary
         level="critical"
         errorMessage="example error boundary message"
-        fallbackUI={() => <p style={{ color: 'red' }}>Oops, there was an error.</p>}
+        fallbackUI={() => (
+          <p style={{ color: 'red' }}>Oops, there was an error.</p>
+        )}
         extra={{ more: 'data' }}
         callback={() => console.log('an exception was sent to rollbar')}
       >
@@ -51,61 +50,66 @@ function App() {
         <Router />
       </ErrorBoundary>
     </RollbarProvider>
-  );
+  )
 }
 
-export default App;
+export default App
 
 function Router() {
   return (
     <Routes>
       <Route path="a" element={<RouteA />} />
       <Route path="b" element={<RouteB />} />
     </Routes>
-  );
+  )
 }
 
 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 (
     <RollbarContext context="/a-context">
       <h1>A</h1>
       <p>Message: {fullMessage}</p>
-      <input value={message} onChange={(event) => setMessage(event.target.value)} />
+      <input
+        value={message}
+        onChange={(event) => setMessage(event.target.value)}
+      />
       <br />
-      <button onClick={() => rollbar.info(`Hello, ${message}.`)}>send message</button>
+      <button onClick={() => rollbar.info(`Hello, ${message}.`)}>
+        send message
+      </button>
     </RollbarContext>
-  );
+  )
 }
 
 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 (
     <RollbarContext context="/b-context">
       <h1>B</h1>
-      <button id='uncaught-error' onClick={updateErrorState}>
+      <button id="uncaught-error" onClick={updateErrorState}>
         Throw Uncaught Error
       </button>
     </RollbarContext>
-  );
+  )
 }

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(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+  render(<App />)
+  const linkElement = screen.getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
+})

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

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'

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 <AggregateDisplay error={error} />;
+    return <AggregateDisplay error={error} />
   }
   return (
     <div>
       <h1>Something went wrong.</h1>
       {error && <p>{error.toString()}</p>}
     </div>
-  );
+  )
 }
 
 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 (
     <Route path="/about">
-      <RollbarContext context="/about">
-        …
-      </RollbarContext>
+      <RollbarContext context="/about">…</RollbarContext>
     </Route>
   )
 }
 
 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 <LoggedInHome />;
+    return <LoggedInHome />
   }
 
-  return <LoggedOutHome />;
+  return <LoggedOutHome />
 }
 
 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 (
-    <div>
-      …
-    </div>
-  )
+  return <div>…</div>
 }
 
 function App(props) {
   return (
     <Provider rollbar={rollbar}>
-      <Router>
-
-      </Router>
+      <Router></Router>
       <RollbarContext name="">
         <ErrorBoundary fallbackUI={ErrorDisplay}>
           <div>
             <h1>I'm Here</h1>
             <MyInput>
-              <ErrorBoundary level errorMessage={(error, errorInfo) => `${error.message}`} extraData={{ person: {}, form: { name: 'myform' } }}>
-                <Form>
-
-                </Form>
+              <ErrorBoundary
+                level
+                errorMessage={(error, errorInfo) => `${error.message}`}
+                extraData={{ person: {}, form: { name: 'myform' } }}
+              >
+                <Form></Form>
               </ErrorBoundary>
             </MyInput>
           </div>
@@ -146,33 +159,26 @@ function App(props) {
 }
 
 function HomePage(props) {
-  useContext('home#index');
+  useContext('home#index')
 
-  return (
-    <div>
-      …
-    </div>
-  );
+  return <div>…</div>
 }
 
 function UsersPage(props) {
-  useContext('users#list');
+  useContext('users#list')
 
-  return (
-    <UserTable />
-  );
+  return <UserTable />
 }
 
 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)
     }
-  });
+  })
 }
 
 /**