ESLintify the library and its examples, enable linting in CI (#112)

Author: matux

.github/workflows/ci.yaml

@@ -14,7 +14,15 @@ jobs:
 
     strategy:
       matrix:
-        node: [14, 16, 18, 20]
+        include:
+          - node: 14
+            npm: 8
+          - node: 16
+            npm: 8
+          - node: 18
+            npm: 9
+          - node: 20
+            npm: 10
 
     steps:
       - name: Checkout
@@ -25,7 +33,10 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
 
-      - name: Cache
+      - name: Update npm
+        run: npm install -g npm@^${{ matrix.npm }}
+
+      - name: Set up cache
         uses: actions/cache@v4
         with:
           path: ~/.npm
@@ -49,9 +60,18 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           prettier: true
-          eslint: false
+          eslint: true
           eslint_args: '--max-warnings 0'
           eslint_extensions: js,jsx,ts,tsx
 
+      - name: Build library
+        run: npm run build
+      - name: Build examples/create-react-app
+        run: cd examples/create-react-app && npm run build
+      - name: Build examples/nextjs
+        run: cd examples/nextjs && npm run build
+      - name: Build examples/typescript
+        run: cd examples/typescript && npm run build
+
       - name: Test
         run: npm run test

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/babel.config.js

@@ -2,5 +2,5 @@
 module.exports = {
   root: true,
   extends: 'next/core-web-vitals',
-  ignorePatterns: ['node_modules'],
+  ignorePatterns: ['node_modules', '.next'],
 };