How to customise Error Page ? about tracy

[mikerockett]

I'd like to bring this back to life. I think that, at the very least, it should be possible to override the stylesheet definition. As an alternative, perhaps we could work on the blue screen included in the package itself.

In my honest opinion, the blue screen could do with a minimal/modern facelift. The red is quite peircing to the eye (for me, anyway), and system native fonts would look great. The idea of multiple 'skins' could very well be overkill, and so my thinking is just to improve its appearance in such a way that it's more comfortable.

Here's a screenshot of a stylesheet I worked on today:

@dg, do you think this could be worked on?

[dg]

I added Tracy\Debugger::getBlueScreen()->userCssFile Tracy\Debugger::$customCssFile to allow to add custom CSS file.

[dg]

I've changed it yet to array $customCssFiles

[fprochazka]

@Sanjoy87 The error page that Tracy renders on fatal error or uncatched exception is only a last resort. Therefore it is as simple as possible and you cannot customize it.

You should do something similar to this

Tracy\Debugger::enable();

try {
    $myApplication->run();

} catch (\Exception $e) {
    if ( ! Tracy\Debugger::$productionMode) {
        throw $e;
    }

    Tracy\Debugger::log($e, 'error');
    $myApplication->renderErrorPage($e);
}

this should allow you to

• always log exceptions in production mode
• render your own custom pages
• in development mode the bluescreen will render immediately without the need to check logs

[hrach]

@fprochazka if I understood it correctly, @Sanjoy87 was talking about blue-screen.

[fprochazka]

Oh, in that case, there are bluescreen panels that you can use for adding information.

For example rendering of SQL that caused the exception, used like this:

Nette\Diagnostics\Debugger::getBlueScreen()
    ->addPanel('Nette\Bridges\DatabaseTracy\ConnectionPanel::renderException');

But there is no way to customize bluescreen design at this point.

[JanTvrdik]

@Sanjoy87 This is how Nette Framework customizes Tracy for itself: https://github.com/dg/nette/blob/506b1e6e3470f31caa1e923528bcd1750e18b392/Nette/Bridges/Framework/TracyBridge.php

[sanjoydesk]

Thanks @fprochazka @hrach @JanTvrdik all of you for quick response. Tracy is really awesome project so far.

I can see we can do some small changes with blue screen object. Tracy is standalone component. In this case it should be more flexible to customize (Development mode) according to the project though it has various features in it.

No idea how much my comments are valid for this project but i found few features can be added.

For example -

In the right side bottom of the exception page it shows _"Tracy - Nette Framework"_. So if tracy integrated with any other framework or project then it should not display "Nette Framework".

Using blue screen object allow us to add panel to the exception page, but panel displays two times, first one top as top panel next one after Call Stack, what if developer require only the first panel ?
If we add html tag to first panel title it simply displaying it into the browser.

 $blueScreen->addPanel(function($e) {
     return array(
     'tab' => '<h1>My Framework </h1> ', // instead of My Framework
     'panel' => '<h1> <span style="color:blue">My Framework </span> </h1>'// Works
     );
 });

It will be really great if you please add feature to customise template with external stylesheet.

Why it is requiring all files inside tracy.php[https://github.com/nette/tracy/blob/master/src/tracy.php]? Since tracy is composer powered, everything can be autoloaded right. So that it will look much better.

Hope it helps.

Thanks

[JanTvrdik]

it shows "Tracy - Nette Framework".

You mean the tiny text in Tracy logo? That's unlikely to change.

what if developer require only the first panel?

That's that the parameter $e is for. You should return the array only if $e is NULL.

If we add html tag to first panel title it simply displaying it into the browser.

And that's OK. It's a panel title, it should not contain any HTML tags.

Why it is requiring all files inside tracy.php

Because Tracy is usable without Composer as well. If you use Composer, you'll never need to load this file.

[sanjoydesk]

Yes it make sense. thanks @JanTvrdik .

You mean the tiny text in Tracy logo? That's unlikely to change.

Cygnite Framerwork is under MIT license, hope it is not a problem to integrate Tracy with. It seems we need to code a bit to fit Tracy with our color schema.

You can see Laravel Framework uses Whoops Error handler which is similar to Tracy but Laravel does theme changes with external stylesheet and template customization.

We can add same feature into Tracy to make it much more flexible.

Is there any discussion chat room for Tracy, if possible let me know if we can chat, to know much more about it.

Thanks for your response. Great work!

[mishak87]

I could understand if you needed dark version but rebranding it is just silly. Getting rid of obsessions about tools visual style is more helpful then creating one. Tracy has quite polished appearance. And as a tool for debugging hers purpose is not to look colourful.

Maybe it would be useful to have interface for main framework and its version instead of constant Nette Framework. But that is something for @dg to decide. For now you can show it by adding BarPanel.

[dg]

To allow to create skins for Tracy is not a bad idea.

[rostenkowski]

All included in the exception-...-log.html files?

[sanjoydesk]

You may also see the reference screen for Cygnite Framework. Tracy is default debugger of Cygnite and the color combination you are proposing is almost looking similar. :) Thanks !!

…

Sent from my iPhone On 08-Oct-2017, at 10:40 PM, Mike Rockétt <[email protected]<mailto:[email protected]>> wrote: I'd like to bring this back to life. I think that, at the very least, it should be possible to override the stylesheet definition. As an alternative, perhaps we could work on the blue screen included in the package itself. In my honest opinion, the blue screen could do with a minimal/modern facelift. The red is quite peircing to the eye (for me, anyway), and system native fonts would look great. The idea of multiple 'skins' could very well be overkill, and so my thinking is just to improve its appearance in such a way that it's more comfortable.= Here's a screenshot of a stylesheet I worked on today: [pw_tracy_1]<https://user-images.githubusercontent.com/4586280/31319033-33ace05c-ac5c-11e7-8359-54859a2c4783.jpeg> @dg<https://github.com/dg>, do you think this could be worked on? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#27 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABqebbJhc8syHt0YE-4L_ew2nsooVjqQks5sqQHfgaJpZM4BuYu4>.

[adrianbj]

I added Tracy\Debugger::getBlueScreen()->userCssFile to allow to add custom CSS file.

Thanks @dg this will be great!

Do you have any thoughts about adding similar options for the other css files as well?

bar.css
toggle.css
dumper.css

Currently I am overriding a lot of things in bar.css which mostly works great, but it's a bit hacky when it comes to loading my replacement css file when on the bluescreen page.

[dg]

@mikerockett the red "bluescreen" is a distinguishing mark of Tracy and to change it would cause a negative reaction, which I really do not want.

(Btw, red was much more aggresive years ago :-) https://phpfashion.com/images/exception-ndebug.gif

It's possible to change the font to a system one, but I think nobody even noticed it, which makes me feel it is unnecessary.

[dg]

@adrianbj So it would be better Tracy\Debugger::$userCssFile that will be loaded after BlueScreen's & Bar's default CSS files?

[adrianbj]

So it would be better Tracy\Debugger::$userCssFile that will be loaded after BlueScreen's & Bar's CSS files?

Yes, this might be better - overriding, rather than replacing means that even if you add more DOM elements and related CSS rules to Tracy in the future, we don't need to worry about keeping our custom user css files up to date.

Caveat - CSS is not my favorite thing in the world, so maybe there is an even better approach?

[dg]

Ok, I repushed it.

[mikerockett]

@dg Thank you, this is awesome. I can agree with the red and how folks are used to it - I get that it could cause a negative reaction. That said, I think it's 'old-school', and not so friendly on the eyes (mine, anyway). Nonetheless, this makes it super-easy to fix. 👍

[adrianbj]

Ok, I repushed it.

Thank you @dg - that is working really nicely :)