How to inject custom markup into Tracy's error pages?

[bernhard]

Hey @adrian 

Today @netcarver requested to make RockFrontend's livereload work on tracy error pages - which is something that has been annoying for myself for a long time: https://github.com/baumrock/RockFrontend/issues/25

The problem is I've really tried hard to do so, but I can't find a way to modify the markup of the rendered page 😞 

LiveReload in RockFrontend works simply by having this markup on the page:

      <script>
      var LiveReloadUrl = '{$this->wire->config->urls->root}';
      var LiveReloadSecret = '$secret';
      console.log('Loading LiveReload');
      </script>
      <script src='$src'></script>

Any ideas how we can get this working?

I even tried using Debugger::$customBodyStr = "TEST"; and similar, but that doesn't seem to do anything at all, though I see you are using it in your module?

I'm totally lost here and hope you have a simple solution to finally get rid of these annoying manual reloads on error pages 🙂 

Thx in advance!

PS: This is actually the same request as this one just with different wording: https://processwire.com/talk/topic/29555-why-is-it-so-complicated-to-add-custom-panels/ I mentioned in that post that I got it working, but I can't find the working version any more of I just thought it was working but it actually didn't...

PPS: I'm talking about these pages:

 

[adrian]

Hey @bernhard - I'm not sure the best way to go about this, but you can modify the content of the Tracy bluescreen by either adding an action or a panel - examples here: https://github.com/nette/tracy/blob/1a1cfeb152bd0ccd78d5ce84fba9289094fcabd9/src/Bridges/Nette/Bridge.php#L26

I put together a very simple example of adding a panel with JS that gets executed when the bluescreen loads:

$blueScreen = \Tracy\Debugger::getBlueScreen();
$blueScreen->addPanel(function() {
    return ['tab' => 'RFE Panel', 'panel' => '<script>alert("Hello World")</script>'];
});

Perhaps you can use that (or the addAction) approach to inject the JS you need to get things working?

I think the problem with Debugger::$customBodyStr and Debugger::$customJsStr is that they need to be set before Debugger::enable() is called which you won't be able to do at the moment. Perhaps a new hookable method could be added to Tracy to support that though. 

Maybe the other approach is building a panel for Tracy that adds that live reload JS, but it seems like you really only need it added when the bluescreen is displayed, so the addAction or addPanel on the bluescreen might be best.

Hope that helps.

 

[bernhard]

Thx @adrian that's great and it works 😎😍🚀

@netcarver Check out the latest dev version! https://github.com/baumrock/RockFrontend/commit/876d421376dfbc3e026610d7dc06cc3362937602

[netcarver]

Works great, thank you both!