CODEWITHSUNDEEP
javascriptgoogle-chromedebuggingfirebug
Vee
Vee

Reputation: 1841

Javascript error in production only

I'm having trouble identifying a javascript error that is happening in production only. The error is:

Uncaught TypeError: (intermediate value)(...) is not a function

With a link to line 22182 in file: https://d2wvl99qs6f2ce.cloudfront.net/js/358ee32eac3992e61f9fa13a0c55203d.js

Clicking on the link, Chrome debugger shows an error at the following line:

 (function(jQuery){

Here are some excepts around the line above:

/*
 * jQuery SelectBox Styler v1.0.1
 * http://dimox.name/styling-select-boxes-using-jquery-css/
 *
 * Copyright 2012 Dimox (http://dimox.name/)
 * Released under the MIT license.
 *
 * Date: 2012.10.07
 *
 */

(function($) {
    $.fn.selectbox = function(options) {
         ...
    }
})(jQuery)
/* jquery.nicescroll
-- version 3.5.0 BETA5
-- copyright 2011-12-13 InuYaksa*2013
-- licensed under the MIT
--
-- http://areaaperta.com/nicescroll
-- https://github.com/inuyaksa/jquery.nicescroll
--
*/
(function(jQuery){
     ...          
})( jQuery );

Looking at the code and the error, it seems like I should change line:

})(jQuery)

to 

})(jQuery);

This change would be consistent with my research that this error is commonly caused by a missing semi-colon. But, when examining the code used in my development environment, the same code (without the semi-colon) is not producing any error. I've tried setting breakpoints before the error so I can pause execution, add the semi-colon, and then continue execution but that hasn't been very informative (maybe I'm using the debug tools incorrectly...)

I'm struggling because:

  1. The code in my development and production environment are the same (checked via github comparison).

  2. I can't replicate the error in my development environment which limits my ability to debug.

  3. The file, https://d2wvl99qs6f2ce.cloudfront.net/js/358ee32eac3992e61f9fa13a0c55203d.js, is a compilation of the js files from the head of my application. But, why is Chrome serving it from cloudfront?

What are some ways I can begin to identify the source of the problem? Is there a way I can modify code in Chrome Developer Tools or Firefox's Firebug to add the semi-colon and the continue execution? I've even tried pasting the javascript into JSfiddle but that broke fiddle (file is too long to paste). If it makes any difference, I'm building a Magento 1.9 application...

Upvotes: 1

Views: 1303

Answers (1)

Vee
Vee

Reputation: 1841

Turns out the answer is related to Magento. In the admin backend of Magento, there is an option to merge all javascript errors (Admin -> System -> Configuration -> Under Advanced tab go to click Developer -> Javascript Settings -> Merge Javascript files). When Javascript files are merged, all javascript errors that are normally ignored (such as a missing semi-colon in certain places) prior to the merge trigger errors. In my case, javascript files were being merged in production (for performance reasons) but not in the development environment.

In my case, the production environment was merging the javascript files while the development environment was not. Since there was a missing semi-colon I had noticed in the file above (see the question), the code in production was failing while the code in development worked.

Upvotes: 2

Related Questions