Basic version of an error overlay.

[cpojer]

This is a basic version of an error overlay for Metro's HMR server. It's based on create-react-app's react-error-overlay. I know that weeks of work went into making that overlay solid. It's implementation is sound (an iframe with the highest z-index served by a single file bundle that includes React) and battle tested inside of create-react-app.

The behavior is incomplete but should kick this effort off the ground:

• When changing a file and introducing a syntax error, it will show an error overlay, clear the console and print the error there as well.
• When changing a file and the syntax error remains, it will clear the console and update the error message.
• When fixing the error, the overlay will go away and the console will be clear.
• When changing a file without syntax errors, everything keeps working.
• When changing a file with a syntax error and reloading, nothing works yet (see below).

In the sample app, this is incredibly fast:

Next steps:

• Bring this to FB; it's probably best to make a compose-able metro-web package with a basic set of features that we need (I'm working on this now).
• Turn the HmrServer and HmrClient into a general MetroServer and MetroClient so that we can communicate hmr updates, errors as well as delta updates (cc @davidaurelio) over web sockets.
• Make this also work for initial loads when a user bundle doesn't compile on the initial load. From my perspective the best option would be to:
  • Load the metro-web client as a separate bundle from Metro, this should never fail compilation
  • Every user bundle that is generated should generate a piece of code like MetroClient.listen('path/to/bundle'). This is convenient because we can make sure to listen to many bundles at the same time as well as we don't need to make the URL/entry points configurable from within user code.
• Include the code frame in the error message so that it's actually useful.
• Polish (open in editor, …).

@rafeca what do you think about these next steps?

[rafeca]

That's awesome! I love it! 💯

Completely agree with the next steps, one question though:

Load the metro-web client as a separate bundle from Metro, this should never fail compilation

Is this to reuse the same WebSocket connection between the different bundles? I think I'd prefer to not require users to include one additional script tag, and just embed the client inside the bundle (in the case of multiple bundles per page, the HmrClient could detect if there's already another client and fallback to it (or even better, bundle splitting 😄 )

[cpojer]

Oh I didn't see this! If we make the user require it, if their app has an issue with the compilation, we won't be able to hook in the error handler. However, we could spit out the bundle for metro-web in case the main bundle errors out.