search

PopulateTools / gobierto

Plataforma de gobierno abierto open source
https://gobierto.es
GNU Affero General Public License v3.0
74 stars 32 forks source link

Uncaught TypeError: Cannot read property 'style' of null #2662

Open Crashillo opened 4 years ago

Crashillo commented 4 years ago

View details in Rollbar: https://rollbar.com/Populate/gobierto/items/2776/


TypeError: Cannot read property 'style' of null
  File "webpack:///./node_modules/d3/node_modules/d3-selection/src/selection/style.js", line 33, in styleValue
      return node.style.getPropertyValue(name)
  File "webpack:///./node_modules/d3/node_modules/d3-selection/src/selection/style.js", line 29, in [anonymous]
          : styleValue(this.node(), name);
  File "webpack:///./app/javascript/lib/visualizations/modules/lines_execution.js", line 425, in VisLinesExecution._width
        return parseInt(d3.select(this.container).style('width'));
  File "webpack:///./app/javascript/lib/visualizations/modules/lines_execution.js", line 89, in VisLinesExecution.setScales
        this.width = this._width() - this.margin.left - this.margin.right;
  File "webpack:///./app/javascript/lib/visualizations/modules/lines_execution.js", line 55, in VisLinesExecution.getData
          this.setScales();
  File "webpack:///./node_modules/d3-request/src/request.js", line 115, in send
          if (callback != null) request.on("error", callback).on("load", function(xhr) { callback(nul...
  File "webpack:///./node_modules/d3-dispatch/src/dispatch.js", line 57, in call
        for (t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);
  File "webpack:///./node_modules/d3-request/src/request.js", line 40, in respond
          event.call("load", request, result);
Crashillo commented 4 years ago

All legacy charts with something like: d3.select(this.container).style(...) must be refactored. ~Provide just a fallback when this.container is null~.

UPDATE It comes up after d3.select call, therefore, the fallback must be: d3.select(this.container).node() ? d3.select(this.container).style(...) : 0

Crashillo commented 4 years ago

I could trace this error to: https://github.com/PopulateTools/gobierto/blob/923210839403e19d2de1b6f19304272311359585/app/javascript/gobierto_budgets/modules/application.js#L51-L62

When the event resize is triggered, the DOM is not ready yet to call jQuery methods or the classes. This is quite common on mobile devices as you use to switch between portrait and landscape modes.

It's necessary to refactor the DOM access, to check if the node actually exists before apply any function to it.

Related issues: https://github.com/PopulateTools/gobierto/issues/2825 and https://github.com/PopulateTools/gobierto/issues/1959