React development error messages interfere with Ink output

When an error boundary’s getDerivedStateFromError handler is called, React will print out a warning to the console like so:

The above error occurred in the <Example> component:
    in Example
    in ErrorBoundary
    in App

React will try to recreate this component tree from scratch using the error boundary you provided.

Because of this log output, it means that when the error boundary component is rendered after the previous component, instead of overwriting it.

I put together a small example that hopefully explains this better:

// https://github.com/colinking/ink-testing/blob/master/src/error-boundaries.tsx
import React, { useState } from 'react'
import { render, Box, Color, useInput } from 'ink'

/**
 * See: https://github.com/vadimdemedes/ink/issues/234
 * 
 * Note: the output of this script depends on your terminal width. If you have enough space,
 * the ErrorBoundary (An error occurred: Whoops!) will overwrite the "React will try to..."
 * line entirely.
 * 
 * Output:
 *  Hit any key to crash!
 *  The above error occurred in the <Example> component:
 *      in Example
 *      in ErrorBoundary
 *      in App
 *  
 *  React will try to recreate this component tree from scratch using the error boundary you proAn error occurred: Whoops!
 * Expected:
 *  An error occurred: Whoops!
 */

interface ErrorBoundaryState {
  error?: Error
}

class ErrorBoundary extends React.Component<{}, ErrorBoundaryState> {
  state = {} as ErrorBoundaryState

  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
    return { error }
  }

  render() {
    const { error } = this.state

    if (!error) {
      return this.props.children
    }

    return (
      <Box>
        <Color>An error occurred: {error.message}</Color>
      </Box>
    )
  }
}

const Example: React.FC = () => {
  const [shouldError, setShouldError] = useState(false)
  useInput(() => {
    setShouldError(true)
  })

  if (shouldError) {
    throw new Error('Whoops!')
  }

  return (
    <Box>
      <Color green>Hit any key to crash!</Color>
    </Box>
  )
}

async function run() {
  const { waitUntilExit } = render((
    <ErrorBoundary>
      <Example />
    </ErrorBoundary>
  ), {
    debug: process.env.DEBUG === 'true',
  })
  await waitUntilExit()
}

run()

You can run this like so:

$ git checkout https://github.com/colinking/ink-testing.git
$ npm i
$ npx ts-node src/error-boundaries.tsx

[vadimdemedes]

The reason it happens is because that The above error occurred in the <Example> component: is automatically written to stdout by React, it’s not rendered as part of your Ink app. These warnings occur only when NODE_ENV is not set to production (similar to client-side apps).

So if you run your app with NODE_ENV=production, this message will go away:

$ NODE_ENV=production npx ts-node src/error-boundaries.tsx

[vadimdemedes]

@scalvert These are docs for Create React App, which I don’t think is relevant to React itself.

Try setting process.env.NODE_ENV before importing react.