How the HTML Error Page is Rendered
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeWhen you use a browser, the format will be html
. That's also the default format if no request format was set and if the request doesn't contain an Accept
header. In the case of html
, the serializer will fail by throwing a NotEncodableValueException
. When that happens, this offloads the work to another error render: $this->fallbackErrorRenderer
.
If you dumped this object, you'd find out that it's an instance of TwigErrorRenderer
. Ok! Let's open that up: Shift + Shift TwigErrorRender.php
.
It... interesting! It immediately calls another fallbackErrorRenderer
. This one is an instance of HtmlErrorRender
. Open it up: HtmlErrorRenderer.php
.
Error Renderer Decoration
Then... stop. Let me explain why and how we have three different error renderer classes. This HtmlErrorRenderer
is the, sort of, "core" error renderer and it always exists. But if you have Twig installed, the TwigErrorRenderer
suddenly "takes over" the error rendering process. It does that via service decoration: TwigErrorRenderer
decorates HtmlErrorRenderer
.
And then... if you have the serializer component installed, suddenly there is a third error renderer added to the system: SerializerErrorRenderer
, which decorates TwigErrorRenderer
.
This is a slight over-simplification, but there is basically only ever one official "error renderer" service registered in the container. It's id
is error_renderer
. But through service decoration, multiple error renderers are ultimately used.
HtmlErrorRenderer: Default Exception & Error Templates
Let's look at the flow. TwigErrorRender
calls render()
on HtmlErrorRenderer
. Remember: the render()
method on all of these classes has the same job: to return a FlattenException
that contains the status code, headers and the "body" that will be used for the Response.
So, it's no surprise that this once again starts by creating a FlattenException
object. To get the "body" of the response, it calls $this->renderException()
. Jump to that.
This is what builds the error or exception page. The $debugTemplate
argument defaults to views/exception_full.html.php
. Yea, this method render PHP templates! This template will be used in debug
mode. If we're not in debug mode, then it "includes" - basically, renders - error.html.php
. So exception_full.html.php
in debug mode, error.html.php
on production. The include()
function is as simple as it gets.
Let's go see the debug template. Using the directory tree on top... click the error-handler/
directory, then navigate to open Resources/views/exception_full.html.php
This is what we're seeing in our browser right now. To prove it, in the middle, let's add:
I'm inside your exception page!
// ... lines 1 - 2 | |
<html lang="en"> | |
// ... lines 4 - 12 | |
<body> | |
// ... lines 14 - 35 | |
I'm inside your exception page! | |
// ... lines 37 - 41 | |
</body> | |
</html> | |
// ... lines 44 - 45 |
Back on the browser, refresh the 404 page. There's our text! Go... take that out.
So this template and error.html.php
are responsible for rendering the debug and production HTML error pages out-of-the-box.
Close exception_full.html.php
... and also HtmlErrorRenderer.php
.
TwigErrorRenderer: Twig Overrides
Back in TwigErrorRenderer
, this starts by getting the FlattenException
from HtmlErrorRenderer
. So then... if we already have the finished FlattenException
, what's the point of this class?
This entire class exists to give you - the application developer - the ability to override what the error template looks like. $this->findTemplate()
is used to check if you have a Twig override template. If you don't, the FlattenException
from HtmlErrorRenderer
is used. But if you do have an override template, it renders that and uses its HTML.
Twig Namespaces & Override Templates
Scroll down to the findTemplate()
method. Cool! It first looks for a template called @Twig/Exception/error%s.html.twig
, where the %s
part is the status code. The @Twig
thing is a Twig namespace. Every bundle in your app automatically has one. Want to render a template from FooBarBundle
? You could do that by saying @FooBar
then the path to the template from within that bundle.
This is normally used as a way for a bundle to render a template inside itself. But Symfony also registers an override path for every bundle namespace. When you say @Twig/Exception/error404.html.twig
, Twig first looks for the template at templates/bundles/TwigBundle/Exception/error404.html.twig
.
Anyways, if this template exists because you created it, it will be used. Otherwise, it looks for a generic error.html.twig
that handles all status codes. This is how the Twig error template overrides work.
And... phew! That's it! SerializerErrorRenderer
renders XML & JSON pages, or, really, anything format that the serializer supports. HtmlErrorRenderer
renders the HTML pages and TwigErrorRenderer
allows you to override that with carefully-placed Twig templates.
Finishing the Process
Close both of the error renderers. We now know that there are many ways to hook into the exception-handling process. You can override ErrorController
, listen to the kernel.exception
event, customize the ProblemNormalizer
for JSON or XML exceptions or add a Twig template override for custom HTML.
No matter what, ErrorListener
sets this Response
onto the ExceptionEvent
. In HttpKernel
, if the event has a response, there's a bit of final status code normalization, but it eventually passes the Response
to filterResponse()
. So yes, even an error page will trigger that event, which is why a 404 page has the web debug toolbar.
Ok team, we're now truly done walking through the HttpKernel process: both the happy and unhappy paths. Next, let's use our new knowledge... to start hacking into the system.
@Rayan, as not usual with your tutorials, this is so complicated!