Kibana: Getting Fatal Error when zooming out on map on a Dashboard in Kibana

[jvernon214]

Receiving a Fatal Error when zooming out on the map or using Fit Data Bound. This happens when I am using the map on my dashboard. There is a screenshot attached to see the error.

Errors on the screen:

• Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. (https://fa47af10cc3745419ba22683aeacb14e.us-central1.gcp.cloud.es.io:9243/bundles/vendors.bundle.js:8)
• Version: 6.3.0
  Build: 17230
• Error: Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. (https://fa47af10cc3745419ba22683aeacb14e.us-central1.gcp.cloud.es.io:9243/bundles/vendors.bundle.js:8)
  at window.onerror (https://fa47af10cc3745419ba22683aeacb14e.us-central1.gcp.cloud.es.io:9243/bundles/commons.bundle.js:3:778104)

[jvernon214]

cc: @alexfrancoeur

[Kvrepo]

We are facing the same issue. Any update on this?

[alexfrancoeur]

@aaronjcaldwell @thomasneirynck @timroes any idea what might be causing this?

[timroes]

This error looks to me like maps are failing in case the element they want to draw in is 0 width or 0 height. The visualization infrastructure current doesn't (and never did) prevent a chart from drawing in a 0 width/height container. So if maps are having that issues when drawing into 0 width/height containers, they should check the element size before drawing into it.

We could think about making a safe guard against that into the visualization infrastructure, but this might be a larger change effecting all visualizations, so I want to carefully consider that. For actually fixing that issue, I would recommend, that maps will actually check their container before drawing into it, e.g. see the vislib implementation for an example: https://github.com/elastic/kibana/blob/master/src/ui/public/vis/vis_types/vislib_vis_type.js#L64:L66

@elastic/kibana-gis feel free to add me as a reviewer for that PR

[thomasneirynck]

thanks @timroes. This error comes from Leaflet (or maybe heatmap plugin, which is a 3rd party overlay). Leaflet manages the rendering of the canvas, so if we cannot detect the 0x0 size of the DOM-container before Leaflet does (and I don't think the visualization infrastructure currently allows this), we'll have to find another approach.

I think this might be a regression, or at least looks similar to https://github.com/elastic/kibana/issues/6343, as this was fixed once before. This might be because of upgrading to Leaflet 1.3 which introduces canvas-rendering (and likely the source of the drawImage calls for the tiles).

I will look into it, please stay tuned, thx

[jvernon214]

@thomasneirynck @timroes thanks for the update. I have an active cloud cluster of mine that does this, so if you need to test against a kibana instance let me know.

[thomasneirynck]

@jvernon214 that's great, thx, I'll ping you if I can't repro here on my end

[jvernon214]

cc: @kyreddie

[thomasneirynck]

@jvernon214 was that dashboard an upgrade from an earlier 5.x dashboard?

[jvernon214]

@thomasneirynck it was not. It was a fresh 6.3.0 install

[thomasneirynck]

@jvernon214 I'm having some trouble reproducing this on my end (chrome 65/ubuntu 16), trying on master branches and 6.3 release. Can you ping me for details on your cloud instance? (see my github-profile for contact info) thx!

[timroes]

https://github.com/elastic/kibana/issues/20400 might have some additional information on how to reproduce this i.e. maximize other visualizations on the same dashboard

[thomasneirynck]

This issue arises when:

1."Change precision on map zoom" is unchecked

1. a high precision-level is chosen (5+)
2. The "heatmap" map-type is selected

It seems to be easiest to reproduce on OSX. We're looking into a more robust fix for this.

There are two different work-arounds to avoid the issue:

1. Keep the "Change precision on map zoom"-box checked. When left checked, Kibana chooses a more optimal precision level given the current scale of the map. It reduces the size of the data that needs to be queried. It also ensures the geohash-cells are large enough to have a larger than 0x0 dimension (depends on rounding). This is the recommended work-around.
2. Use the "scaled circle markers" instead of the heatmap visualization. This will create a map with "bubbles". This does not actually reduce the amount of data that Kibana is requesting.

[DBarthe]

Hello,
This issue is affecting others components on the dashboard as well, such as when trying to full-screen-expand any other visualization.

[alexfrancoeur]

@DBarthe what version of Kibana are you using?

[DBarthe]

@alexfrancoeur I'm using 6.5.4. It also happened with 6.5.0.

To reproduce, create a dashboard with two visualizations :

• a geopoint heatmap
• any other second visualization

Then click on "fullscreen" on the second visualization

[alexfrancoeur]

thanks @DBarthe! This sounds like a regression. @elastic/kibana-app & @elastic/kibana-gis it looks like we started some discussions around a PR, but I don't see anything linked. Is this something we can address in 6.x?

[anottrott]

I am getting a similar error when attempting to "Full Screen" Visualizations on my dashboards in Version 6.6

This is coming from clicking the "Full Screen" under the three buttons at the top of the visualization in the dashboard

[anottrott]

I found this interesting blog on Canvas, possibly a simple fix to the issue?
https://taditdash.wordpress.com/2016/10/04/uncaught-indexsizeerror-failed-to-execute-getimagedata-on-canvasrenderingcontext2d-the-source-width-is-0/

[anottrott]

I found a workaround for 6.6 that solves this issue
This Error is coming from ./dlls/vendors.bundle.dll.js Line 149. The CanvasRenderingContext2D method getImageData() of the Canvas 2D API returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
The error is being caused by the sw and/or sh parameter values being passed as 0. This can be resolved by checking the values of sw and sh prior to passing them to the getImageData() method

Workaround as follows

1. Search ./dlls/vendors.bundle.dll.js for
   var n=i.getImageData(0,0,this._width, this._height);return
2. Make the following modification to this segment
   var imgWidth = ((this._width == 0) ? 500 : this._width); var imgHeight = ((this._height == 0) ? 500 : this._height); var n=i.getImageData(0,0,imgWidth, imgHeight);return
3. Stop the Kibana process
4. Delete the 'optimize' directory
5. Restart the Kibana process

[stacey-gammon]

fwiw I think I am hitting this when adding a new ci test to master - https://github.com/elastic/kibana/pull/40826

[thomasneirynck]

This is an issue with the Leaflet heatmap plugin that Kibana uses https://github.com/Leaflet/Leaflet.heat/issues/110.

There's actually an outstanding PR that addresses the problem https://github.com/mourner/simpleheat/pull/34 but which has not merged yet.

Ideally, we can get this fixed upstream. Please stay tuned thanks.

[Dumbaz]

I´ve asked around in the issues upstream, I hope something will move there soonish.

[nreese]

@Dumbaz What version of Kibana are you running? The maps application uses mapbox and does not have this issue. The maps application has been embeddable in dashboard since 7.2 release

[Dumbaz]

@nreese Thanks for the hint! The cluster in question is still on 6.8 unfortunately, Will keep it in mind for after the upgrade, we plan to go to 7.7 soonish.