Troubleshooting Web Applications with the JavaScript Console
Posted by , Last modified by Aly Essa on 04 August 2016 12:09 PM

Overview

If you run into issues while using a FileCatalyst Web Application (such as Workflow, Central, and TransferAgent) or certain Unlimi-Tech transfer applets, there are two important reasons for knowing how to view and understand the JavaScript console:

  1. The support team may ask for additional information, such as the errors being reported.
  2. To spot any errors you may have introduced in a configuration file.

 

Environment

FileCatalyst Workflow v4.9.4 and later.

FileCatalyst TransferAgent Deployment Package v3.5 and later.

FileCatalyst Central v3.5 and later.

 

Resolution

Opening the console:

  1. Google Chrome
    1. Click the Menu icon.
    2. Cursor down to the More Tools fly-out menu.
    3. Open Developer Tools.
    4. On the top menu bar in the Developer Tools Window, click on Console.

  2. Firefox
    1. Click the Menu icon.
    2. Select Developer.
    3. Open the Web Console.

  3. Safari
    1. The Open the Tools from Safari, they must first be enabled:
      1. Open Safari Preferences.
      2. Switch to the Advanced Pane.
      3. Check the Show Develop Menu in Menu Bar check box.

    2. After the step above, the Web Inspector will be available. You can add it to the menu bar with Customize Menu Bar, which will create a quick-access icon. Or you can fire it up the longer way:
      1. Select Develop from the main menu.
      2. Click on Show Error Console.

  4. Internet Explorer 9 and later:
    1. Open the Tools menu, in compact view, this looks like a gear cog.
    2. Select F12 Developer Tools.
    3. Switch from the DOM Inspector to the JavaScript console by clicking the Console.

Catching errors:

  • If there are errors in the JavaScript, they should be prominently visible in the JavaScript console. Once it is opened, you may clear it to start with a fresh view, and then refresh the page and step through your failure scenario. At the point of failure, if it is a JavaScript issue, you will see an error reported, generally with red text to emphasize the fact that it is an error.
  • Errors come with text that is meant to be as meaningful as possible, and an additional link is supplied which will take you to the source of the error. For example:

    Uncaught ReferenceError:   someFunction is not defined    main.js line 1566

  • The application is trying to use a piece of code called someFunction but it doesn't exist. At the right, you can generally click the main.js line 1566 and the view will change you to a view of the JavaScript with the questionable function highlighted for you.

Configuration errors:

  • Configuration errors will appear the same way. JavaScript doesn't know that it was a typo in configuration; it just knows that some JavaScript failed. However, when the error refers to problems within a configuration file, the error occurs in configuration.js line 23, it is worth considering that the problem may have been introduced during the configuration phase.

  • When a Configuration is handled by the JavaScript, it must still follow JavaScript conventions and rules. Here are some common culprits:

    • Missing Commas:
      The items in a list of configurable parameters might be done with a bunch of key-value pairs. These are identified by the key:value pattern (a colon separating them) and the entire pair is separated from the next with a comma. Here is an example that contains an error:


      var config = {
        name: "Server 1",
        hostname: "myserver.site.com"
        port: 21
      }

      The missing comma after the hostname means that the rest of that Configuration variable will be dropped. The application probably expects a port value, and when none is found, it will send an error to the JavaScript console.

    • Missing Semicolons:
      In some cases, configurable parameters are each individual variables. They follow a parameter=value; pattern, often preceded by var. JavaScript interpreters are a liberal with semicolons, but sometimes a missing semicolon can introduce errors. Here is an example that might break in some browsers:


      var name = "Server 1";
      var hostname = "myserver.site.com"
      var port = 21;

    • Incorrect Type of Information:
      The Configuration document will describe the type of value expected. Typically, JavaScript comments (//) also reinforce the type. Types used in FileCatalyst Configuration files tend to be:

      1. String: is text surrounded by quotation marks.
      2. Boolean: is true or false, not surrounded by quotation marks.
      3. Integer: is a number, not surrounded by quotation marks.

When the wrong type is provided, JavaScript can break. Here is an example in which every line is correct:

var config = {

  hostname: "myserver.site.com", // string 
  port: 21, // integer
  autoconnect: true //boolean
}

and here is the same example with every line incorrect:

var config = {
  hostname: myserver.site.com, // supposed to be a string, but quotation marks are missing 
  port: "21", // supposed to be an integer, but the quotation marks indicate it's a string 
  autoconnect: "true" // again, the quotation marks change this from a boolean to a string
}