HUD does not show up for react starter kit

[jasonyueyang]

HUD is not shown with this repo https://github.com/kriasoft/react-starter-kit.

[philliphoff]

I played around with this and I'm able to get the HUD to display using the alternative application entrypoint approach. The issue you ran into was likely due to Babel transpilation reordering the import of express before Glimpse initialization, and therefore the Express proxies weren't properly set up to inject the HUD into outgoing responses.

There is another issue, however, in that the injected script-tag attributes are not always properly encoded/decoded. For example, we inject { and } due to our use of URI Templates and these sometimes show up in the browser as %7b and %7d. Because the injected script is searching specifically for { and } in order to replace URI query parameters with their respective values (e.g. the metadata URI), those values are never replaced. This means that the Glimpse client can be launched from the HUD, but it then prompts for the metadata URI. (Accepting the default, however, does allow you to use the otherwise functional client.)

Looking around, it seems that while { and } may technically be allowed in HTML unescaped, it is considered "unwise" or "unsafe" as the characters may be modified as they traverse through other systems. We don't see this behavior in a "raw" Node.js server, so it may be related to the Starter Kit running the server through Webpack's hot-loading proxy and/or Browser sync. We may want to do the encoding ourself on the server side and see if we get more consistent decoding behavior on the client side.

[nikmd23]

It sounds like another issue should be opened @philliphoff

[philliphoff]

Opened #64 to track HUD generation of Client link.