I'm using Sentry to log some errors on Javascript but while using Internet Explorer 11 I'm getting Syntax Error while configuring the scope
function addSentryTag(key, value) {
if (Sentry) {
Sentry.configureScope(scope => { scope.setTag(key, value);})
}
}
I assume the problem is using the lambda expression. Is there another way to add Tags to the scope?
I dont think IE11 supports the arrow syntax => are you running your code through any compilers like babel before trying it in the browser if not?
You can try this syntax:
function addSentryTag(key, value) {
if (Sentry) {
Sentry.configureScope(function(scope) {
scope.setTag(tag, value)
})
}
}
Give it a go :)
The same code without the lambda function:
function addSentryTag(key, value) {
if (Sentry) {
Sentry.configureScope(function(scope){
scope.setTag(key, value);
});
}
}
Related
Some months ago I created a Js library that I published on Npm.
Now I would like to rename some functions.
I read this post and I think it's very useful.
Suppose I have a file A:
export function function1(param1, param2) {
return param1 + param2
}
The exported functions that are usable from library users are in index.js file:
export { function1 } from './A'
and I want to rename it as sum(param1, param2).
I create this obsolete function:
function obsolete(newFunction, oldFnName, newFnName) {
const wrapper = function () {
console.warn(
`Obsolete function called. Function '${oldFnName}' has been deprecated, please use the new '${newFnName}' function instead.`
)
newFunction.apply(this, arguments)
}
wrapper.prototype = newFunction.prototype
return wrapper
}
Now what I have to do?
I suppose I have to modify the A file in this way:
/** #deprecated since version 2.0 */
export function function1(param1, param2) {
return sum(param1, param2)
}
export function sum(param1, param2) {
return param1 + param2
}
and add the sum function to the index file:
export { function1, sum } from './A'
And then? How can I use the obsolete function?
Ok, so this question seems to have been prompted by your comment (now deleted it seems):
Suppose I have a function fun1 that I want to make it deprecated and
the new function is fun2. How can I use this obsolete function? It
seems interesting
From this question.
So firstly, your getting a JSdoc (/** #deprecated since version 2.0 */) annotation and this function mixed up.
JSDoc is a markup language used to annotate JavaScript source code files
source
So this is only useful if your planning on creating a JSdoc annotation. Which I'm presuming your not. If your using JSdoc then this should work as is?
So ignoring that I'm going to go back to your question on this code.
Looking at the code you could use it like (not 100% sure as I didn't write it):
// the function from the previous question
function obsolete(oldFunc, newFunc) {
const wrapper = function() {
console.warn(`WARNING! Obsolete function called. Function ${oldFunc.name} has been deprecated, please use the new ${newFunc.name} function instead!`)
newFunc.apply(this, arguments)
}
wrapper.prototype = newFunc.prototype
return wrapper
}
// this is the function that is the replacement for obsfunc
function newfunc(){
console.log('new called');
}
// this is the function that is being made "obsolete"
function obsfunc(p) {
return obsolete(obsfunc, newfunc)();
}
// when you call the obsolete function it's actually the new function
// that gets triggered and an error is displayed in the console.
obsfunc();
in my case functions have parameters and a return value
this code doesn't support that. There is no official way to "obsolete" a function in the Js spec. TBH this is the correct (now deleted) answer to that question IMO. So you'll need to write your own solution. It's not really clear what your definition of "obsolete" is either? Decorators is a good option
There is no way of "setting" a function as deprecated. You just make a function similar to this:
function function1 () {
obsolete(function1(), "function1", "newFunction1")
}
I realize this might not be super useful, but if you are working with babel you might want to look into es7 decorators, they are meant exactly for use-cases like this one. although they still have no native browser support, hence Babel
function obsolete(newFuncGetter)
{
return (prototype, key, descriptor) => {
descriptor.value = (...args) => {
const newFunc = newFuncGetter();
console.warn(`'${key}' has been deprecated, please use '${newFunc.name}' instead!`);
return newFunc(...args);
};
return descriptor;
};
}
class Foo
{
static newfunc()
{
return 'new called';
}
#obsolete(() => Bar.newfunc)
static obsfunc()
{
return 'old value';
}
}
console.log(Bar.obsfunc());
I discovered babel only allows decorators on classes and their items, but I believe the actual decorators should also allow separate functions
The usage of your obsolete function is very simple:
All you have to do is to pass the new function to it:
/** #deprecated since version 2.0 */
export const function1 = obsolete(function function1(param1, param2) {
return param1 + param2
}, 'function1', 'sum')
One more minor tweak you could add to your obsolete declaration is a name setting so that the obsolete function will look the same as the original (that would avoid breaking anyone's code - or not anyone's?):
function obsolete(newFunction, oldFnName, newFnName) {
const wrapper = function () {
console.warn(
`Obsolete function called. Function '${oldFnName}' has been deprecated, please use the new '${newFnName}' function instead.`
)
newFunction.apply(this, arguments)
}
wrapper.prototype = newFunction.prototype
Object.defineProperty(wrapper, 'name', {
value: oldName,
enumerable: true,
configurable: true
}
return wrapper
}
However, if you just rename a method, you can avoid redefinition by passing the reference of the new one to the obsolete:
export function sum(param1, param2) {
return param1 + param2
}
/** #deprecated since version 2.0 */
export const function1 = obsolete(sum, 'function1', 'sum')
With the name fix from above, this will even rename your deprecated version of the new function to its old name, without manually creating a wrapper.
I have an issue with a component in Firefox. I tested in pretty much all browsers, Safari, Opera, Brave, Chrome … only Firefox Quantum 66.0.3 (64-bit) has problems.
The code I provided is a basic version of the whole component. The error I get is ReferenceError: "module is not defined" and TypeError: "jQuery(...).setsameheight is not a function". (jQuery is also loaded by script.js) when running Stencil locally with npm start --es5. I really don’t know what else to try.
The script is required for the project, it can't be edited.
I am using “#stencil/core”: “0.18.0", as a component builder. I also tried with “#stencil/core”: “~0.16.2"
import { Component, Prop, State, Element } from '#stencil/core';
import * as SCRIPT from '../../assets/script.js';
declare var jQuery: any;
#Component({
tag: 'events',
shadow: false
})
export class Events {
#Element() private element: HTMLElement;
componentDidLoad() {
SCRIPT
}
componentDidUpdate() {
const elements = this.element.querySelectorAll('div.fluid')
for (let element of elements) {
jQuery(element).setsameheight()
}
}
}
The ReferenceError points here community-component.core.pf.js:2485:7
function execBundleCallback(bundleId, deps, callback) {
var bundleExports = {};
try {
callback.apply(null, deps.map(function(d) {
if ('exports' === d) return bundleExports;
if ('require' === d) return userRequire;
return getLoadedBundle(d);
}));
} catch (e) {
console.error(e); //line 2485
}
It seems like your '../../assets/script.js' is not getting loaded in firefox. To make import statement work, you need to set dom.moduleScripts.enabled to true.
See - https://starbeamrainbowlabs.com/blog/article.php?article=posts/260-es6-features-14-modules.html as well as Browser compatibility from section - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
I'm using Markdown-it in my Angular 2 project. I want to create a plugin to extend Markdown-it. I have the basic Markdown-it working and can add a javascript plugin like this
PluginSetup(md) {
console.log('Enter PluginSetup');
md.inline.ruler.after('emphasis', 'cards', function x(state, silent) {
return false;
});
}
I see the console message and everything works fine.
Now I want the callback to invoke some Typescript. I've tried
export class PlugIns {
CardSymbols(state, silent) {
console.log('Enter CardSymbols');
return false;
}
PluginSetup(md) {
console.log('Enter PluginSetp');
md.inline.ruler.after('emphasis', 'cards', function x(state, silent) {
console.log('Enter x');
return this.CardsSymbols(state, silent);
});
}
}
I see the 'Enter x' console message and then
EXCEPTION: Error in ./ArticleDisplayComponent class ArticleDisplayComponent - inline template:0:5 caused by: Object doesn't support property or method 'CardSymbols'
How do I call Typescript from a javascript callback?
RESOLVED
None of the suggestions or referenced articles changed the error message but I do have a resolution.
md.inline.ruler.after('emphasis', 'cards', Plugins.prototype.CardSymbols);
Thanks for all the suggestions
This bit of code:
function get() {
console.log('get')
}
var obj = {
get
}
obj.get()
results in a SyntaxError: Unexpected token } in iojs and Chrom{ium,e} but works fine in Firefox.
Longhand, of course, works fine:
function get() {
console.log('get')
}
var obj = {
get: get
}
obj.get()
So does using a word other than get
function git() {
console.log('get')
}
var obj = {
git
}
obj.git()
Is this a bug in V8 or something else? What am I not getting here?
v8 hasn't made this available by default yet1; firefox (which doesn't use v8) has.
For now, you can transpile with babel.js.
1 It's available, but not in every runtime environment. In node.js, for example, you need to enable it with a --harmony_something flag.
The following code breaks in IE8:
getTypes: function (filter) {
features = []
_.each(this.collection.models, function (item) {
_.each(item.get(filter), function (value) {
if(features.indexOf(value) == -1){ //// error happens here
features.push(value)
}
})
})
return features
}
I get the error message:
Message: Object doesn't support this property or method
http://jsfiddle.net/w8fm2bf1/
Why is this?
The IE versions before IE9 does not support .indexOf() function for Array
As an alternative you can use jQuery.inArray(). Something like this:
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(val) {
return jQuery.inArray(val, this);
};
}
Array.prototype.indexOf isn't supported in IE until version 9. (source).
You'll need to monkey patch it (there's an example on the MDN page linked above) or use an alternative.