From 8703f83b72f12051548fd677a3de2ba5e29f58f9 Mon Sep 17 00:00:00 2001 From: Matias Pequeno Date: Fri, 23 Feb 2024 21:34:53 -0300 Subject: [PATCH] Fixed lint warnings and errors and formatted examples --- examples/create-react-app/src/App.js | 52 ++++--- examples/create-react-app/src/App.test.js | 12 +- examples/create-react-app/src/index.js | 16 +- examples/create-react-app/src/logo.svg | 2 +- .../create-react-app/src/reportWebVitals.js | 18 +-- examples/create-react-app/src/setupTests.js | 2 +- examples/index.js | 138 +++++++++--------- examples/nextjs/pages/_app.tsx | 20 +-- examples/nextjs/pages/index.tsx | 27 ++-- examples/nextjs/public/vercel.svg | 4 +- examples/typescript/.eslintrc | 8 +- examples/typescript/README.md | 14 +- examples/typescript/src/App.tsx | 38 +++-- examples/typescript/src/ExampleClass.tsx | 14 +- examples/typescript/src/ExampleErrors.tsx | 42 +++--- examples/typescript/src/FallbackUI.tsx | 6 +- examples/typescript/src/index.tsx | 10 +- examples/typescript/src/setupTests.ts | 2 +- examples/typescript/tsconfig.json | 10 +- 19 files changed, 223 insertions(+), 212 deletions(-) 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 = () => {

Welcome to Next.js!

- +

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{' '} - Vercel Logo + Vercel Logo 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 ( - +
-

- Rollbar React Example -

+

Rollbar React Example

@@ -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"] }