Directory

LoggingComponents

Vaadin addon providing components to display application logs in the front-end.

View larger

Close

Display your application logs in a TextArea or LoggingPanel in the front-end of your app.

NOTE: This addon is experimental at this point and works only with Log4J.

Implementation

1. Pick a component, LoggingPanel or LoggingArea;
2. Construct the component and add it to your layout;
3. Edit your Log4j2.xml configuration file: Make sure to update the packages attribute and create your custom appenders and loggers like in the example provided.

Sample code

VerticalLayout layout = new VerticalLayout();
        Button btnTestLog = new Button("TEST LOG");
        btnTestLog.addClickListener(l -> {
            LOGGER.debug("Test log output...");
            LOGGER.warn("Test log output...");
            LOGGER.error("Test log output...");
            LOGGER.info("Test log output...");
            LOGGER.fatal("Test log output...");
        });
        LoggingPanel loggingPanel = new LoggingPanel("Log output");
        loggingPanel.setHeight(250, Unit.PIXELS);
        LoggingArea loggingArea = new LoggingArea("Log output");
        loggingArea.setSizeFull();
        layout.addComponents(btnTestLog, loggingPanel);
        layout.addComponentsAndExpand(loggingArea);

.log {
    .info {
      color: greenyellow;
      white-space: normal;
    }

    .debug {
      color: teal;
      white-space: normal;
    }

    .warn {
      color: yellow;
      white-space: normal;
    }

    .error {
      color: red;
      white-space: normal;
    }

    .fatal {
      color: red;
      white-space: normal;
    }
  }

<?xml version="1.0" encoding="UTF-8"?>
<Configuration status="INFO" packages="be.thibaulthelsmoortel.loggingcomponents.appenders">
    <Appenders>
        <!-- For layouts refer to: https://logging.apache.org/log4j/2.x/manual/layouts.html -->
        <Console name="Console" target="SYSTEM_OUT">
            <PatternLayout
                    pattern="%highlight{%d{HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n}{FATAL=red, ERROR=red, WARN=yellow, INFO=green, DEBUG=cyan, TRACE=black}"/>
        </Console>
        <File name="AllLogs" fileName="all.log" immediateFlush="false" append="false">
            <PatternLayout pattern="%d{yyy-MM-dd HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n"/>
        </File>
        <LoggingPanelAppender name="loggingpanel-log" maxLines="0">
            <PatternLayout>
                <pattern>%d{HH:mm:ss.SSS} [%t] %-5level %logger{-3} - %msg%n</pattern>
            </PatternLayout>
        </LoggingPanelAppender>
        <TextAreaAppender name="textarea-log" maxLines="0">
            <PatternLayout>
                <pattern>%d{HH:mm:ss.SSS} [%t] %-5level %logger{-3} - %msg%n</pattern>
            </PatternLayout>
        </TextAreaAppender>
    </Appenders>
    <Loggers>
        <Root level="debug">
            <AppenderRef ref="Console"/>
            <AppenderRef ref="AllLogs"/>
            <appender-ref ref="loggingpanel-log"/>
            <appender-ref ref="textarea-log"/>
        </Root>
        <logger name="production" level="all" additivity="true">
            <appender-ref ref="loggingpanel-log"/>
            <appender-ref ref="textarea-log"/>
        </logger>
    </Loggers>
</Configuration>

Links

• Author Homepage
• Issue Tracker
• Source Code

Compatibility