Context
enabel/layout-bundle shipped @EnabelLayout/error/base.html.twig which renders a centered error page (status_code big number, title, message, "back to homepage" button, status details in small print). Every project's templates/bundles/TwigBundle/Exception/error{,403,404}.html.twig extended it.
Now that the bundle is abandoned, each project re-implements its own. Observed in Impala (PR #2138) — templates/bundles/TwigBundle/Exception/_base.html.twig is a 20-line rewrite that just loads the theme CSS and renders the expected markup.
Important: the CSS is already shipped by the theme
@enabel/enabel-bootstrap-theme/dist/css/error.min.css (~1.4 KB) already styles .bg, #error, .error, .code-error, img.logo. So this component is not about reimplementing the CSS — it's about standardising the small bit of markup each project copies. Add it to the importmap:
symfony console importmap:require "@enabel/enabel-bootstrap-theme/dist/css/error.min.css"
Proposed API
final class ErrorPage
{
public int $statusCode;
public string $title;
public string $message;
public ?string $details = null; // optional small print (.error-detail)
public ?string $backUrl = null; // hides the button if null
public string $backLabel = 'Back to homepage';
public string $symbol = '/images/enabel-symbol.png'; // watermark
public string $logo = '/images/enabel-logo-email.png'; // bottom logo
}The component renders the full <!DOCTYPE html> page (it does not extend base.html.twig — error pages must work even if the asset pipeline is broken), loads the theme's error.min.css, and emits the markup the stylesheet expects.
Example usage
{# templates/bundles/TwigBundle/Exception/error404.html.twig #}
{{ component('Enabel:Ux:ErrorPage', {
statusCode: 404,
title: 'app.error.404.title'|trans,
message: 'app.error.404.message'|trans,
backUrl: path('app_home'),
backLabel: 'app.error.btn.backhome'|trans,
}) }}Reference implementation in Impala
<!DOCTYPE html>
<html lang="{{ app.request.locale }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ statusCode }} — {{ app_name|trans }}</title>
<link rel="stylesheet" href="{{ asset('vendor/@enabel/enabel-bootstrap-theme/dist/css/error.min.css') }}">
</head>
<body>
<div class="bg"><img src="{{ asset(symbol) }}" alt=""></div>
<div id="error">
<div class="error">
<div class="code-error"><h1>{{ statusCode }}</h1></div>
<h2>{{ title }}</h2>
<p>{{ message }}</p>
{% if backUrl %}<a href="{{ backUrl }}">{{ backLabel }}</a>{% endif %}
{% if details %}<small>{{ details }}</small>{% endif %}
<img class="logo" src="{{ asset(logo) }}" alt="Enabel">
</div>
</div>
</body>
</html>That's the entire component template. Probably a 30-minute PR including tests.
Context
enabel/layout-bundleshipped@EnabelLayout/error/base.html.twigwhich renders a centered error page (status_codebig number, title, message, "back to homepage" button, status details in small print). Every project'stemplates/bundles/TwigBundle/Exception/error{,403,404}.html.twigextended it.Now that the bundle is abandoned, each project re-implements its own. Observed in Impala (PR #2138) —
templates/bundles/TwigBundle/Exception/_base.html.twigis a 20-line rewrite that just loads the theme CSS and renders the expected markup.Important: the CSS is already shipped by the theme
@enabel/enabel-bootstrap-theme/dist/css/error.min.css(~1.4 KB) already styles.bg,#error,.error,.code-error,img.logo. So this component is not about reimplementing the CSS — it's about standardising the small bit of markup each project copies. Add it to the importmap:symfony console importmap:require "@enabel/enabel-bootstrap-theme/dist/css/error.min.css"Proposed API
The component renders the full
<!DOCTYPE html>page (it does not extendbase.html.twig— error pages must work even if the asset pipeline is broken), loads the theme'serror.min.css, and emits the markup the stylesheet expects.Example usage
Reference implementation in Impala
That's the entire component template. Probably a 30-minute PR including tests.