[wip] Improve error page

[klaussner]

This PR improves how the Meteor Tool handles server crashes and build failures:

• If an error occurs, clients automatically load the error page.
• No more Uncaught SyntaxError: Unexpected token < in JSON at position 1 in the console!
• Clients automatically reload the page after rebuilds.
• Code frames are displayed with colors instead of ANSI escape codes.
• The error page works better on mobile devices.

Video comparison of the current and the new version

Technical Details

The autoupdate package, which is responsible for notifying clients of changes, is used in both development and production. Therefore, it's part of the app and not the build tool. However, since the app server is terminated in case of a crash or build failure, autoupdate cannot be used to reload the error page (see the following diagram).

To solve this problem, the proxy opens an SSE endpoint (/__meteor__/build-events) that the app client and error page use to get notified of build events, which means that there are now two reload mechanisms: one for errors (via SSE) and one for regular rebuilds (via WebSocket/DDP). However, it might make sense to use SSE for regular rebuilds as well in the future.

Future Work

Apps that need autoupdate/hot-code-push only in development (some Apollo apps, for example) still have these packages and large dependencies (including socket-stream-client and ddp-client) in their production bundles. This results in up to 90 kB of unused code as well as an unused WebSocket for each client. I've already reduced the size of autoupdate in #10238 by removing the mongo dependency but that's still a lot of overhead.

However, I think it's possible to support both use cases in a backwards-compatible way. If autoupdate is included in the app, the Meteor Tool can use the current WebSocket/DDP-based reload for regular rebuilds. If the package is not included, it can let the proxy send a reload message to clients via SSE. That way, apps that use autoupdate work exactly as they do now, whereas more lightweight apps don't need any additional packages for development-only reloads.

[klaussner]

I couldn't think of another way to share code between the tool and the build-events package… 🤔

[klaussner]

Requires a new dev bundle.

[klaussner]

As I mentioned above, automatically reloading the error page requires a new communication channel (WebSocket or server-sent events) between build tool and client and I think it makes sense to move the existing reload mechanism to this new channel as well (otherwise, we would always need to open two channels). See this feature request for more details: meteor/meteor-feature-requests#354. Auto-reloading on the error page can implemented on top of that. 🙂