Load script on the fly

Error monitoring tool for recording videos & screenshots of user sessions
Post Reply
User avatar
dimehb
Premium Member
Premium Member
Posts: 235
Joined: Fri Oct 02, 2015 11:06 am

Load script on the fly

Post by dimehb » Fri May 24, 2019 11:40 am

Some of our customers - for various reasons - cannot (or don't want to) use RootCause, which forced us to make error logging optional (i.e. configurable).

Even though it can be configured, the script is always loaded. So this effectively means we'd have to get rid of this:

<script type="text/javascript" src="https://app.therootcause.io/rootcause-full-extjs.js" defer crossorigin="anonymous"></script>

in favor of something like this:

Code: Select all

$.getScript(https://app.therootcause.io/rootcause-full-extjs.js)
or

Code: Select all

var head = document.getElementsByTagName('head')[0];
var script = document.createElement("script");        
script.type = 'text/javascript';
script.src = "https://app.therootcause.io/rootcause-full-extjs.js";
script.crossorigin = "anonymous";
head.appendChild(script);
But either method is returning this error:
rootcause-full-extjs.js:10 Uncaught TypeError: Singleton is not a function
at rootcause-full-extjs.js:10

For the next error, see bottom.

Is there any way we could add this script on the fly to the browser?

Code: Select all

Uncaught Error: Mismatched anonymous define() module: function(){"use strict";function e(e){return"function"==typeof e}function t(){var e=setTimeout;return function(){return e(n,1)}}function n(){for(var e=0;e<w;e+=2){(0,k[e])(k[e+1]),k[e]=void 0,k[e+1]=void 0}w=0}function i(e,t){var n=arguments,i=this,r=new this.constructor(o);void 0===r[_]&&g(r);var s=i._state;return s?function(){var e=n[s-1];S(function(){return m(s,r,e,i._result)})}():h(i,r,e,t),r}function r(e){if(e&&"object"==typeof e&&e.constructor===this)return e;var t=new this(o);return l(t,e),t}function o(){}function s(e){try{return e.then}catch(e){return I.error=e,I}}function a(t,n,o){n.constructor===t.constructor&&o===i&&n.constructor.resolve===r?function(e,t){t._state===O?c(e,t._result):t._state===D?d(e,t._result):h(t,void 0,function(t){return l(e,t)},function(t){return d(e,t)})}(t,n):o===I?d(t,I.error):void 0===o?c(t,n):e(o)?function(e,t,n){S(function(e){var i=!1,r=function(e,t,n,i){try{e.call(t,n,i)}catch(e){return e}}(n,t,function(n){i||(i=!0,t!==n?l(e,n):c(e,n))},function(t){i||(i=!0,d(e,t))},e._label);!i&&r&&(i=!0,d(e,r))},e)}(t,n,o):c(t,n)}function l(e,t){e===t?d(e,new TypeError("You cannot resolve a promise with itself")):!function(e){return"function"==typeof e||"object"==typeof e&&null!==e}(t)?c(e,t):a(e,t,s(t))}function u(e){e._onerror&&e._onerror(e._result),p(e)}function c(e,t){e._state===N&&(e._result=t,e._state=O,0!==e._subscribers.length&&S(p,e))}function d(e,t){e._state===N&&(e._state=D,e._result=t,S(u,e))}function h(e,t,n,i){var r=e._subscribers,o=r.length;e._onerror=null,r[o]=t,r[o+O]=n,r[o+D]=i,0===o&&e._state&&S(p,e)}function p(e){var t=e._subscribers,n=e._state;if(0!==t.length){for(var i=void 0,r=void 0,o=e._result,s=0;s<t.length;s+=3)i=t[s],r=t[s+n],i?m(n,i,r,o):r(o);e._subscribers.length=0}}function f(){this.error=null}function m(t,n,i,r){var o=e(i),s=void 0,a=void 0,u=void 0,h=void 0;if(o){if((s=function(e,t){try{return e(t)}catch(e){return L.error=e,L}}(i,r))===L?(h=!0,a=s.error,s=null):u=!0,n===s)return void d(n,new TypeError("A promises callback cannot return that same promise."))}else s=r,u=!0;n._state!==N||(o&&u?l(n,s):h?d(n,a):t===O?c(n,s):t===D&&d(n,s))}function g(e){e[_]=F++,e._state=void 0,e._result=void 0,e._subscribers=[]}function v(e,t){this._instanceConstructor=e,this.promise=new e(o),this.promise[_]||g(this.promise),b(t)?(this._input=t,this.length=t.length,this._remaining=t.length,this._result=new Array(this.length),0===this.length?c(this.promise,this._result):(this.length=this.length||0,this._enumerate(),0===this._remaining&&c(this.promise,this._result))):d(this.promise,new Error("Array Methods must be provided an Array"))}function y(e){this[_]=F++,this._result=this._state=void 0,this._subscribers=[],o!==e&&("function"!=typeof e&&function(){throw new TypeError("You must pass a resolver function as the first argument to the promise constructor")}(),this instanceof y?function(e,t){try{t(function(t){l(e,t)},function(t){d(e,t)})}catch(t){d(e,t)}}(this,e):function(){throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.")}())}var b=Array.isArray?Array.isArray:function(e){return"[object Array]"===Object.prototype.toString.call(e)},w=0,C=void 0,E=void 0,S=function(e,t){k[w]=e,k[w+1]=t,2===(w+=2)&&(E?E(n):A())},x="undefined"!=typeof window?window:void 0,R=x||{},P=R.MutationObserver||R.WebKitMutationObserver,M="undefined"==typeof self&&"undefined"!=typeof process&&"[object process]"==={}.toString.call(process),T="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel,k=new Array(1e3),A=void 0;A=M?function(){return process.nextTick(n)}:P?function(){var e=0,t=new P(n),i=document.createTextNode("");return t.observe(i,{characterData:!0}),function(){i.data=e=++e%2}}():T?function(){var e=new MessageChannel;return e.port1.onmessage=n,function(){return e.port2.postMessage(0)}}():void 0===x&&"function"==typeof require?function(){try{var e=require("vertx");return void 0!==(C=e.runOnLoop||e.runOnContext)?function(){C(n)}:t()}catch(e){return t()}}():t();var _=Math.random().toString(36).substring(16),N=void 0,O=1,D=2,I=new f,L=new f,F=0;return v.prototype._enumerate=function(){for(var e=this.length,t=this._input,n=0;this._state===N&&n<e;n++)this._eachEntry(t[n],n)},v.prototype._eachEntry=function(e,t){var n=this._instanceConstructor,l=n.resolve;if(l===r){var u=s(e);if(u===i&&e._state!==N)this._settledAt(e._state,t,e._result);else if("function"!=typeof u)this._remaining--,this._result[t]=e;else if(n===y){var c=new n(o);a(c,e,u),this._willSettleAt(c,t)}else this._willSettleAt(new n(function(t){return t(e)}),t)}else this._willSettleAt(l(e),t)},v.prototype._settledAt=function(e,t,n){var i=this.promise;i._state===N&&(this._remaining--,e===D?d(i,n):this._result[t]=n),0===this._remaining&&c(i,this._result)},v.prototype._willSettleAt=function(e,t){var n=this;h(e,void 0,function(e){return n._settledAt(O,t,e)},function(e){return n._settledAt(D,t,e)})},y.all=function(e){return new v(this,e).promise},y.race=function(e){var t=this;return b(e)?new t(function(n,i){for(var r=e.length,o=0;o<r;o++)t.resolve(e[o]).then(n,i)}):new t(function(e,t){return t(new TypeError("You must pass an array to race."))})},y.resolve=r,y.reject=function(e){var t=new this(o);return d(t,e),t},y._setScheduler=function(e){E=e},y._setAsap=function(e){S=e},y._asap=S,y.prototype={constructor:y,then:i,catch:function(e){return this.then(null,e)}},y.polyfill=function(){var e=void 0;if("undefined"!=typeof global)e=global;else if("undefined"!=typeof self)e=self;else try{e=Function("return this")()}catch(e){throw new Error("polyfill failed because global object is unavailable in this environment")}var t=e.Promise;if(t){var n=null;try{n=Object.prototype.toString.call(t.resolve())}catch(e){}if("[object Promise]"===n&&!t.cast)return}e.Promise=y},y.Promise=y,void 0===window.Promise&&y.polyfill(),y}
http://requirejs.org/docs/errors.html#mismatch
    at makeError (Index?v=2wVuzrf0hV0J74Ivv_i4ap1uinMgk8U5fnUaZE4xQ7w1:190833)
    at v (Index?v=2wVuzrf0hV0J74Ivv_i4ap1uinMgk8U5fnUaZE4xQ7w1:190833)
    at Object.o [as require] (Index?v=2wVuzrf0hV0J74Ivv_i4ap1uinMgk8U5fnUaZE4xQ7w1:190833)
    at requirejs (Index?v=2wVuzrf0hV0J74Ivv_i4ap1uinMgk8U5fnUaZE4xQ7w1:190833)
    at Function.req.config (Index?v=2wVuzrf0hV0J74Ivv_i4ap1uinMgk8U5fnUaZE4xQ7w1:190833)
Last edited by dimehb on Fri May 24, 2019 11:57 am, edited 1 time in total.

User avatar
mats
Core Developer
Core Developer
Posts: 14356
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Load script on the fly

Post by mats » Fri May 24, 2019 11:53 am

It should work fine to load it as you do, it's just a JS script file like any other. Try doing it in any website, I don't see any error after loading the script by adding to HEAD, on for example www.bryntum.com.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
dimehb
Premium Member
Premium Member
Posts: 235
Joined: Fri Oct 02, 2015 11:06 am

Re: Load script on the fly

Post by dimehb » Fri May 24, 2019 1:04 pm

You're right. Turns out there was a naming conflict as I also have a Singleton class. I gave it a namespace and it works.
Maybe something you could as well to prevent this from happening with other customers.

Thanks for the reply.

User avatar
mats
Core Developer
Core Developer
Posts: 14356
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Load script on the fly

Post by mats » Fri May 24, 2019 5:53 pm

Yes next Siesta major version will not have this issue.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

Post Reply