Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to customise Error Page ? #27

Closed
sanjoydesk opened this issue Mar 31, 2014 · 21 comments
Closed

How to customise Error Page ? #27

sanjoydesk opened this issue Mar 31, 2014 · 21 comments

Comments

@sanjoydesk
Copy link

@sanjoydesk sanjoydesk commented Mar 31, 2014

Hi,
I seems tracy has all cool features as I am looking for, but i would like to know how can I customise error template page, I am trying to integrate with my latest project Cygnite Framework , I would like to display few information about Cygnite Framework in the Error page.

Is it possible i can overwrite the error page, change design, color schema, project name and version etc.

Any response would be highly appreciated.

Thanks,
Sanjoy

@fprochazka

This comment has been minimized.

Copy link
Contributor

@fprochazka fprochazka commented Mar 31, 2014

@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

This comment has been minimized.

Copy link
Contributor

@hrach hrach commented Mar 31, 2014

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

@fprochazka

This comment has been minimized.

Copy link
Contributor

@fprochazka fprochazka commented Mar 31, 2014

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

This comment has been minimized.

Copy link
Contributor

@JanTvrdik JanTvrdik commented Mar 31, 2014

@sanjoydesk

This comment has been minimized.

Copy link
Author

@sanjoydesk sanjoydesk commented Apr 2, 2014

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

This comment has been minimized.

Copy link
Contributor

@JanTvrdik JanTvrdik commented Apr 2, 2014

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

This comment has been minimized.

Copy link
Author

@sanjoydesk sanjoydesk commented Apr 2, 2014

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

This comment has been minimized.

Copy link
Contributor

@mishak87 mishak87 commented Apr 2, 2014

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

This comment has been minimized.

Copy link
Member

@dg dg commented Apr 2, 2014

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

@rostenkowski

This comment has been minimized.

Copy link

@rostenkowski rostenkowski commented Apr 3, 2014

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

@dg dg closed this Jan 31, 2015
@mikerockett

This comment has been minimized.

Copy link

@mikerockett mikerockett commented Oct 8, 2017

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

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

@sanjoydesk

This comment has been minimized.

Copy link
Author

@sanjoydesk sanjoydesk commented Oct 9, 2017

@dg

This comment has been minimized.

Copy link
Member

@dg dg commented Oct 9, 2017

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

@adrianbj

This comment has been minimized.

Copy link
Contributor

@adrianbj adrianbj commented Oct 9, 2017

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

This comment has been minimized.

Copy link
Member

@dg dg commented Oct 9, 2017

@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

This comment has been minimized.

Copy link
Member

@dg dg commented Oct 9, 2017

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

@adrianbj

This comment has been minimized.

Copy link
Contributor

@adrianbj adrianbj commented Oct 9, 2017

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 added a commit that referenced this issue Oct 9, 2017
@dg

This comment has been minimized.

Copy link
Member

@dg dg commented Oct 9, 2017

Ok, I repushed it.

@mikerockett

This comment has been minimized.

Copy link

@mikerockett mikerockett commented Oct 9, 2017

@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

This comment has been minimized.

Copy link
Contributor

@adrianbj adrianbj commented Oct 9, 2017

Ok, I repushed it.

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

dg added a commit that referenced this issue Oct 9, 2017
@dg

This comment has been minimized.

Copy link
Member

@dg dg commented Oct 9, 2017

I've changed it yet to array $customCssFiles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.