Debug Application

Development vs Production mode #

When trying to debug the application, understanding what is happening and reporting your issue to ActiveViam, it is important to run ActiveUI in development mode. This will ensure that every stack trace will be NON obfuscated.

Using script integration #

If you are integrating ActiveUI through a script tag, make sure you are using the following 3 files:

• app.js
• vendor.js
• app.js.map

Using Node.js integration #

If you are integrating ActiveUI with Node.js, make sure you are setting the Node.js environment variable process.env.NODE_ENV to development, or more precisely, to something different than production. This is a shared convention across all Node.js dependencies. By building you application with such environment variable, this will not only build your files but also each of your dependencies in development mode, including for example React.js and ActiveUI.

If you rely on a third party framework, make sure to look up their documentation on how to build the application in development mode. For example using create-react-app, you have multiple scripts available, and npm start runs the development version while npm run build the production version.

Browser tips #

Using Chrome #

Developer Tools #

To open the Chrome Developer Tools, hit F12 or Ctrl + Shift + I on Windows or Cmd + Opt + I on Mac.

See Keyboard & UI Shortcuts Reference for more details.

Debug WebSocket #

1. Go to your application
2. Select the Network tab
3. Refresh the page or hit F5 or Ctrl + R on Windows or Cmd + R on Mac.
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 should might see one or multiple of the following websockets (see url pattern below):
   • WS related to the Content Server: ws://host:port/content/register/vX
   • WS related to the ActivePivot Server: ws://host:port/pivot/ws/vY
   • WS related to the ActiveMonitor Server have: ws://host:port/activemonitor/ws/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, one can see the JSON details of what has been sent or received.

Using Firefox #

Developer Tools #

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

See Keyboard Shortcuts for more details.

Debug WebSocket #

In order to debug WebSocket you must install a FireFox addon such as Firebug or WebSocket Monitor

Using Internet Explorer #

Developer Tools #

To open the Developer Tools, hit F12.

See Developer Tools Keyboard Shortcuts Reference for more details.

Debug WebSocket #

Unfortunately, it does not appear to be possible to debug WebSocket using Internet Explorer. We recommend to use Chrome.