Fixed eslint errors and warnings and enabled lint ci

Added file-level comment to examples/index.js

dsa

.github/workflows/ci.yaml

@@ -55,7 +55,7 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           prettier: true
-          eslint: false
+          eslint: true
           eslint_args: '--max-warnings 0'
           eslint_extensions: js,jsx,ts,tsx
 

examples/index.js

@@ -1,3 +1,10 @@
+/**
+ * @file examples/index.js
+ * @fileoverview This is a repertoire of snippets exploring Rollbar's usage.
+ */
+
+/* eslint-disable no-unused-vars, react/jsx-no-undef, react/prop-types */
+
 import React, { useEffect, useState } from 'react'
 import Rollbar from 'rollbar'
 import { Router, Switch, Route } from 'react-router-dom'
@@ -33,11 +40,11 @@ const rollbarConfig = {
   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 historyListener = historyContext(rollbar, {
+const historyListener = historyContext(rollbar_client, {
   // optional: default uses location.pathname
   formatter: (location, action) =>
     location.pathname.replace(ROUTE_PARAMS_RE, ''),
@@ -96,14 +103,15 @@ function Contacts(props) {
   )
 }
 
+/* eslint-disable react-hooks/exhaustive-deps, no-undef */
+
 function Home() {
   const [currentUser, setCurrentUser] = useState()
 
+  useRollbarPerson(currentUser)
+
   useEffect(async () => {
     const user = await Auth.getCurrentUser()
-    if (user) {
-      useRollbarPerson(user)
-    }
     setCurrentUser(user)
   })
 
@@ -132,14 +140,16 @@ function ContactDetails({ contactId }) {
   return <div>…</div>
 }
 
+/* eslint-enable react-hooks/exhaustive-deps, no-undef */
+
 function App(props) {
   return (
     <Provider rollbar={rollbar}>
       <Router></Router>
       <RollbarContext name="">
         <ErrorBoundary fallbackUI={ErrorDisplay}>
           <div>
-            <h1>I'm Here</h1>
+            <h1>I&apos;m Here</h1>
             <MyInput>
               <ErrorBoundary
                 level
@@ -173,6 +183,7 @@ function MyInput(props) {
 
   useEffect(() => {
     try {
+      throw new Error('no data to fetch')
     } catch (err) {
       rollbar.error('error fetching data', err)
     }

examples/nextjs/pages/_app.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 import { Provider, ErrorBoundary } from '@rollbar/react'

examples/nextjs/pages/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import Image from 'next/image'

index.d.ts

@@ -26,7 +26,7 @@ export interface ErrorBoundaryProps {
   errorMessage?: string | (() => string)
   extra?: Extra | ((error: Error, errorInfo: ErrorInfo) => Extra)
   level?: LEVEL | (() => LEVEL)
-  callback?: Callback<any>
+  callback?: Callback
 }
 
 interface ErrorBoundaryState {

src/tests/utils/provider-util.tsx

@@ -1,14 +1,15 @@
-import React, { ReactElement } from 'react'
+import React, { ReactNode, ReactElement } from 'react'
 import { render, RenderOptions } from '@testing-library/react'
-import { Provider } from '../rollbar-react'
+import { Provider, ProviderProps } from '../rollbar-react'
 
 export const renderWithProviderProps = (
   ui: ReactElement,
   options: RenderOptions,
-  providerProps: any
-) => {
-  return render(ui, {
-    wrapper: (props) => <Provider {...props} {...providerProps} />,
+  providerProps: Omit<ProviderProps, 'children'>
+) =>
+  render(ui, {
+    wrapper: (props: { children?: ReactNode }) => (
+      <Provider {...{ children: props.children ?? <></> }} {...providerProps} />
+    ),
     ...options,
   })
-}