Logs Viewer

Embedding the Logs Viewer

The logs viewer component is one of the parts of the Extend Editor. It provides an easy way to add a real-time logs viewer to your application. In order to use it, you must first add the script tag (<script src="https://cdn.auth0.com/auth0-extend/components/1/extend-editor-logs.js"></script>) and then the editor’s CSS file (<link rel="stylesheet" href="https://cdn.auth0.com/webtask-editor/styles/1/wt-editor.min.css">). Next, you create an empty div element to render the logs and create an instance of the viewer using the ExtendEditorLogsComponent object. The following script shows an example.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.auth0.com/webtask-editor/styles/1/wt-editor.min.css">
  <script src="https://cdn.auth0.com/auth0-extend/components/1/extend-editor-logs.js"></script>
</head>
<body>
  <div id="logs-viewer" style="height: 100%;">
  <script>
    ExtendEditorLogsComponent.show(document.getElementById('logs-viewer'), {
      token: '{webtask_token}',
      hostUrl: 'https://sandbox.auth0-extend.com'
      theme: 'dark'
    });
  </script>
</body>
</html>

The minimal configuration above will display the real-time logs viewer using all the default options:

Logs viewer

Configuration Options

Option Description
token The webtask token the Logs viewer will use to authorize calls to Extend management APIs. This token is specific to the selected isolation scope. In the most common case it is a tenant webtask token.
webtaskContainer Specifies what container to connect to and monitor logs.
hostUrl Copied from your settings page at https://goextend.io/try.
theme The enumeration that allows you to customize the look & feel of the Logs viewer. We provide two themes to choose from out of the box: light and dark. The default theme is light.
height The height of the component.
filter Determines how the logs viewer will filter the incoming log events. The value is a regular expression where any matching string will not be shown. Example: ^(new|finished).
onClose This event will be called once the user closes the logs viewer.
onError This event will be called if an error occurred with the connection between the logs viewer and the logs API.