-
- An Error Occurred
-
-
- {JSON.stringify(this.props.error, null, 2)}
-
-
- {this.props.info ? JSON.stringify(this.props.info, null, 2) : ''}
-
+function DefaultErrorComponent({ error, info }: DefaultErrorComponentProps) {
+ return (
+
+
+ An Error Occurred
- )
- }
+
+ {JSON.stringify(error, null, 2)}
+
+
+ {info ? JSON.stringify(info, null, 2) : ''}
+
+
+ )
}
+
+export default DefaultErrorComponent;
diff --git a/packages/react/src/HoneybadgerErrorBoundary.tsx b/packages/react/src/HoneybadgerErrorBoundary.tsx
index 47e6f8797..341357074 100644
--- a/packages/react/src/HoneybadgerErrorBoundary.tsx
+++ b/packages/react/src/HoneybadgerErrorBoundary.tsx
@@ -1,28 +1,9 @@
-import React, { Component, ComponentType, ElementType, ReactNode } from 'react'
-import Honeybadger from '@honeybadger-io/js'
-import DefaultErrorComponent, { DefaultErrorComponentProps } from './DefaultErrorComponent'
-import PropTypes from 'prop-types';
-
-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
{
- static propTypes = {
- honeybadger: PropTypes.object.isRequired,
- showUserFeedbackFormOnError: PropTypes.bool,
- children: PropTypes.element,
- ErrorComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
- }
-
static defaultProps = {
showUserFeedbackFormOnError: false
}
@@ -34,6 +15,13 @@ export default class HoneybadgerErrorBoundary extends Component {
if (!error && this.props.showUserFeedbackFormOnError) {
this.props.honeybadger.showUserFeedbackForm()
@@ -41,12 +29,7 @@ export default class HoneybadgerErrorBoundary extends Component {
})
it('should render the default component when there are no errors', () => {
- const testRenderer = TestRenderer.create()
- const testInstance = testRenderer.root
- expect(testInstance.findByType(Clean)).toBeDefined()
+ render()
+ expect(screen.getByRole('heading')).toHaveTextContent('Welcome! This works')
})
it("should invoke Honeybadger's notify when a component errors", (done) => {
sandbox.spy(honeybadger, 'notify')
- TestRenderer.create()
+ render()
afterNotify(done, function () {
assert.calledOnce(honeybadger.notify as SinonSpy)
})
@@ -69,9 +69,8 @@ describe('HoneybadgerReact', () => {
describe('when no custom error component is available', () => {
it('should render a default error message when a component errors', () => {
- const testRenderer = TestRenderer.create()
- const testInstance = testRenderer.root
- expect(testInstance.findByProps({ className: 'error' })).toBeDefined()
+ render()
+ expect(screen.findByText('An error occurred')).toBeDefined()
})
})
@@ -83,12 +82,12 @@ describe('HoneybadgerReact', () => {
const MyErrComponent = () => <>custom error
const MyErrComponentMock = jest.fn(MyErrComponent) as jest.MockedFunction
- TestRenderer.create()
+ render()
expect(MyErrComponentMock).toBeCalledWith({
error: expect.any(Error),
info: { componentStack: expect.any(String) },
errorOccurred: expect.any(Boolean)
- }, {})
+ }, undefined)
// Still want to ensure notify is only called once. The MyError component will be created twice by React.
afterNotify(done, function () {
assert.calledOnce(honeybadger.notify as SinonSpy)
@@ -105,12 +104,12 @@ describe('HoneybadgerReact', () => {
const MyErrComponent = () => <>custom error
const MyErrComponentMock = jest.fn(MyErrComponent) as jest.MockedFunction
- TestRenderer.create()
+ render()
expect(MyErrComponentMock).toBeCalledWith({
error: expect.any(Error),
- info: { componentStack: expect.any(String) },
+ info: null,
errorOccurred: expect.any(Boolean)
- }, {})
+ }, undefined)
// Still want to ensure notify is only called once. The MyError component will be created twice by React.
afterNotify(done, function () {
assert.calledOnce(honeybadger.notify as SinonSpy)
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
new file mode 100644
index 000000000..b335e03f2
--- /dev/null
+++ b/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;
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 857acfec7..104527758 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -27,7 +27,8 @@
"node_modules"
],
"include": [
- "./src/*.tsx"
+ "./src/*.tsx",
+ "./src/*.ts"
],
"references": [
{