Possible to dismiss the browser compile error and show the react errorboundary?

Question

I have an app where I want to implement reacts errorboundary:

import React, { Component } from 'react'
import ErrorView from './components/ErrorView'

class ErrorBoundary extends Component {
  state = {
    hasError: false,
  }

  static getDerivedStateFromError(error: any) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true }
  }
  componentDidCatch(error: any, info: any) {
    // Display fallback UI
    this.setState({ hasError: true })
    console.log('error', error)
    console.log('info', info)
    console.log('I have error')
    // You can also log the error to an error reporting service
    // logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <ErrorView />
    } else {
      return this.props.children
    }
  }
}

export default ErrorBoundary

I put my app inside of the Errorboundary:

ReactDOM.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>,
  document.getElementById('root')
)

Inside one of the children in the app component i have created a component that is trying to map an empty array. I do this in order to get an error and hopefully get to my errorview.

What happens: I get an error and the errorView gets displayed but just a second after I get the red box error saying:

TypeError: Cannot read property 'map' of undefined

This is in dev enviorment and frankly Im scared to put it in production before I can verify that only the erroview wil get shown,

is there a way to supress the rendering of the error in the browser? I still get the error in the console I just dont want it in the browser render.

Dennis Vash · Accepted Answer · 2021-05-04T14:04:34.640

It's ok, the error overlay is part of the development environment, you can close it and see your ErrorView.

After the production build, the overlay will be disabled and all errors will be directed to ErrorView.

For disabling the error-overlay refer to this question, you need to eject and disable webpackHotDevClient in the webpack config (which highly not recommended).

Or adding to your global CSS:

iframe {
    display: none;
}

If you wonder what Error Boundary actually does, check this question.

Possible to dismiss the browser compile error and show the react errorboundary?

1 Answers1