Plots2: JS compression error "Parser error"? during asset pipeline process

[sentry-io[bot]]

Sentry Issue: PLOTS2-1D0

JSON::ParserError: 439: unexpected token at '{"code":"!function(){function t(e,i,n){function o(a,s){if(!i[a]){if(!e[a]){var h=\"function\"==typeof require&&require;if(!s&&h)return h(a,!0);if(r)return r(a,!0);var l=new Error(\"Cannot find module '\"+a+\"'\");throw l.code=\"MODULE_NOT_FOUND\",l}var u=i[a]={exports:{}};e[a][0].call(u.exports,function(t){return o(e[a][1][t]||t)},u,u.exports,t,e,i,n)}return i[a].exports}for(var r=\"function\"==typeof require&&require,a=0;a<n.length;a++)o(n[a]);return o}return t}()({1:[function(t,e){var i,n,o;i=\"h337\",n=this,o=function(){var t,e={defaultRadius:40,defaultRenderer:\"canvas2d\",defaultGradient:{.25:\"rgb(0,0,255)\",.55:\"rgb(0,255,0)\",.85:\"yellow\",1:\"rgb(255,0,0)\"},defaultMaxOpacity:1,defaultMinOpacity:0,defaultBlur:.85,defaultXField:\"x\",defaultYField:\"y\",defaultValueField:\"value\",plugins:{}},i=function(){var t=function(t){this._coordinator={},this._data=[],this._radi=[],this._min=10,this._max=1,this._xField=t.xField||t.defaultXField,this._yField=t.yField||t.defaultYField,this._valueField=t.valueField||t.defaultValueField,t.radius&&(this._cfgRadius=t.radius)},i=e.defaultRadius;return t.prototype={_organiseData:function(t,e){var n=t[this._xField],o=t[this._yField],r=this._radi,a=this._data,s=this._max,h=this._min,l=t[this._valueField]||1,u=t.radius||this._cfgRadius||i;a[n]||(a[n]=[],r[n]=[]),a[n][o]?a[n][o]+=l:(a[n][o]=l,r[n][o]=u);var c=a[n][o];return c>s?(e?this.setDataMax(c):this._max=c,!1):c<h?(e?this.setDataMin(c):this._min=c,!1):{x:n,y:o,value:l,radius:u,min:h,max:s}},_unOrganizeData:function(){var t=[],e=this._data,i=this._radi;for(var n in e)for(var o in e[n])t.push({x:n,y:o,radius:i[n][o],value:e[n][o]});return{min:this._min,max:this._max,data:t}},_onExtremaChange:function(){this._coordinator.emit(\"extremachange\",{min:this._min,max:this._max})},addData:function(){if(arguments[0].length>0)for(var t=arguments[0],e=t.length;e--;)this.addData.call(this,t[e]);else{var i=this._organiseData(arguments[0],!0);i&&(0===this._data.length&&(this._min=this._max=i.value),this._coordinator.emit(\"renderpartial\",{min:this._min,max:this._max,data:[i]}))}return this},setData:function(t){var e=t.data,i=e.length;this._data=[],this._radi=[];for(var n=0;n<i;n++)this._organiseData(e[n],!1);return this._max=t.max,this._min=t.min||0,this._onExtremaChange(),this._coordinator.emit(\"renderall\",this._getInternalData()),this},removeData:function(){},setDataMax:function(t){return this._max=t,this._onExtremaChange(),this._coordinator.emit(\"renderall\",this._getInternalData()),this},setDataMin:function(t){return this._min=t,this._onExtremaChange(),this._coordinator.emit(\"renderall\",this._getInternalData()),this},setCoordinator:function(t){this._coordinator=t},_getInternalData:function(){return{max:this._max,min:this._min,data:this._data,radi:this._radi}},getData:function(){return this._unOrganizeData()}},t}(),n=function(){function t(t){var i=t.container,n=this.shadowCanvas=document.createElement(\"canvas\"),o=this.canvas=t.canvas||document.createElement(\"canvas\"),r=(this._renderBoundaries=[1e4,1e4,0,0],getComputedStyle(t.container)||{});o.className=\"heatmap-canvas\",this._width=o.width=n.width=t.width||+r.width.replace(/px/,\"\"),this._height=o.height=n.height=t.height||+r.height.replace(/px/,\"\"),this.shadowCtx=n.getContext(\"2d\"),this.ctx=o.getContext(\"2d\"),o.style.cssText=n.style.cssText=\"position:absolute;left:0;top:0;\",i.style.position=\"relative\",i.appendChild(o),this._palette=e(t),this._templates={},this._setStyles(t)}var e=function(t){var e=t.gradient||t.defaultGradient,i=document.createElement(\"canvas\"),n=i.getContext(\"2d\");i.width=256,i.height=1;var o=n.createLinearGradient(0,0,256,1);for(var r in e)o.addColorStop(r,e[r]);return n.fillStyle=o,n.fillRect(0,0,256,1),n.getImageData(0,0,256,1).data},i=function(t,e){var i=document.createElement(\"canvas\"),n=i.getContext(\"2d\"),o=t,r=t;if(i.width=i.height=2*t,1==e)n.beginPath(),n.arc(o,r,t,0,2*Math.PI,!1),n.fillStyle=\"rgba(0,0,0,1)\",n.fill();else{var a=n.createRadialGradient(o,r,t*e,o,r,t);a.addColorStop(0,\"rgba(0,0,0,1)\"),a.addColorStop(1,\"rgba(0,0,0,0)\"),n.fillStyle=a,n.fillRect(0,0,2*t,2*t)}return i},n=function(t){for(var e=[],i=t.min,n=t.max,o=t.radi,r=(t=t.data,Object.keys(t)),a=r.length;a--;)for(var s=r[a],h=Object.keys(t[s]),l=h.length;l--;){var u=h[l],c=t[s][u],d=o[s][u];e.push({x:s,y:u,value:c,radius:d})}return{min:i,max:n,data:e}};return t.prototype={renderPartial:function(t){t.data.length>0&&(this._drawAlpha(t),this._colorize())},renderAll:function(t){this._clear(),t.data.length>0&&(this._drawAlpha(n(t)),this._colorize())},_updateGradient:function(t){this._palette=e(t)},updateConfig:function(t){t.gradient&&this._updateGradient(t),this._setStyles(t)},setDimensions:function(t,e){this._width=t,this._height=e,this.canvas.width=this.shadowCanvas.width=t,this.canvas.height=this.shadowCanvas.height=e},_clear:function(){this.shadowCtx.clearRect(0,0,this._width,this._height),this.ctx.clearRect(0,0,this._width,this._height)},_setStyles:function(t){this._blur=0==t.blur?0:t.blur||t.defaultBlur,t.backgroundColor&&(this.canvas.style.backgroundColor=t.backgroundColor),this._width=this.canvas.width=this.shadowCanvas.width=t.width||this._width,this._height=this.canvas.height=this.shadowCanvas.height=t.height||this._height,this._opacity=255*(t.opacity||0),this._maxOpacity=255*(t.maxOpacity||t.defaultMaxOpacity),this._minOpacity=255*(t.minOpacity||t.defaultMinOpacity),this._useGradientOpacity=!!t.useGradientOpacity},_drawAlpha:function(t){for(var e=this._min=t.min,n=this._max=t.max,o=(t=t.data||[]).length,r=1-this._blur;o--;){var a,s=t[o],h=s.x,l=s.y,u=s.radius,c=Math.min(s.value,n),d=h-u,p=l-u,m=this.shadowCtx;this._templates[u]?a=this._templates[u]:this._templates[u]=a=i(u,r);var f=(c-e)/(n-e);m.globalAlpha=f<.01?.01:f,m.drawImage(a,d,p),d<this._renderBoundaries[0]&&(this._renderBoundaries[0]=d),p<this._renderBoundaries[1]&&(this._renderBoundaries[1]=p),d+2*u>this._renderBoundaries[2]&&(this._renderBoundaries[2]=d+2*u),p+2*u>this._renderBoundaries[3]&&(this._renderBoundaries[3]=p+2*u)}},_colorize:function(){var t=this._renderBoundaries[0],e=this._renderBoundaries[1],i=this._renderBoundaries[2]-t,n=this._renderBoundaries[3]-e,o=this._width,r=this._height,a=this._opacity,s=this._maxOpacity,h=this._minOpacity,l=this._useGradientOpacity;t<0&&(t=0),e<0&&(e=0),t+i>o&&(i=o-t),e+n>r&&(n=r-e);for(var u=this.shadowCtx.getImageData(t,e,i,n),c=u.data,d=c.length,p=this._palette,m=3;m<d;m+=4){var f,_=c[m],g=4*_;if(g)f=a>0?a:_<s?_<h?h:_:s,c[m-3]=p[g],c[m-2]=p[g+1],c[m-1]=p[g+2],c[m]=l?p[g+3]:f}u.data=c,this.ctx.putImageData(u,t,e),this._renderBoundaries=[1e3,1e3,0,0]},getValueAt:function(t){var e=this.shadowCtx.getImageData(t.x,t.y,1,1).data[3],i=this._max,n=this._min;return Math.abs(i-n)*(e/255)>>0},getDataURL:function(){return this.canvas.toDataURL()}},t}(),o=(t=!1,\"canvas2d\"===e.defaultRenderer&&(t=n),t),r={merge:function(){for(var t={},e=arguments.length,i=0;i<e;i++){var n=arguments[i];for(var o in n)t[o]=n[o]}return t}},a=function(){function t(){var t=this._config=r.merge(e,arguments[0]||{});if(this._coordinator=new n,t.plugin){var s=t.plugin;if(!e.plugins[s])throw new Error(\"Plugin '\"+s+\"' not found. Maybe it was not registered.\");var h=e.plugins[s];this._renderer=new h.renderer(t),this._store=new h.store(t)}else this._renderer=new o(t),this._store=new i(t);a(this)}var n=function(){function t(){this.cStore={}}return t.prototype={on:function(t,e,i){var n=this.cStore;n[t]||(n[t]=[]),n[t].push(function(t){return e.call(i,t)})},emit:function(t,e){var i=this.cStore;if(i[t])for(var n=i[t].length,o=0;o<n;o++){(0,i[t][o])(e)}}},t}(),a=function(t){var e=t._renderer,i=t._coordinator,n=t._store;i.on(\"renderpartial\",e.renderPartial,e),i.on(\"renderall\",e.renderAll,e),i.on(\"extremachange\",function(e){t._config.onExtremaChange&&t._config.onExtremaChange({min:e.min,max:e.max,gradient:t._config.gradient||t._config.defaultGradient})}),n.setCoordinator(i)};return t.prototype={addData:function(){return this._store.addData.apply(this._store,arguments),this},removeData:function(){return this._store.removeData&&this._store.removeData.apply(this._store,arguments),thi...
  config/environments/production.rb:19:in `block in <top (required)>'
    Uglifier.new(harmony: true).compile(File.read("public/lib/leaflet-environmental-layers/dist/LeafletEnvironmentalLayers.js"))
  config/environments/production.rb:1:in `<top (required)>'
    Plots2::Application.configure do
  config/environment.rb:5:in `<top (required)>'
    Plots2::Application.initialize!
...
(72 additional frame(s) were not displayed)

[jywarren]

Does this mean it's on character 439 of this string?

JSON::ParserError: 439: unexpected token at '{"code":"!function(){function t(e,i,n){function o(a,s){if(!i[a]){if(!e[a]){var h=\"function\"==typeof require&&require;if(!s&&h)return h(a,!0);if(r)return r(a,!0);var l=new Error(\"Cannot find module '\"+a+\"'\");throw l.code=\"MODULE_NOT_FOUND\",l}var u=i[a]={exports:{}};e[a][0].call(u.exports,function(t){return o(e[a][1][t]||t)},u,u.exports,t,e,i,n)}return i[a].exports}for(var r=\"function\"==typeof require&&require,a=0;a<n.length;a++)o(n[a]);return o}return t}()({1:[function(t,e){var i,n,o;i=\"h337\",n=this,o=function(){var t,e={defaultRadius:40,defaultRenderer:\"canvas2d\",defaultGradient:{.25:\"rgb(0,0,255)\",.55:\"rgb(0,255,0)\",.85:\"yellow\",1:\"rgb(255,0,0)\"},defaultMaxOpacity:1,defaultMinOpacity:0,defaultBlur:.85,defaultXField:\"x\",defaultYField:\"y\",defaultValueField:\"value\",plugins:{}},i=function(){var t=function(t){this._coordinator={},this._data=[],this._radi=[],this._min=10,this._max=1,this._xField=t.xField||t.defaultXField,this._yField=t.yField||t.defaultYField,this._valueField=t.valueField||t.defaultValueField,t.radius&&(this._cfgRadius=t.radius)},i=e.defaultRadius;return t.prototype={_organiseData:function(t,e){var n=t[this._xField],o=t[this._yField],r=this._radi,a=this._data,s=this._max,h=this._min,l=t[this._valueField]||1,u=t.radius||this._cfgRadius||i;a[n]||(a[n]=[],r[n]=[]),a[n][o]?a[n][o]+=l:(a[n][o]=l,r[n][o]=u);var c=a[n][o];return c>s?(e?this.setDataMax(c):this._max=c,!1):c<h?(e?this.setDataMin(c):this._min=c,!1):{x:n,y:o,value:l,radius:u,min:h,max:s}},_unOrganizeData:function(){var t=[],e=this._data,i=this._radi;for(var n in e)for(var o in e[n])t.push({x:n,y:o,radius:i[n][o],value:e[n][o]});return{min:this._min,max:this._max,data:t}},_onExtremaChange:function(){this._coordinator.emit(\"extremachange\",{min:this._min,max:this._max})},addData:function(){if(arguments[0].length>0)for(var t=arguments[0],e=t.length;e--;)this.addData.call(this,t[e]);else{var i=this._organiseData(arguments[0],!0);i&&(0===this._data.length&&(this._min=this._max=i.value),this._coordinator.emit(\"renderpartial\",{min:this._min,max:this._max,data:[i]}))}return this},setData:function(t){var e=t.data,i=e.length;this._data=[],this._radi=[];for(var n=0;n<i;n++)this._organiseData(e[n],!1);return this._max=t.max,this._min=t.min||0,this._onExtremaChange(),this._coordinator.emit(\"renderall\",this._getInternalData()),this},removeData:function(){},setDataMax:function(t){return this._max=t,this._onExtremaChange(),this._coordinator.emit(\"renderall\",this._getInternalData()),this},setDataMin:function(t){return this._min=t,this._onExtremaChange(),this._coordinator.emit(\"renderall\",this._getInternalData()),this},setCoordinator:function(t){this._coordinator=t},_getInternalData:function(){return{max:this._max,min:this._min,data:this._data,radi:this._radi}},getData:function(){return this._unOrganizeData()}},t}(),n=function(){function t(t){var i=t.container,n=this.shadowCanvas=document.createElement(\"canvas\"),o=this.canvas=t.canvas||document.createElement(\"canvas\"),r=(this._renderBoundaries=[1e4,1e4,0,0],getComputedStyle(t.container)||{});o.className=\"heatmap-canvas\",this._width=o.width=n.width=t.width||+r.width.replace(/px/,\"\"),this._height=o.height=n.height=t.height||+r.height.replace(/px/,\"\"),this.shadowCtx=n.getContext(\"2d\"),this.ctx=o.getContext(\"2d\"),o.style.cssText=n.style.cssText=\"position:absolute;left:0;top:0;\",i.style.position=\"relative\",i.appendChild(o),this._palette=e(t),this._templates={},this._setStyles(t)}var e=function(t){var e=t.gradient||t.defaultGradient,i=document.createElement(\"canvas\"),n=i.getContext(\"2d\");i.width=256,i.height=1;var o=n.createLinearGradient(0,0,256,1);for(var r in e)o.addColorStop(r,e[r]);return n.fillStyle=o,n.fillRect(0,0,256,1),n.getImageData(0,0,256,1).data},i=function(t,e){var i=document.createElement(\"canvas\"),n=i.getContext(\"2d\"),o=t,r=t;if(i.width=i.height=2*t,1==e)n.beginPath(),n.arc(o,r,t,0,2*Math.PI,!1),n.fillStyle=\"rgba(0,0,0,1)\",n.fill();else{var a=n.createRadialGradient(o,r,t*e,o,r,t);a.addColorStop(0,\"rgba(0,0,0,1)\"),a.addColorStop(1,\"rgba(0,0,0,0)\"),n.fillStyle=a,n.fillRect(0,0,2*t,2*t)}return i},n=function(t){for(var e=[],i=t.min,n=t.max,o=t.radi,r=(t=t.data,Object.keys(t)),a=r.length;a--;)for(var s=r[a],h=Object.keys(t[s]),l=h.length;l--;){var u=h[l],c=t[s][u],d=o[s][u];e.push({x:s,y:u,value:c,radius:d})}return{min:i,max:n,data:e}};return t.prototype={renderPartial:function(t){t.data.length>0&&(this._drawAlpha(t),this._colorize())},renderAll:function(t){this._clear(),t.data.length>0&&(this._drawAlpha(n(t)),this._colorize())},_updateGradient:function(t){this._palette=e(t)},updateConfig:function(t){t.gradient&&this._updateGradient(t),this._setStyles(t)},setDimensions:function(t,e){this._width=t,this._height=e,this.canvas.width=this.shadowCanvas.width=t,this.canvas.height=this.shadowCanvas.height=e},_clear:function(){this.shadowCtx.clearRect(0,0,this._width,this._height),this.ctx.clearRect(0,0,this._width,this._height)},_setStyles:function(t){this._blur=0==t.blur?0:t.blur||t.defaultBlur,t.backgroundColor&&(this.canvas.style.backgroundColor=t.backgroundColor),this._width=this.canvas.width=this.shadowCanvas.width=t.width||this._width,this._height=this.canvas.height=this.shadowCanvas.height=t.height||this._height,this._opacity=255*(t.opacity||0),this._maxOpacity=255*(t.maxOpacity||t.defaultMaxOpacity),this._minOpacity=255*(t.minOpacity||t.defaultMinOpacity),this._useGradientOpacity=!!t.useGradientOpacity},_drawAlpha:function(t){for(var e=this._min=t.min,n=this._max=t.max,o=(t=t.data||[]).length,r=1-this._blur;o--;){var a,s=t[o],h=s.x,l=s.y,u=s.radius,c=Math.min(s.value,n),d=h-u,p=l-u,m=this.shadowCtx;this._templates[u]?a=this._templates[u]:this._templates[u]=a=i(u,r);var f=(c-e)/(n-e);m.globalAlpha=f<.01?.01:f,m.drawImage(a,d,p),d<this._renderBoundaries[0]&&(this._renderBoundaries[0]=d),p<this._renderBoundaries[1]&&(this._renderBoundaries[1]=p),d+2*u>this._renderBoundaries[2]&&(this._renderBoundaries[2]=d+2*u),p+2*u>this._renderBoundaries[3]&&(this._renderBoundaries[3]=p+2*u)}},_colorize:function(){var t=this._renderBoundaries[0],e=this._renderBoundaries[1],i=this._renderBoundaries[2]-t,n=this._renderBoundaries[3]-e,o=this._width,r=this._height,a=this._opacity,s=this._maxOpacity,h=this._minOpacity,l=this._useGradientOpacity;t<0&&(t=0),e<0&&(e=0),t+i>o&&(i=o-t),e+n>r&&(n=r-e);for(var u=this.shadowCtx.getImageData(t,e,i,n),c=u.data,d=c.length,p=this._palette,m=3;m<d;m+=4){var f,_=c[m],g=4*_;if(g)f=a>0?a:_<s?_<h?h:_:s,c[m-3]=p[g],c[m-2]=p[g+1],c[m-1]=p[g+2],c[m]=l?p[g+3]:f}u.data=c,this.ctx.putImageData(u,t,e),this._renderBoundaries=[1e3,1e3,0,0]},getValueAt:function(t){var e=this.shadowCtx.getImageData(t.x,t.y,1,1).data[3],i=this._max,n=this._min;return Math.abs(i-n)*(e/255)>>0},getDataURL:function(){return this.canvas.toDataURL()}},t}(),o=(t=!1,\"canvas2d\"===e.defaultRenderer&&(t=n),t),r={merge:function(){for(var t={},e=arguments.length,i=0;i<e;i++){var n=arguments[i];for(var o in n)t[o]=n[o]}return t}},a=function(){function t(){var t=this._config=r.merge(e,arguments[0]||{});if(this._coordinator=new n,t.plugin){var s=t.plugin;if(!e.plugins[s])throw new Error(\"Plugin '\"+s+\"' not found. Maybe it was not registered.\");var h=e.plugins[s];this._renderer=new h.renderer(t),this._store=new h.store(t)}else this._renderer=new o(t),this._store=new i(t);a(this)}var n=function(){function t(){this.cStore={}}return t.prototype={on:function(t,e,i){var n=this.cStore;n[t]||(n[t]=[]),n[t].push(function(t){return e.call(i,t)})},emit:function(t,e){var i=this.cStore;if(i[t])for(var n=i[t].length,o=0;o<n;o++){(0,i[t][o])(e)}}},t}(),a=function(t){var e=t._renderer,i=t._coordinator,n=t._store;i.on(\"renderpartial\",e.renderPartial,e),i.on(\"renderall\",e.renderAll,e),i.on(\"extremachange\",function(e){t._config.onExtremaChange&&t._config.onExtremaChange({min:e.min,max:e.max,gradient:t._config.gradient||t._config.defaultGradient})}),n.setCoordinator(i)};return t.prototype={addData:function(){return this._store.addData.apply(this._store,arguments),this},removeData:function(){return this._store.removeData&&this._store.removeData.apply(this._store,arguments),thi...

[jywarren]

Wow this actually looks like an unescaped quotation mark:

s = '{"code":"!function(){function t(e,i,n){function o(a,s){if(!i[a]){if(!e[a]){var h=\"function\"==typeof require&&require;if(!s&&h)return h(a,!0);if(r)return r(a,!0);var l=new Error(\"Cannot find module '\"

this segment specifically:

var l=new Error(\"Cannot find module '\"

We might search for this online maybe? It seems like it could be related to our Webpacker/React code?

[Elukoye]

Hi @jywarren ,I want to work on this.

[RuthNjeri]

Thanks for reaching out @Elukoye, please go ahead and work on it if you would like.

[Elukoye]

@RuthNjeri @jywarren, sorry I haven't been active, had to fix my machine. It's all done, looking forward to picking this up.