Error in question:
> Uncaught Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

The current error gives no indication which part of the code causes the error, making it very hard to debug. 

Two suggestions / questions:

**Indicate which suspense boundary**
Is there any way to indicate _which_ suspense boundary received an update? Showing the component tree like in other errors would be a very helpful first step. 

**Indicate which update**
Even better of course would be if there could be any indication which update was triggered, with a call stack. 




DEV mode, we create a separate object for Context.Consumer that acts
   like a proxy to Context. This proxy object adds unnecessary code in PROD
   so we use the old behaviour (Context.Consumer references Context) to
   reduce size and overhead. The separate object references context via
   a property called "_context", which also gives us the ability to check
   in DEV mode if this property exists or not and warn if it does not.
  if (__DEV__) {
    if ((context: any)._context === undefined) {
       T
       O
       W
      if (context !== context.Consumer) {
        if (!hasWarnedAboutUsingContextAsConsumer) {
          hasWarnedAboutUsingContextAsConsumer = true;
          console.error(
            'Rendering <Context> directly is not supported and will be removed in ' +
              'a future major release. Did you mean to render <Context.Consumer> instead?',
          );
        }
      }
    } else {
      context = (context: any)._context;
    }
  }
  const newProps = workInProgress.pendingProps;
  const render = newProps.children;
  if (__DEV__) {
    if (typeof render !== 'function') {
      console.error(
        'A context consumer was rendered with multiple children, or a child ' +