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.

Sign up for GitHub

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

Apply improvements to error handler page #43641

Merged
merged 1 commit into from
Oct 7, 2024
Merged

Apply improvements to error handler page #43641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 82 additions & 32 deletions core/runtime/src/main/java/io/quarkus/runtime/TemplateHtmlBuilder.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,33 +15,82 @@
public class TemplateHtmlBuilder {
private static String CSS = null;

private static final String SCRIPT_STACKTRACE_MANIPULATION = "<script>\n" +
" function toggleStackTraceOrder() {\n" +
" var stElement = document.getElementById('stacktrace');\n" +
" var current = stElement.getAttribute('data-current-setting');\n" +
" if (current == 'original-stacktrace') {\n" +
" var reverseOrder = document.getElementById('reversed-stacktrace');\n" +
" stElement.innerHTML = reverseOrder.innerHTML;\n" +
" stElement.setAttribute('data-current-setting', 'reversed-stacktrace');\n" +
" } else {\n" +
" var originalOrder = document.getElementById('original-stacktrace');\n" +
" stElement.innerHTML = originalOrder.innerHTML;\n" +
" stElement.setAttribute('data-current-setting', 'original-stacktrace');\n" +
" }\n" +
" return;\n" +
" }\n" +
" function showDefaultStackTraceOrder() {\n" +
" var reverseOrder = document.getElementById('reversed-stacktrace');\n" +
" var stElement = document.getElementById('stacktrace');\n" +
" if (reverseOrder == null || stElement == null) {\n" +
" return;\n" +
" }\n" +
" // default to reverse ordered stacktrace\n" +
" stElement.innerHTML = reverseOrder.innerHTML;\n" +
" stElement.setAttribute('data-current-setting', 'reversed-stacktrace');\n" +
" return;\n" +
" }\n" +
"</script>\n";
private static final String SCRIPT_STACKTRACE_MANIPULATION = """
<script>
function toggleStackTraceOrder() {
var stElement = document.getElementById('stacktrace');
var current = stElement.getAttribute('data-current-setting');
if (current == 'original-stacktrace') {
var reverseOrder = document.getElementById('reversed-stacktrace');
stElement.innerHTML = reverseOrder.innerHTML;
stElement.setAttribute('data-current-setting', 'reversed-stacktrace');
} else {
var originalOrder = document.getElementById('original-stacktrace');
stElement.innerHTML = originalOrder.innerHTML;
stElement.setAttribute('data-current-setting', 'original-stacktrace');
}
return;
}
function showDefaultStackTraceOrder() {
var reverseOrder = document.getElementById('reversed-stacktrace');
var stacktrace = document.getElementById('stacktrace');
if (reverseOrder == null || stacktrace == null) {
return;
}
stacktrace.innerHTML = reverseOrder.innerHTML;
stacktrace.setAttribute('data-current-setting', 'reversed-stacktrace');
initStacktraceStyles(stacktrace);
return;
}
function copyStacktrace() {
const stacktrace = document.getElementById("stacktrace");
const content = stacktrace.getElementsByTagName("code")[0];
navigator.clipboard.writeText(content.textContent);
}
function initStacktraceStyles() {
document.querySelector("#stacktrace code > pre").setAttribute("data-viewmode", "wrap");
stacktrace.querySelector("#stacktrace code").classList.add("wrap-code");
}
function changeViewMode() {
const code = document.querySelector("div#stacktrace code");
const pre = code.querySelector("pre");
const currentViewMode = pre.getAttribute("data-viewmode");
if (currentViewMode === "scroll") {
code.classList.remove("scroll-code");
pre.classList.add("wrap-code");
pre.setAttribute("data-viewmode", "wrap");
} else {
pre.classList.remove("wrap-code");
code.classList.add("scroll-code");
pre.setAttribute("data-viewmode", "scroll");
}
}
</script>
""";

private static final String UTILITIES = """
<div id="utilities-container">
<p class="clipboard tooltip" onclick="changeViewMode();">
<span class="tooltip-text">Change view mode</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#555555" d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM64 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L96 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
</p>
<p class="clipboard tooltip" onclick="copyStacktrace();">
<span class="tooltip-text">Copy stacktrace to clipboard</span>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path fill="#555555"
d="M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM112 192l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z" />
</svg>
</p>
</div>
""";

private static final String HTML_TEMPLATE_START_NO_STACK = "" +
"<!doctype html>\n" +
Expand All @@ -60,7 +109,7 @@ public class TemplateHtmlBuilder {
" <style>%3$s</style>\n" +
SCRIPT_STACKTRACE_MANIPULATION +
"</head>\n" +
"<body onload=\"showDefaultStackTraceOrder()\">\n" +
"<body onload=\"showDefaultStackTraceOrder();\">\n" +
"<div class=\"header\">\n" +
" <svg id=\"quarkus-logo-svg\" data-name=\"Quarkus Logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1280 195\">\n"
+
Expand Down Expand Up @@ -165,11 +214,11 @@ public class TemplateHtmlBuilder {

private static final String OPEN_IDE_LINK = "<div class='rel-stacktrace-item' onclick=\"event.preventDefault(); fetch('/q/open-in-ide/%s/%s/%d');\">";

private static final String ERROR_STACK = " <div id=\"original-stacktrace\" class=\"trace hidden\">\n" +
private static final String ORIGINAL_STACK_TRACE = " <div id=\"original-stacktrace\" class=\"trace hidden\">\n" +
"<h3>The stacktrace below is the original. " +
"<a href=\"\" onClick=\"toggleStackTraceOrder(); return false;\">See the stacktrace in reversed order</a> (root-cause first)</h4>"
"<a href=\"\" onClick=\"toggleStackTraceOrder(); return false;\">See the stacktrace in reversed order</a> (root-cause first)</h3>"
+
" <code class=\"stacktrace\"><pre>%1$s<pre></code>\n" +
" <code class=\"stacktrace\"><pre>%1$s</pre></code>\n" +
mcruzdev marked this conversation as resolved.
Show resolved Hide resolved
" </div>\n";

private static final String ERROR_STACK_REVERSED = " <div id=\"reversed-stacktrace\" class=\"trace hidden\">\n" +
Expand Down Expand Up @@ -308,7 +357,8 @@ public TemplateHtmlBuilder stack(final Throwable throwable, List<String> knowCla
rootFirst = rootFirst.replace(ERSTI, "</div>");
}

result.append(String.format(ERROR_STACK, original));
result.append(UTILITIES);
result.append(String.format(ORIGINAL_STACK_TRACE, original));
result.append(String.format(ERROR_STACK_REVERSED, rootFirst));
result.append(STACKTRACE_DISPLAY_DIV);

Expand Down
65 changes: 63 additions & 2 deletions core/runtime/src/main/resources/META-INF/template-html-builder.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading