Uncaught TypeError: Cannot read property 'style' of null

[Crashillo]

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

TypeError: Cannot read property 'style' of null
  File "webpack:https:///./node_modules/d3/node_modules/d3-selection/src/selection/style.js", line 33, in styleValue
      return node.style.getPropertyValue(name)
  File "webpack:https:///./node_modules/d3/node_modules/d3-selection/src/selection/style.js", line 29, in [anonymous]
          : styleValue(this.node(), name);
  File "webpack:https:///./app/javascript/lib/visualizations/modules/lines_execution.js", line 425, in VisLinesExecution._width
        return parseInt(d3.select(this.container).style('width'));
  File "webpack:https:///./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:https:///./app/javascript/lib/visualizations/modules/lines_execution.js", line 55, in VisLinesExecution.getData
          this.setScales();
  File "webpack:https:///./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:https:///./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:https:///./node_modules/d3-request/src/request.js", line 40, in respond
          event.call("load", request, result);

[Crashillo]

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]

I could trace this error to:

gobierto/app/javascript/gobierto_budgets/modules/application.js

Lines 51 to 62 in 9232108

	window.addEventListener("resize", _.debounce(function () {
	new VisSlider('.timeline', window.budgetLevels);
	visBubblesExpense.resize();
	visBubblesIncome.resize();
	if (window.innerWidth >= 1024) {
	new VisBubbleLegend('.bubble_legend');
	} else {
	$('.bubble_legend svg').remove();
	}
	}, 250));

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: #2825 and #1959