Highlight Java Stack Traces With javaStack.js

The javaStack.js JavaScript library provides a simple way to highlight Java stack traces within your web projects.  Ideal for improving the readability and visual presentation of Java stack traces on your websites.

It parses the stack trace, wraps key elements like method names, file names, and line numbers with specific class names, and outputs ready-to-style HTML. You can then style these classes to customize the appearance of stack traces on your web pages.

Here’s a sample stack trace before and after styling:

Before:

<pre class="stacktrace">java.lang.Exception: Stack trace
at java.base/java.lang.Thread.dumpStack(Thread.java:1383)
at com.ericgoebelbecker.stacktraces.StackTrace.d(StackTrace.java:23)
at com.ericgoebelbecker.stacktraces.StackTrace.c(StackTrace.java:19)
at com.ericgoebelbecker.stacktraces.StackTrace.b(StackTrace.java:15)
at com.ericgoebelbecker.stacktraces.StackTrace.a(StackTrace.java:11)
at com.ericgoebelbecker.stacktraces.StackTrace.main(StackTrace.java:7)</pre>

After:

<pre class="stacktrace"><span class="st-exception">java.lang.Exception</span>: Stack trace
at <span class="st-methodName">java.base/java.lang.Thread.dumpStack</span>(<span class="st-fileName">Thread.java</span>:<span class="st-lineNumber">1383</span>)
at <span class="st-methodName">com.ericgoebelbecker.stacktraces.StackTrace.d</span>(<span class="st-fileName">StackTrace.java</span>:<span class="st-lineNumber">23</span>)
at <span class="st-methodName">com.ericgoebelbecker.stacktraces.StackTrace.c</span>(<span class="st-fileName">StackTrace.java</span>:<span class="st-lineNumber">19</span>)
at <span class="st-methodName">com.ericgoebelbecker.stacktraces.StackTrace.b</span>(<span class="st-fileName">StackTrace.java</span>:<span class="st-lineNumber">15</span>)
at <span class="st-methodName">com.ericgoebelbecker.stacktraces.StackTrace.a</span>(<span class="st-fileName">StackTrace.java</span>:<span class="st-lineNumber">11</span>)
at <span class="st-methodName">com.ericgoebelbecker.stacktraces.StackTrace.main</span>(<span class="st-fileName">StackTrace.java</span>:<span class="st-lineNumber">7</span>)</pre>

How to use it:

1. Add the javaStack.js script to your HTML page:

<script src="javaStack.js"></script>

2. Call the javaStack function and target the element containing the stack trace:

<pre class="stacktrace">java.lang.Exception: Stack trace
at java.base/java.lang.Thread.dumpStack(Thread.java:1383)
at com.ericgoebelbecker.stacktraces.StackTrace.d(StackTrace.java:23)
at com.ericgoebelbecker.stacktraces.StackTrace.c(StackTrace.java:19)
at com.ericgoebelbecker.stacktraces.StackTrace.b(StackTrace.java:15)
at com.ericgoebelbecker.stacktraces.StackTrace.a(StackTrace.java:11)
at com.ericgoebelbecker.stacktraces.StackTrace.main(StackTrace.java:7)</pre>

javaStack('.stacktrace');

3. Add CSS rules to style the highlighted elements.

.st-methodName {color: #70c9ba;font-weight: bolder;}
.st-lineNumber {color: #ff4f68;}
.st-fileName {color: #85dbff;}
.st-intro {color: #0044dd;}
.st-exception {color: #e40000;}

4. If you’d like to override the default classes, you can do so by specifying your own class names in the initialization. For example:

javaStack('.stacktrace', {
  method: 'my-st-methodName',
  file: 'my-st-fileName',
  line: 'my-st-lineNumber',
  exception: 'my-st-exception',
});

5. Determine whether to adds extra newline characters after each “at” to enhance readability. Default: true.

javaStack('.stacktrace', {
  prettyprint: true,
});

How it works:

javaStack.js works by processing the text content of a given element.

It uses regular expressions to identify and parse different parts of each line of the stack trace.

Lines starting with an exception type are wrapped with a span and the configured exception class.

Lines matching the ‘at’ pattern are parsed to extract the method name, file name, and line number.

These extracted components are then wrapped with spans and the corresponding configured classes.

The library escapes HTML characters to prevent XSS vulnerabilities. Finally, the modified HTML is injected back into the original element.

A pretty-print option adds extra newline characters after each “at” to enhance readability.