rollbar · mudetroit · Mar 5, 2024 · Mar 5, 2024 · Mar 5, 2024 · Mar 5, 2024
diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json
diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
-import { Provider, ErrorBoundary } from '@rollbar/react';
+import Rollbar from 'rollbar';
+import { ErrorBoundary } from '@rollbar/react';
 
-const rollbarConfig = {
+export const rollbar = new Rollbar({
   accessToken: process.env.NEXT_PUBLIC_ROLLBAR_TOKEN,
   hostSafeList: ['localhost:3000', 'localhost:4000'],
   captureUncaught: true,
@@ -17,23 +18,22 @@ const rollbarConfig = {
       },
     },
   },
-};
+});
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <Provider config={rollbarConfig}>
-      <ErrorBoundary
-        level="critical"
-        errorMessage="example error boundary message"
-        fallbackUI={() => (
-          <p style={{ color: 'red' }}>Oops, there was an error.</p>
-        )}
-        extra={{ more: 'data' }}
-        callback={() => console.log('an exception was sent to rollbar')}
-      >
-        <Component {...pageProps} />
-      </ErrorBoundary>
-    </Provider>
+    <ErrorBoundary
+      rollbar={rollbar}
+      level="critical"
+      errorMessage="example error boundary message"
+      fallbackUI={() => (
+        <p style={{ color: 'red' }}>Oops, there was an error.</p>
+      )}
+      extra={{ more: 'data' }}
+      callback={() => console.log('an exception was sent to rollbar')}
+    >
+      <Component {...pageProps} />
+    </ErrorBoundary>
   );
 }
 

diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
@@ -2,17 +2,14 @@ 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 { useState } from 'react';
+import { rollbar } from './_app';
 import styles from '../styles/Home.module.css';
 
-import { useRollbar, RollbarContext } from '@rollbar/react';
-
 const Home: NextPage = () => {
-  const rollbar = useRollbar();
-
-  const sendMessage = useCallback(() => {
+  const sendMessage = () => {
     rollbar.info('manual message');
-  }, [rollbar]);
+  };
 
   const [errorState, setErrorState] = useState(false);
 
@@ -21,45 +18,38 @@ const Home: NextPage = () => {
   }
 
   return (
-    <RollbarContext context="">
-      <div className={styles.container}>
-        <Head>
-          <title>Create Next App</title>
-          <meta name="description" content="Generated by create next app" />
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
-
-        <main className={styles.main}>
-          <h1 className={styles.title}>
-            Welcome to <a href="https://nextjs.org">Next.js!</a>
-          </h1>
-
-          <p className={styles.description}>
-            Get started by sending a message{' '}
-            <button onClick={sendMessage}>send</button> or throwing an uncaught
-            exception <button onClick={() => setErrorState(true)}>throw</button>
-          </p>
-        </main>
-
-        <footer className={styles.footer}>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Powered by{' '}
-            <span className={styles.logo}>
-              <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
-                width={72}
-                height={16}
-              />
-            </span>
-          </a>
-        </footer>
-      </div>
-    </RollbarContext>
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Welcome to <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+
+        <p className={styles.description}>
+          Get started by sending a message{' '}
+          <button onClick={sendMessage}>send</button> or throwing an uncaught
+          exception <button onClick={() => setErrorState(true)}>throw</button>
+        </p>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </div>
   );
 };
 

diff --git a/examples/react-17/package-lock.json b/examples/react-17/package-lock.json
diff --git a/examples/react-17/src/App.js b/examples/react-17/src/App.js
@@ -1,15 +1,11 @@
 import { useState, useMemo } from 'react';
 import { Routes, Route, Link } from 'react-router-dom';
-import {
-  Provider as RollbarProvider,
-  ErrorBoundary,
-  RollbarContext,
-  useRollbar,
-} from '@rollbar/react';
+import Rollbar from 'rollbar';
+import { ErrorBoundary } from '@rollbar/react';
 
 import './App.css';
 
-const rollbarConfig = {
+const rollbar = new Rollbar({
   accessToken: process.env.REACT_APP_PUBLIC_ROLLBAR_TOKEN,
   hostSafeList: ['localhost:3000', 'localhost:4000'],
   captureUncaught: true,
@@ -23,33 +19,32 @@ 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>
-        )}
-        extra={{ more: 'data' }}
-        callback={() => console.log('an exception was sent to rollbar')}
-      >
-        <nav>
-          <ul>
-            <li>
-              <Link to="/a">A</Link>
-            </li>
-            <li>
-              <Link to="/b">B</Link>
-            </li>
-          </ul>
-        </nav>
-        <Router />
-      </ErrorBoundary>
-    </RollbarProvider>
+    <ErrorBoundary
+      rollbar={rollbar}
+      level="critical"
+      errorMessage="example error boundary message"
+      fallbackUI={() => (
+        <p style={{ color: 'red' }}>Oops, there was an error.</p>
+      )}
+      extra={{ more: 'data' }}
+      callback={() => console.log('an exception was sent to rollbar')}
+    >
+      <nav>
+        <ul>
+          <li>
+            <Link to="/a">A</Link>
+          </li>
+          <li>
+            <Link to="/b">B</Link>
+          </li>
+        </ul>
+      </nav>
+      <Router />
+    </ErrorBoundary>
   );
 }
 

diff --git a/examples/typescript/package-lock.json b/examples/typescript/package-lock.json
diff --git a/examples/typescript/src/App.tsx b/examples/typescript/src/App.tsx
@@ -2,13 +2,13 @@ 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 { ErrorBoundary } from '@rollbar/react';
 import ExampleErrors from './ExampleErrors';
 import ExampleClass from './ExampleClass';
 import { FallbackUI } from './FallbackUI';
 
 function App(): ReactElement {
-  const rollbarConfig: Rollbar.Configuration = {
+  const rollbar = new Rollbar({
     accessToken: 'POST_CLIENT_ITEM_TOKEN',
     captureUncaught: true,
     captureUnhandledRejections: true,
@@ -21,40 +21,37 @@ function App(): ReactElement {
         },
       },
     },
-  };
-
-  // 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.
-  // const instance: Rollbar = new Rollbar(rollbarConfig);
-  // <Provider instance={instance} >
+  });
 
   return (
-    <Provider config={rollbarConfig}>
-      <div className="App">
-        <header className="App-header">
-          <p>Rollbar React Example</p>
-        </header>
-        <ErrorBoundary fallbackUI={FallbackUI} extra={{ data: 'foo' }}>
-          <Router>
-            <nav>
-              <ul>
-                <li>
-                  <Link to="/">Home</Link>
-                </li>
-                <li>
-                  <Link to="/away">Away</Link>
-                </li>
-              </ul>
-            </nav>
-            <Routes>
-              <Route path="/" element={<ExampleErrors name="Home" />} />
-              <Route path="/away" element={<ExampleErrors name="Away" />} />
-            </Routes>
-          </Router>
-          <ExampleClass />
-        </ErrorBoundary>
-      </div>
-    </Provider>
+    <div className="App">
+      <header className="App-header">
+        <p>Rollbar React Example</p>
+      </header>
+      <ErrorBoundary
+        rollbar={rollbar}
+        fallbackUI={FallbackUI}
+        extra={{ data: 'foo' }}
+      >
+        <Router>
+          <nav>
+            <ul>
+              <li>
+                <Link to="/">Home</Link>
+              </li>
+              <li>
+                <Link to="/away">Away</Link>
+              </li>
+            </ul>
+          </nav>
+          <Routes>
+            <Route path="/" element={<ExampleErrors name="Home" />} />
+            <Route path="/away" element={<ExampleErrors name="Away" />} />
+          </Routes>
+        </Router>
+        <ExampleClass />
+      </ErrorBoundary>
+    </div>
   );
 }
 

diff --git a/index.d.ts b/index.d.ts
@@ -21,6 +21,7 @@ export type LEVEL =
 
 type Extra = Record<string | number, unknown>;
 export interface ErrorBoundaryProps {
+  rollbar: Rollbar;
   children: ReactNode;
   fallbackUI?: ComponentType<{ error: Error | null; resetError: () => void }>;
   errorMessage?: string | (() => string);

diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -36,15 +36,8 @@ export default [
     input: {
       index: 'src/index.js',
       constant: 'src/constants.js',
-      Provider: 'src/provider.js',
       ErrorBoundary: 'src/error-boundary.js',
-      RollbarContext: 'src/rollbar-context.js',
       historyContext: 'src/history-context.js',
-      useRollbar: 'src/hooks/use-rollbar.js',
-      useRollbarConfiguration: 'src/hooks/use-rollbar-config.js',
-      useRollbarContext: 'src/hooks/use-rollbar-context.js',
-      useRollbarPerson: 'src/hooks/use-rollbar-person.js',
-      useRollbarCaptureEvent: 'src/hooks/use-rollbar-capture-event.js',
     },
     output: [
       {