Merge pull request #3060 from Automattic/revert-3034-revert-1949-try/…

…catch-js-errors-2

Try catching JS errors and sending them to the API

client/catch-js-errors.js

@@ -0,0 +1,85 @@
+( function() {
+	var savedWindowOnError = window.onerror;
+
+	// Props http://stackoverflow.com/a/20405830/379063
+	function stringifyErrorForUrlParams( error ) {
+		var simpleObject = {};
+		Object.getOwnPropertyNames( error ).forEach( function( key ) {
+			simpleObject[ key ] = encodeURIComponent( error[ key ] );
+		} );
+		return JSON.stringify( simpleObject );
+	};
+
+	// Props http://stackoverflow.com/a/17604754/379063
+	function isLocalStorageNameSupported() {
+		var testKey = 'test',
+			storage = window.localStorage;
+		try {
+			storage.setItem( testKey, '1' );
+			storage.removeItem( testKey );
+			return true;
+		} catch ( error ) {
+			return false;
+		}
+	}
+
+	/**
+	 * Throttle function by delay ms
+	 *
+	 * @param {function} fn wrapped function
+	 * @param {number} delay minimum debounce time in ms
+	 * @returns {function} a callback
+	 */
+	function debounce( fn, delay ) {
+		var lastCall = Date.now();
+
+		return function() {
+			var now = Date.now();
+
+			if ( ( now - lastCall ) < delay ) {
+				return;
+			}
+
+			lastCall = now;
+			fn.apply( null, arguments );
+		}
+	}
+
+	function sendErrorsToApi( message, scriptUrl, lineNumber, columnNumber, error ) {
+		var xhr = new XMLHttpRequest(),
+			params;
+
+		error = error || new Error( message );
+
+		// Add user agent if we have it
+		if ( navigator && navigator.userAgent ) {
+			error.userAgent = navigator.userAgent;
+		}
+
+		// POST to the API
+		xhr.open( 'POST', 'https://public-api.wordpress.com/rest/v1.1/js-error?http_envelope=1', true );
+		xhr.setRequestHeader( 'Content-type', 'application/x-www-form-urlencoded' );
+
+		params = 'client_id=39911&client_secret=cOaYKdrkgXz8xY7aysv4fU6wL6sK5J8a6ojReEIAPwggsznj4Cb6mW0nffTxtYT8&error=' + stringifyErrorForUrlParams( error );
+		xhr.send( params );
+	}
+
+	if ( isLocalStorageNameSupported() ) {
+		// Randomly assign 1% of users to log errors
+		if ( localStorage.getItem( 'log-errors' ) === undefined && Math.random() <= 0.01 ) {
+			localStorage.setItem( 'log-errors', 'true' );
+		} else {
+			localStorage.setItem( 'log-errors', 'false' );
+		}
+
+		if ( localStorage.getItem( 'log-errors' ) !== undefined && localStorage.getItem( 'log-errors' ) === 'true' ) {
+			// set up handler to POST errors
+			window.onerror = debounce( function( message, scriptUrl, lineNumber, columnNumber, error ) {
+				sendErrorsToApi( message, scriptUrl, lineNumber, columnNumber, error );
+				if ( savedWindowOnError ) {
+					savedWindowOnError();
+				}
+			}, 100 );
+		}
+	}
+}() );

server/pages/index.jade

@@ -74,6 +74,11 @@ html(lang=lang, dir=isRTL ? 'rtl' : 'ltr', class=isFluidWidth ? 'is-fluid-width'
 					span(class=['environment', 'is-docs'])
 						a(href=devDocsURL title='DevDocs') docs
 
+		script( src=urls[ 'commons.js' ] )
+
+		if 'development' !== env && 'production' !== env
+			script( src=urls[ 'catch-js-errors' ] )
+
 		script.
 			(function() {
 				function isSupported() {

webpack.config.js

@@ -86,7 +86,7 @@ if ( CALYPSO_ENV === 'desktop' || CALYPSO_ENV === 'desktop-mac-app-store' ) {
 	webpackConfig.output.filename = '[name].js';
 } else {
 	webpackConfig.entry.vendor = [ 'react', 'store', 'page', 'wpcom-unpublished', 'jed', 'debug' ];
-	webpackConfig.plugins.push( new webpack.optimize.CommonsChunkPlugin( 'vendor', '[name].[hash].js' ) );
+	webpackConfig.plugins.push( new webpack.optimize.CommonsChunkPlugin( 'commons.js' ) );
 	webpackConfig.plugins.push( new ChunkFileNamePlugin() );
 }
 
@@ -96,6 +96,8 @@ jsLoader = {
 	loaders: [ 'babel-loader?cacheDirectory&optional[]=runtime' ]
 };
 
+webpackConfig.entry[ 'catch-js-errors' ] = [ 'catch-js-errors' ];
+
 if ( CALYPSO_ENV === 'development' ) {
 	webpackConfig.plugins.push( new PragmaCheckPlugin() );
 	webpackConfig.plugins.push( new webpack.HotModuleReplacementPlugin() );