> For the complete documentation index, see [llms.txt](https://asad-razvi.gitbook.io/javascript-cookbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://asad-razvi.gitbook.io/javascript-cookbook/react-recipes/how-can-i-handle-a-component-throwing-an-uncaught-exception.md).

# How can I handle a component throwing an uncaught exception?

```javascript
import { Component } from 'react'

import Logger from '../../helpers/Logger'

class ErrorBoundary extends Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
    this.logger = Logger.getInstance()
  }

  componentDidCatch(error, information) {
    try {
      this.setState({ hasError: true })
      this.logger.error('ErrorBoundary', { error, information }, 'Error')
    } catch (problem) {
      // Just incase the try block throws an exception!
    }
  }

  render() {
    const { children } = this.props
    const { hasError } = this.state
    if (hasError) {
      return null
    }
    return children
  }
}

export default ErrorBoundary
```

```javascript
const MyBadComponent = () => {
    throw new Error('naughty!')
}

const App = () => {
    return (
    <ErrorBoundary>
        <h1>Test Page</h1>
        <MyBadComponent />
    </ErrorBoundary>
    )
}
```