**What is the current behavior?**

TypeError: Do not know how to serialize a BigInt which makes it so the react dev tools cannot inspect the component props.

Steps to reproduce

1. Set a component prop to some value of type `BigInt`.
2. Open Chrome DevTools, then React Components view, try inspecting the component
3. There will be an exception [here](https://github.com/facebook/react/blob/b438699d3620bff236282b049204e1221b3689e9/packages/react-devtools-extensions/src/contentScript.js#L28-L38) (with the message above)

You can repro this with the following https://codesandbox.io/s/mystifying-cache-jshv3

Note that you need to repo via Chrome DevTools so that the bridge is active, if you use the codesandbox built-in DevTools the behavior is different.

**What is the expected behavior?**

That bigints are handled in a similar way to how symbols are handled. So that they don't crash when they cross a boundary, i.e. postMessage.

**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**

Latest version, hasn't worked before. That I know. Tested in Chrome and Firefox, although the behavior isn't exactly the same in Firefox as in Chrome, it doesn't appear to work in Firefox either.

I would like to propose a fix for this but I cannot find where in the source this would go. I don't care for editing capabilities and such, I just don't want the dev tools to give up on my just because I have BigInts in my code.

if (type === 'iterator' || type === 'typed_array') {
    dehydrated.readonly = true;
  }
  return dehydrated;
}
/**
 * Strip out complex data (instances, functions, and data nested > LEVEL_THRESHOLD levels deep).
 * The paths of the stripped out objects are appended to the `cleaned` list.
 * On the other side of the barrier, the cleaned list is used to "re-hydrate" the cleaned representation into
 * an object with symbols as attributes, so that a sanitized object can be distinguished from a normal object.
 *
 * Input: {"some": {"attr": fn()}, "other": AnInstance}
 * Output: {
 *   "some": {
 *     "attr": {"name": the fn.name, type: "function"}
 *   },
 *   "other": {
 *     "name": "AnInstance",
 *     "type": "object",
 *   },
 * }
 * and cleaned = [["some", "attr"], ["other"]]
 */
export function dehydrate(
  data: Object,
  cleaned: Array<Array<string | number>>,
  unserializable: Array<Array<string | number>>,
  path: Array<string | number>,
  isPathWhitelisted: (path: Array<string | number>) => boolean,
  level?: number = 0,