Implement React 19 TypeScript example (#1279)

Author: matux

examples/react-19-typescript/src/App.tsx

@@ -1,28 +1,38 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
+import React, { useState } from 'react';
 import Rollbar from 'rollbar';
-const instance: Rollbar = new Rollbar(); // TODO(matux): finish example once import is working
+import ErrorBoundary from './ErrorBoundary';
+import TestError from './TestError';
 
 function App() {
+  const [rollbar] = useState(() => new Rollbar({
+    accessToken: 'POST_CLIENT_ITEM_TOKEN',
+    captureUncaught: true,
+    captureUnhandledRejections: true,
+  }));
+
+  const logInfo = () => {
+    // Example log event using the rollbar object.
+    rollbar.info('react test log');
+  };
+
+  const throwError = () => {
+    // Example error, which will be reported to rollbar.
+    throw new Error('react test error');
+  };
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <React.Fragment>
+      <h1>Rollbar Example for React</h1>
+      <button id="rollbar-info" onClick={logInfo}>
+        Log Info
+      </button>
+      <button id="throw-error" onClick={throwError}>
+        ThrowError
+      </button>
+      <ErrorBoundary rollbar={rollbar}>
+        <TestError />
+      </ErrorBoundary>
+    </React.Fragment>
   );
 }
 

examples/react-19-typescript/src/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+import React, { Component, ReactNode } from 'react';
+import Rollbar from 'rollbar';
+
+interface Props {
+  children: ReactNode;
+  rollbar: Rollbar;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    this.props.rollbar.info(error.message);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <h1>Something went wrong.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

examples/react-19-typescript/src/TestError.tsx

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+interface State {
+  throwError: boolean;
+}
+
+class TestError extends Component<{}, State> {
+  constructor(props: {}) {
+    super(props);
+
+    this.state = { throwError: false };
+
+    this.setErrorState = this.setErrorState.bind(this);
+  }
+
+  setErrorState() {
+    // Use an error state and throw inside render,
+    // because React won't send errors within event handlers
+    // to the error boundary component.
+    this.setState({ throwError: true });
+  }
+
+  render() {
+    if (this.state.throwError) {
+      throw new Error('react child test error');
+    }
+    return (
+      <React.Fragment>
+        <h1>Rollbar Example for React Child Component</h1>
+        <button id="child-error" onClick={this.setErrorState}>
+          Throw Child Error
+        </button>
+      </React.Fragment>
+    );
+  }
+}
+
+export default TestError;