Develop Reference

Using Meteor.wrapAsync correctly

Hopefully this is a newbie question.
I have the following code that I am trying to convert to using meteor.wrapAsync. I am getting a "Exception while invoking method 'emailSend' ReferenceError: syncfunc is not defined" exception. What am i missing?
Stack Trace:
I20191031-06:21:16.246(-5)? Exception while invoking method 'emailSend' ReferenceError: syncfunc is not defined
I20191031-06:21:16.248(-5)? at MethodInvocation.emailSend (src/imports/api/email.js:13:27)
I20191031-06:21:16.249(-5)? at maybeAuditArgumentChecks (packages/ddp-server/livedata_server.js:1771:12)
I20191031-06:21:16.273(-5)? at DDP._CurrentMethodInvocation.withValue (packages/ddp-server/livedata_server.js:719:19)
I20191031-06:21:16.275(-5)? at Meteor.EnvironmentVariable.EVp.withValue (packages\meteor.js:1234:12)
I20191031-06:21:16.276(-5)? at DDPServer._CurrentWriteFence.withValue (packages/ddp-server/livedata_server.js:717:46)
I20191031-06:21:16.277(-5)? at Meteor.EnvironmentVariable.EVp.withValue (packages\meteor.js:1234:12)
I20191031-06:21:16.277(-5)? at Promise (packages/ddp-server/livedata_server.js:715:46)
I20191031-06:21:16.278(-5)? at new Promise (<anonymous>)
I20191031-06:21:16.279(-5)? at Session.method (packages/ddp-server/livedata_server.js:689:23)
I20191031-06:21:16.280(-5)? at packages/ddp-server/livedata_server.js:559:43
email.js:
Meteor.methods(
{
emailSend(fromAddress, subject, emailText)
{
if (Meteor.isServer)
{
const { Email } = require('../server/email.js');
var syncFunc = Meteor.wrapAsync(Email.send);
var sendEmailReturn=syncfunc(fromAddress, subject, emailText);
return sendEmailReturn;
**//if I comment out the above three lines and uncomment the line below then the application works fine.**
//return Email.send(fromAddress, subject, emailText);
}
},
})

You don't need to use external callback to sync methods as Meteor supports "async" and "awaits" by default. Below is an example of using 'await' method.
Meteor.methods({
async emailSend(fromAddress, subject, emailText) {
const { Email } = require('../server/email.js');
var sendEmailReturn = await Email.send(fromAddress, subject, emailText);
}
});

I believe Meteor.defer is more suited to what you're trying to achieve here.
Example:
Meteor.methods({
'action_plus_email': function () {
// do something
Meteor.defer(() => {
Email.send(...)
})
return 'hello there, user';
}
})
https://www.meteor-tuts.com/chapters/1/meteorsnacks#Meteor-defer
https://apiko.com/blog/organization-of-email-sending-in-meteorjs/
And if you're are going to be sending many emails, please take a look at mail-time. It can be of great help.
https://github.com/VeliovGroup/Mail-Time

How to report console.error with Sentry?

I have application where some critical issues are reported with console.error but are not thrown so application might continue to run - possibly in crippled state.
It's necessary to report also console.error issues, but Sentry (Raven) library send to server only thrown exceptions.
Does someone knows how to solve this nicely ?
(ideally without need to rewrite all console.error calls, cause also some vendor libraries might still write output just into console)

As user #kumar303 mentioned in his comment to the question ... you can use the JS console integration Sentry.Integrations.CaptureConsole.
See https://docs.sentry.io/platforms/javascript/configuration/integrations/plugin/#captureconsole for documentation.
At the end you JS code to setup Sentry looks as follows:
import * as Sentry from '#sentry/browser';
import { CaptureConsole } from '#sentry/integrations';
Sentry.init({
dsn: 'https://your-sentry-server-dsn',
integrations: [
new CaptureConsole({
levels: ['error']
})
],
release: '1.0.0',
environment: 'prod',
maxBreadcrumbs: 50
})
If then someone calls console.error a new event will sent to sentry.

Here's a more robust override solution
// creating function declarations for better stacktraces (otherwise they'd be anonymous function expressions)
var oldConsoleError = console.error;
console.error = reportingConsoleError; // defined via function hoisting
function reportingConsoleError() {
var args = Array.prototype.slice.call(arguments);
Sentry.captureException(reduceConsoleArgs(args), { level: 'error' });
return oldConsoleError.apply(console, args);
};
var oldConsoleWarn = console.warn;
console.warn = reportingConsoleWarn; // defined via function hoisting
function reportingConsoleWarn() {
var args = Array.prototype.slice.call(arguments);
Sentry.captureMessage(reduceConsoleArgs(args), { level: 'warning' });
return oldConsoleWarn.apply(console, args);
}
function reduceConsoleArgs(args) {
let errorMsg = args[0];
// Make sure errorMsg is either an error or string.
// It's therefore best to pass in new Error('msg') instead of just 'msg' since
// that'll give you a stack trace leading up to the creation of that new Error
// whereas if you just pass in a plain string 'msg', the stack trace will include
// reportingConsoleError and reportingConsoleCall
if (!(errorMsg instanceof Error)) {
// stringify all args as a new Error (which creates a stack trace)
errorMsg = new Error(
args.reduce(function(accumulator, currentValue) {
return accumulator.toString() + ' ' + currentValue.toString();
}, '')
);
}
return errorMsg;
}

Based on #Marc Schmid's solution I came up with the following working example, if you link to the Sentry CDN files.
<script src="https://browser.sentry-cdn.com/5.11.1/bundle.min.js" integrity="sha384-r7/ZcDRYpWjCNXLUKk3iuyyyEcDJ+o+3M5CqXP5GUGODYbolXewNHAZLYSJ3ZHcV" crossorigin="anonymous"></script>
<!-- https://github.com/getsentry/sentry-javascript/issues/1976#issuecomment-492260648 -->
<script src="https://browser.sentry-cdn.com/5.11.1/captureconsole.min.js"></script>
<script>
Sentry.init({
dsn: 'https://abcdef1234567890#sentry.io/012345',
debug: false,
integrations: [
new Sentry.Integrations.CaptureConsole({
levels: ['error']
})
],
});
</script>

Found a little hacky solution:
const consoleError = console.error;
console.error = function(firstParam) {
const response = consoleError.apply(console, arguments);
Raven.captureException(firstParam, { level: 'error' });
return response;
};
It just wraps console.error and report each of error logs in console to Raven (Sentry).
If someone have nicer approach (maybe some hidden feature of Sentry) please feel free to share!

I wrote a library that is going this using your Sentry instance.
https://github.com/aneldev/dyna-sentry

Get Data from URL

I'm tyring to build and minify my JS using grunt, When i build i didn't get any errors but while minifying i'm getting an error like
../source/js/browse-container.js
1013 | var cards = listCards;
^ 'listCards' is not defined.
>> 1 error in 1 file
Warning: Task "jshint:all" failed. Use --force to continue.
Aborted due to warnings.
Below is the code,I don't see any errors in console, i just get that above error while trying to minify. (Minification is done using uglify)
Please let me know what i'm doing wrong ?
fetchListStatic: function(){
var cards = listCards;
return new Promise(function (resolve) {
if (typeof (cards) !== 'undefined') {
//var cards = listCards;
resolve(cards);
} else {
resolve([]);
}
});
},

I've declared the listCards globally. Hence resolved my issue
var moment, hbs, promise, listCards;
function BrowseContainer() {
}

ESLint no-undef - js issue with BigCommerce

I've got this code in a .js file that I'm running through ESLint. But it's throwing an error about this line: iFrameResize({.
Saying: error 'iFrameResize' is not defined no-undef.
If I define it like this: const iFrameResize()
My code no longer works, how do I make ESLint happy and keep the code working?
export default class Page extends PageManager {
before(next) {
next();
}
loaded(next) {
next();
}
after(next) {
const url = Url.parse(location.href, true);
const IC_PAGE = '/international-checkout';
const currentPageUrl = url.pathname;
if (currentPageUrl.indexOf(IC_PAGE) !== -1 && $('#icForm').length === 1) {
$(document).ready(() => {
if ($('#icForm').length === 1) {
if ($('.GiftStatus') && $('.GiftStatus').val() === '1') {
alert('Gift Certificate is not available for international orders. Please remove Gift Certificate from shopping cart before proceeding with International Checkout.');
window.parent.location.href = '/cart.php';
return false;
}
$('.icformfields').each((i, e) => {
const currentId = $(e).attr('id');
const res = currentId.split('-');
const finalId = Number(res[1]) + 1;
const finalName = $(e).attr('name') + finalId;
$(e.currentTarget).attr('name', finalName);
});
document.getElementById('icIframe').src = 'https://www.internationalcheckout.com/cart.php';
document.getElementById('icForm').submit();
$('#icIframe').load(() => {
$('#icForm').remove();
$('#loading').css('display', 'none');
$('html, body').animate({
scrollTop: $('#icIframe').offset().top,
}, 1000);
$('#icIframe').fadeIn();
});
}
});
iFrameResize({
checkOrigin: false,
enablePublicMethods: true,
});
}
next();
}
}
I want to know how to satisfy ESLint without disabling error reporting for the particular line.

It's also worth noting that eslint provides multiple ways around this.
Please see the eslint docs.
I would recommend adding the following to the top of your file. Use this method to define global dependencies that are only used in a couple of places:
/* global iFrameResize */
You can also provide an array:
/* global iFrameResize, iFrameManage, etc */
If you're using iFrameResize a lot or if you're dependent on something like jQuery, consider defining it as a global in your .eslintrc file.
"globals": {
"iFrameManage": true,
}

if you are sure that the code is working on iFrameResize() and maybe it's the because of the architecture you've setup with js files you might just want to ignore that error. simplest is
// eslint-disable-line
which disables esilnt for that line.
Since this function definition comes from the library that is probably attaching it to the global scope which is window so calling it from that scope does the trick
window.iFrameResizer()
Now eslint understands that you're calling function that resides at window object, so it doesn't complain

AngularJS - Stack trace ignoring source map

I've written an AngularJS app but it's proving a bit of a nightmare to debug. I'm using Grunt + uglify to concatenate and minify my application code. It also creates a source map alongside the minified JS file.
The source map seems to work properly when there is a JS error in the file, but outside of the AngularJS application. e.g. If I write console.log('a.b'); at the top of one of the files, the error logged in the Chrome debugger displays line + file info for the original file, not the minified one.
The problem occurs when there is a problem with code that Angular runs itself (e.g. in Controller code). I get a nice stack trace from Angular, but it only details the minified file not the original.
Is there anything I can do to get Angular to acknowledge the source map?
Example error below:
TypeError: Cannot call method 'getElement' of undefined
at Object.addMapControls (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:2848)
at Object.g [as init] (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:344)
at new a (http://my-site/wp-content/plugins/my-maps/assets/js/app.min.js:1:591)
at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js:29:495)
at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js:30:123)

Larrifax's answer is good but there is an improved version of the function documented in the same issue report:
.config(function($provide) {
// Fix sourcemaps
// #url https://github.com/angular/angular.js/issues/5217#issuecomment-50993513
$provide.decorator('$exceptionHandler', function($delegate) {
return function(exception, cause) {
$delegate(exception, cause);
setTimeout(function() {
throw exception;
});
};
});
})
This will generate two stack traces, as Andrew Magee noted: one formatted by Angular, then a second one formatted by the browser. The second trace will apply sourcemaps. It's probably not a great idea to disable the duplicates, because you may have other Angular modules that also do work with exceptions that could be called after this via the delegation.

The only solution I could find is to bite the bullet and parse the source maps yourself. Here is some code that will do this. First you need to add source-map to your page. Then add this code:
angular.module('Shared').factory('$exceptionHandler',
function($log, $window, $injector) {
var getSourceMappedStackTrace = function(exception) {
var $q = $injector.get('$q'),
$http = $injector.get('$http'),
SMConsumer = window.sourceMap.SourceMapConsumer,
cache = {};
// Retrieve a SourceMap object for a minified script URL
var getMapForScript = function(url) {
if (cache[url]) {
return cache[url];
} else {
var promise = $http.get(url).then(function(response) {
var m = response.data.match(/\/\/# sourceMappingURL=(.+\.map)/);
if (m) {
var path = url.match(/^(.+)\/[^/]+$/);
path = path && path[1];
return $http.get(path + '/' + m[1]).then(function(response) {
return new SMConsumer(response.data);
});
} else {
return $q.reject();
}
});
cache[url] = promise;
return promise;
}
};
if (exception.stack) { // not all browsers support stack traces
return $q.all(_.map(exception.stack.split(/\n/), function(stackLine) {
var match = stackLine.match(/^(.+)(http.+):(\d+):(\d+)/);
if (match) {
var prefix = match[1], url = match[2], line = match[3], col = match[4];
return getMapForScript(url).then(function(map) {
var pos = map.originalPositionFor({
line: parseInt(line, 10),
column: parseInt(col, 10)
});
var mangledName = prefix.match(/\s*(at)?\s*(.*?)\s*(\(|#)/);
mangledName = (mangledName && mangledName[2]) || '';
return ' at ' + (pos.name ? pos.name : mangledName) + ' ' +
$window.location.origin + pos.source + ':' + pos.line + ':' +
pos.column;
}, function() {
return stackLine;
});
} else {
return $q.when(stackLine);
}
})).then(function (lines) {
return lines.join('\n');
});
} else {
return $q.when('');
}
};
return function(exception) {
getSourceMappedStackTrace(exception).then($log.error);
};
});
This code will download the source, then download the sourcemaps, parse them, and finally attempt to replace the locations in the stack trace the mapped locations. This works perfectly in Chrome, and quite acceptably in Firefox. The disadvantage is that you are adding a fairly large dependency to your code base and that you move from very fast synchronous error reporting to fairly slow async error reporting.

I just had the same issue and have been hunting around for a solution - apparently it's a Chrome issue with stack traces in general and happens to apply to Angular because it uses stack traces in error reporting. See:
Will the source mapping in Google Chrome push to Error.stack

I would take a look at the following project: https://github.com/novocaine/sourcemapped-stacktrace
It does essentially the same thing as the answer from #jakub-hampl but might be useful.

According to this issue it seems that Angular's $logProvider breaks sourcemapping. A workaround like this is suggested in the issue:
var module = angular.module('source-map-exception-handler', [])
module.config(function($provide) {
$provide.decorator('$exceptionHandler', function($delegate) {
return function(exception, cause) {
$delegate(exception, cause);
throw exception;
};
});
});

As the bug has been fixed in Chrome (but the issue persists in Angular), a workaround that doesn’t print out the stack trace twice would be this:
app.factory('$exceptionHandler', function() {
return function(exception, cause) {
console.error(exception.stack);
};
});