chore: update example to react 19

packages/react/example/package.json

@@ -3,16 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@honeybadger-io/js": "^6.10.1",
     "@honeybadger-io/react": "file:..",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "@types/jest": "^26.0.24",
     "@types/node": "^12.20.25",
-    "@types/react": "^17.0.22",
-    "@types/react-dom": "^17.0.9",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.3",
     "web-vitals": "^1.1.2"

packages/react/example/src/index.tsx

@@ -1,21 +1,34 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
-import {Honeybadger, HoneybadgerErrorBoundary} from '@honeybadger-io/react'
+import { Honeybadger, HoneybadgerErrorBoundary } from '@honeybadger-io/react'
+
+// React < 19
+// import ReactDOM from 'react-dom'
+
+// React >= 19
+import { createRoot } from 'react-dom/client'
 
 Honeybadger.configure({
-  apiKey: (process.env.REACT_APP_HONEYBADGER_API_KEY || (prompt('Enter the API key for your Honeybadger project:')) as string),
-  environment: 'production'
+    apiKey: (process.env.REACT_APP_HONEYBADGER_API_KEY || (prompt('Enter the API key for your Honeybadger project:')) as string),
+    environment: 'production'
 })
 
-ReactDOM.render(
-  <HoneybadgerErrorBoundary honeybadger={Honeybadger}>
+// React < 19
+// ReactDOM.render(
+//     // @ts-expect-error "refs" is missing
+//     <HoneybadgerErrorBoundary honeybadger={Honeybadger}>
+//         <App />
+//     </HoneybadgerErrorBoundary>,
+//     document.getElementById('root')
+// )
+
+// React >= 19
+const root = createRoot(document.getElementById('root')!)
+root.render(<HoneybadgerErrorBoundary honeybadger={Honeybadger}>
     <App />
-  </HoneybadgerErrorBoundary>,
-  document.getElementById('root')
-)
+</HoneybadgerErrorBoundary>)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

packages/react/src/DefaultErrorComponent.tsx

@@ -1,32 +1,20 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types';
+import React from 'react'
+import { DefaultErrorComponentProps } from './types';
 
-export interface DefaultErrorComponentProps {
-  error: Error | null
-  info: React.ErrorInfo | null
-}
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export default class DefaultErrorComponent extends Component<DefaultErrorComponentProps, {}> {
-
-  static propTypes = {
-    error: PropTypes.object,
-    info: PropTypes.object
-  }
-
-  render() {
-    return (
-      <div className='error'>
-        <div>
-          An Error Occurred
-        </div>
-        <div>
-          {JSON.stringify(this.props.error, null, 2)}
-        </div>
-        <div>
-          {this.props.info ? JSON.stringify(this.props.info, null, 2) : ''}
-        </div>
+function DefaultErrorComponent({ error, info }: DefaultErrorComponentProps) {
+  return (
+    <div className='error'>
+      <div>
+        An Error Occurred
       </div>
-    )
-  }
+      <div>
+        {JSON.stringify(error, null, 2)}
+      </div>
+      <div>
+        {info ? JSON.stringify(info, null, 2) : ''}
+      </div>
+    </div>
+  )
 }
+
+export default DefaultErrorComponent;

packages/react/src/HoneybadgerErrorBoundary.tsx

@@ -1,17 +1,6 @@
-import React, { Component, ComponentType, ElementType, ReactNode } from 'react'
-import Honeybadger from '@honeybadger-io/js'
-import DefaultErrorComponent, { DefaultErrorComponentProps } from './DefaultErrorComponent'
-
-interface HoneybadgerErrorBoundaryProps {
-  honeybadger: typeof Honeybadger
-  showUserFeedbackFormOnError?: boolean
-  ErrorComponent?: ReactNode | ComponentType | ElementType
-  children?: ReactNode
-}
-
-interface HoneybadgerErrorBoundaryState extends DefaultErrorComponentProps {
-  errorOccurred: boolean
-}
+import React, { Component, ReactNode } from 'react'
+import DefaultErrorComponent from './DefaultErrorComponent'
+import { HoneybadgerErrorBoundaryProps, HoneybadgerErrorBoundaryState } from './types'
 
 export default class HoneybadgerErrorBoundary extends Component<HoneybadgerErrorBoundaryProps, HoneybadgerErrorBoundaryState> {
 
@@ -26,7 +15,6 @@ export default class HoneybadgerErrorBoundary extends Component<HoneybadgerError
       info: null,
       errorOccurred: false
     }
-
   }
 
   public static getDerivedStateFromError(error: Error): HoneybadgerErrorBoundaryState {
@@ -42,7 +30,6 @@ export default class HoneybadgerErrorBoundary extends Component<HoneybadgerError
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    this.setState({ errorOccurred: true, error: error, info: errorInfo })
     this.props.honeybadger.notify(error, { context: errorInfo as never })
   }
 

packages/react/src/types.ts

@@ -0,0 +1,17 @@
+import { ComponentType, ElementType, ErrorInfo, PropsWithChildren, ReactNode } from 'react';
+import Honeybadger from '@honeybadger-io/js';
+
+export type DefaultErrorComponentProps = {
+    error: Error | null
+    info: ErrorInfo | null
+}
+
+export type HoneybadgerErrorBoundaryProps = PropsWithChildren<{
+    honeybadger: typeof Honeybadger
+    showUserFeedbackFormOnError?: boolean
+    ErrorComponent?: ReactNode | ComponentType | ElementType
+}>
+
+export type HoneybadgerErrorBoundaryState = {
+    errorOccurred: boolean
+} & DefaultErrorComponentProps;

packages/react/tsconfig.json

@@ -27,7 +27,8 @@
     "node_modules"
   ],
   "include": [
-    "./src/*.tsx"
+    "./src/*.tsx",
+    "./src/*.ts"
   ],
   "references": [
     {