ActiveUI

ActiveUI

  • User Guide
  • Developer Documentation

›Guides

About

  • Introduction
  • Changelog

Getting Started

  • Step by Step
  • Development Environment
  • Artifacts
  • ActiveUI Application
  • Usage as an npm Dependency
  • Initialization
  • Project Architecture

Guides

  • Adding KaTex fonts
  • Adding Servers
  • Authentication
  • Bookmark favorites
  • Charts
  • Configuring Widget Handlers and Actions
  • Container
  • Custom UI components with Ant Design
  • Data manipulation
  • Debugging
  • Deployment
  • Internationalization
  • MDX Manipulation
  • Plugins
  • Reporting
  • Settings
  • Tabular View and Pivot Tables
  • Testing

Reference

  • API Reference
  • Default Widget Bookmarks
  • Plugins
  • Settings

Advanced

  • Content Server Setup
  • Experimental Features
  • Maven Integration
  • Offline Installation
  • Script-based Integration

Debugging

Development Vs. Production Mode

When trying to debug your application, understanding what is happening and reporting your issue to ActiveViam, it is important to run ActiveUI SDK in development mode. Otherwise, stack traces might be obfuscated: referring to minified code.

While developing, your build process should set the Node.js environment variable process.env.NODE_ENV to development, or more precisely, to something different from production. This is a shared convention across all Node.js packages. By building your application with process.env.NODE_ENV set to development, this will not only build your files but also each of your dependencies in development mode, including for example React.js and ActiveUI SDK.

This is all taken care of for you when using the ActiveUI Application. If you rely on another third party tool, make sure to look up their documentation on how to build the application in development mode.

Browser tips

Using Chrome

ActiveUI SDK development mode has been Tested against Chrome 71.0

Developer Tools

To open the Developer Tools, hit F12 or Ctrl+Shift+I on Windows/Linux or Cmd+Shift+I on macOS.

See Chrome DevTools Keyboard Shortcuts for more details.

Debug WebSockets

  1. Go to your application.
  2. Select the Network tab.
  3. Refresh the page or hit F5 or Ctrl+R on Windows/Linux or Cmd+R on macOS.
  4. Play with the UI to open the WebSocket and trigger new remote calls (for example: open a tabular view and add a column).
  5. Go back to the Network tab and filter/search for WebSocket. They should appear with a name of the following pattern vX where X is the version number of the WebSocket endpoint. Depending on your configuration, you might see one or more of the following WebSockets (see URL pattern below):
    • ActivePivot Server: ws://host:port/pivot/ws/vY
    • ActiveMonitor Server: ws://host:port/activemonitor/ws/vX
    • Content Server: ws://host:port/content/register/vX
  6. Select the desired WebSocket and select the Frames tab to see all the data transferred through WebSocket. By clicking on a specific frame, you can see the JSON details of what has been sent or received.

Using Firefox

ActiveUI SDK development mode has been Tested against Firefox 64.0

Developer Tools

To open the Developer Tools, hit F12 or Ctrl+Shift+I on Windows/Linux or Cmd+Shift+I on macOS.

See All keyboard shortcuts for more details.

Debug WebSockets

WebSocket Inspection is currently not supported. We recommend using Chrome for that.

Using Internet Explorer

ActiveUI SDK development mode has been Tested against Internet Explorer 11.0

Developer Tools

To open the Developer Tools, hit F12.

See Developer Tools Keyboard Shortcuts Reference for more details.

Debug WebSockets

We recommend using Chrome for that.

← Data manipulationDeployment →
  • Development Vs. Production Mode
  • Browser tips
    • Using Chrome
    • Using Firefox
    • Using Internet Explorer
Copyright © 2023 ActiveViam