New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maximum call stack size exceeded (when dashboard is zoomed out in Chrome) #6701

Open
mfkp opened this Issue Jan 14, 2018 · 8 comments

Comments

Projects
None yet
4 participants
@mfkp
Copy link

mfkp commented Jan 14, 2018

Ok, took me a while to figure out how to reproduce this, but hear me out :-)

This seems like it could be related to #2608 and #6408, but I didn't see any mention of what I found to be causing the issue.

So, I have the latest version of metabase set up and running (v0.27.2), and everything was working perfectly on my new dashboard. I only have 5 simple questions on the dashboard, so it's not an issue of data size.

The offending page is any dashboard.

Everything worked fine when I had the Chrome zoom level set at 100%. But then I hit ctrl + minus to zoom out to 90%, after which the page freezes up, and upon reloading the page, I get the "Maximum call stack size exceeded" message.

Also note that the page works at this zoom level when the chrome inspector is open, maybe indicating that if the size of the dashboard being rendered is smaller it will still work.

Once I zoomed back out to 100%, the page loads fine again.

Things to note about my setup:

Chrome 63.0.3239.132 (Official Build) (64-bit)
Windows 10

The machine is a Dell XPS 13, which has a HiDPI display (3200x1800), scaled at 200%.

Let me know if there's any other details that could help debug the issue, it's reproducible 100% of the time using the above steps :-)

@attekei

This comment has been minimized.

Copy link
Contributor

attekei commented Jan 22, 2018

@mfkp I'm unable to reproduce this on my dashboards, and stack traces posted in #6408 and #2608 aren't very helpful either 😢

I'd guess that this is a problem with some particular visualization (which I don't currently have in my test dashboards). Could you @mfkp try to check out if there's some specific dashboard card that is causing the problem? You could for instance create five dashboards where each dashboard contains one of your five questions and see which ones crash and which don't.

@mfkp

This comment has been minimized.

Copy link

mfkp commented Jan 22, 2018

Sure, I'll give it a shot when I'm back at my computer later today, but I would guess it's most likely the pie chart. Do you happen to have any of those on your dashboards?

@attekei

This comment has been minimized.

Copy link
Contributor

attekei commented Jan 22, 2018

@mfkp Thanks! Yes, I have some pie charts in one dashboard. I'll wait first if you can identify some systematic pattern and if not, I can continue testing with different dashboards 🙂

Actually I was just to able to reproduce the error in some of our internal dashboards, linking them here for other core team members:
https://stats.metabase.com/dashboard/15 (very consistent even when the zoom is 100%, actually changing to 90% fixes the problem 😅 has a pie chart in it)
https://stats.metabase.com/dashboard/61 (this was a random failure, there's just a single line graph but I'm unable to reproduce anymore...)

@mfkp

This comment has been minimized.

Copy link

mfkp commented Jan 23, 2018

Ok, so I've found a way to reproduce this consistently on my computer (although now I have to zoom out to 80% to get it to happen):

Also note that it's not just pie chart, I got it to happen for the "US states map", bar chart, data tables, and simple number displays (I assume all chart types would work but didn't test them all).

Grab a chart, put it on a dashboard near the bottom of the page (on my laptop, the bottom of the chart needs to be on the 10th row, but the size of the chart widget doesn't seem to matter). The page should be able to slightly scroll after you save the dashboard (so the pie chart should be at the bottom of the visible window or maybe slightly over).

Example (note the scroll bar):

image

Then hit ctrl + minus to zoom out a step or two (on this dashboard it freezes up for me at 80% zoom).

There seems to be some sort of javascript that dynamically resizes the widgets to fit the page, and that gets triggered on a page resize. Something is going tragically wrong when the page is resized with a widget near the bottom.

One other interesting thing to note is that if I bring out the chrome bookmarks bar (ctrl + shift + b), the problem doesn't happen anymore, presumably because of the different viewport height.

Tests using document.documentElement.clientHeight:

Height without chrome bookmark bar (problem height): 774px
Height with chrome bookmark bar (no problem height): 749px

Hopefully this helps!

@tlrobinson

This comment has been minimized.

Copy link
Member

tlrobinson commented Jan 23, 2018

@mfkp Could you tell me the clientWidth as well? Thanks.

@mfkp

This comment has been minimized.

Copy link

mfkp commented Jan 23, 2018

@tlrobinson:

document.documentElement.clientWidth:
1573px

@tlrobinson

This comment has been minimized.

Copy link
Member

tlrobinson commented Jan 24, 2018

I'm still unable to reproduce this. If anyone can reproduce it with a question from the "Sample Dataset" could you tell me the exact query and size/location on the dashboard grid, as well as your window.innerHeight and window.innerWidth (or document.documentElement.clientWidth/document.documentElement.clientHeight which I think are the same?)

Ideally you can send me the actual dashboard objects with card definition. Run this in the dev tools:

services.DashboardApi.get({ dashId: YOUR_DASHBOARD_ID }).then(dashboard => console.log(JSON.stringify(dashboard)))

@tlrobinson tlrobinson self-assigned this Jan 24, 2018

@mfkp

This comment has been minimized.

Copy link

mfkp commented Jan 24, 2018

Sure, I reproduced it using the sample dataset by making a simple number visualization:

image

Then I placed the widget on my dashboard like so:

image

After saving the dashboard, when I zoom out, I get this error in the dev tools:

image

The other stats you asked for:

window.innerHeight: 794
window.innerWidth: 1600
document.documentElement.clientHeight: 794
document.documentElement.clientWidth: 1583 (maybe this one is smaller because of the scrollbar?)

services.DashboardApi.get({ dashId: YOUR_DASHBOARD_ID }).then(dashboard => console.log(JSON.stringify(dashboard))) outputs:

{
  "description": null,
  "archived": false,
  "ordered_cards": [
    {
      "sizeX": 4,
      "series": [],
      "card": {
        "description": null,
        "archived": false,
        "table_id": 3,
        "result_metadata": [
          {
            "base_type": "type/Integer",
            "display_name": "count",
            "name": "count",
            "special_type": "type/Number"
          }
        ],
        "creator": {
          "email": "my@email.biz",
          "first_name": "Kyle",
          "last_login": "2018-01-14T03:25:22.272Z",
          "is_qbnewb": false,
          "is_superuser": true,
          "id": 1,
          "last_name": "Powers",
          "date_joined": "2018-01-14T00:17:52.807Z",
          "common_name": "Kyle Powers"
        },
        "database_id": 1,
        "enable_embedding": false,
        "collection_id": null,
        "query_type": "query",
        "name": "Count of People in Sample Dataset",
        "query_average_duration": 12,
        "creator_id": 1,
        "updated_at": "2018-01-24T22:37:58.397Z",
        "made_public_by_id": null,
        "embedding_params": null,
        "cache_ttl": null,
        "dataset_query": {
          "database": 1,
          "type": "query",
          "query": {
            "source_table": 3,
            "aggregation": [
              [
                "count"
              ]
            ]
          }
        },
        "id": 13,
        "display": "scalar",
        "visualization_settings": {},
        "created_at": "2018-01-24T22:36:56.533Z",
        "public_uuid": null
      },
      "updated_at": "2018-01-24T22:37:09.806Z",
      "col": 0,
      "id": 31,
      "parameter_mappings": [],
      "card_id": 13,
      "visualization_settings": {},
      "dashboard_id": 3,
      "created_at": "2018-01-24T22:37:09.711Z",
      "sizeY": 4,
      "row": 6
    }
  ],
  "creator": {
    "email": "my@email.biz",
    "first_name": "Kyle",
    "last_login": "2018-01-14T03:25:22.272Z",
    "is_qbnewb": false,
    "is_superuser": true,
    "id": 1,
    "last_name": "Powers",
    "date_joined": "2018-01-14T00:17:52.807Z",
    "common_name": "Kyle Powers"
  },
  "enable_embedding": false,
  "show_in_getting_started": false,
  "name": "Debug Board",
  "caveats": null,
  "creator_id": 1,
  "updated_at": "2018-01-24T22:41:06.085Z",
  "made_public_by_id": null,
  "embedding_params": null,
  "id": 3,
  "position": null,
  "parameters": [],
  "created_at": "2018-01-23T00:06:04.681Z",
  "public_uuid": null,
  "points_of_interest": null
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment