Skip to content
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

Mermaid diagrams are broken #31960

Closed
NanoSector opened this issue Feb 28, 2022 · 61 comments
Closed

Mermaid diagrams are broken #31960

NanoSector opened this issue Feb 28, 2022 · 61 comments
Assignees
Labels
area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes kind/bug Categorizes issue or PR as related to a bug. lifecycle/frozen Indicates that an issue or PR should not be auto-closed due to staleness. priority/important-longterm Important over the long term, but may not be staffed and/or may need multiple releases to complete. triage/accepted Indicates an issue or PR is ready to be actively worked on.

Comments

@NanoSector
Copy link

This is a Bug Report

Problem:
The graphs on the Ingress page are broken in Firefox, but seem to work properly in Chromium. I am unsure if this happens on other pages as well.

Firefox:
Screenshot_20220228_084718

Chromium:
Screenshot_20220228_084802

Proposed Solution:
The graphs should be working in Firefox, possibly by fixing the unknown "syntax error".

Page to Update:
https://kubernetes.io/docs/concepts/services-networking/ingress/

Additional Information:

  • Firefox 97.0.1
  • Chromium 98
  • Ubuntu 20.04.4
@NanoSector NanoSector added the kind/bug Categorizes issue or PR as related to a bug. label Feb 28, 2022
@k8s-ci-robot k8s-ci-robot added the needs-triage Indicates an issue or PR lacks a `triage/foo` label and requires one. label Feb 28, 2022
@jihoon-seo
Copy link
Member

jihoon-seo commented Feb 28, 2022

For me:

  • Ubuntu 18.04, Firefox 97.0 (64-bit)
    (I cannot reproduce on here)
    image
  • Windows 10, Firefox 97.0.1 (latest) (64-bit)
    (I cannot reproduce on here)
    image

I googled and found some links:

@sftim
Copy link
Contributor

sftim commented Feb 28, 2022

I can reproduce this using Firefox 97.0 on Ubuntu

/triage accepted
/priority important-longterm
/area web-development

@k8s-ci-robot k8s-ci-robot added triage/accepted Indicates an issue or PR is ready to be actively worked on. priority/important-longterm Important over the long term, but may not be staffed and/or may need multiple releases to complete. area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes and removed needs-triage Indicates an issue or PR lacks a `triage/foo` label and requires one. labels Feb 28, 2022
@NanoSector
Copy link
Author

I can consistently reproduce this on macOS 12.2.1.

image

This is a fresh Firefox installation without any add-ons.

However, switching to another network seems to fix the issue. Switching to my phone's tethered 4G network causes it to load properly in Firefox on macOS, switching back to our office network breaks it again.

I cannot find any console logs and network requests seem to successfully go through as well. Downloading mermaid.min.js on both networks and comparing hashes results in the same hash for both files.

Artificially throttling the request to "Regular 4G" using Firefox's developer tools seems to fix the issue on our office network. Maybe it is a race condition? Your first link seems to suggest a fix is published, maybe an update of the site generation tools would fix this?

@sftim
Copy link
Contributor

sftim commented Mar 2, 2022

/retitle Mermaid graphs are broken (replicable with Firefox)

@k8s-ci-robot k8s-ci-robot changed the title Graphs on the Ingress pages are broken in Firefox Mermaid graphs are broken (replicable with Firefox) Mar 2, 2022
@sftim
Copy link
Contributor

sftim commented Mar 8, 2022

/retitle Mermaid diagrams are broken (replicable with Firefox)

@k8s-ci-robot k8s-ci-robot changed the title Mermaid graphs are broken (replicable with Firefox) Mermaid diagrams are broken (replicable with Firefox) Mar 8, 2022
@chrismetz09
Copy link
Contributor

Cannot reproduce using firefox 95.0.2 (64-bit) on mac 10.15.7.
Cannot reproduce using firefox 98.0 on mac 10.15.7.
Cannot reproduce in mermaid live editor that uses Mermaid 8.14.0

@sftim, thoughts on this?

@chrismetz09
Copy link
Contributor

/assign @chrismetz09

@sftim
Copy link
Contributor

sftim commented Mar 8, 2022

I can reproduce this reliably but not on first page load.

@sftim
Copy link
Contributor

sftim commented Mar 8, 2022

This is a multihomed PC by the way; 2 IPv4 addresses and 4 IPv6 addresses, so the browser will be using something similar to Happy Eyeballs.

@chrismetz09
Copy link
Contributor

Random number of reloads DOES produce the error using firefox 98.0 on mac 10.15.7.
Random number of reloads DOES produce the error using safari Version 14.1 (15611.1.21.161.7, 15611) on mac 10.15.7.

I was able to reproduce @NanoSector observation describing firefox 4G throttling that seems to mitigate the problem.

@chrismetz09
Copy link
Contributor

@sftim @NanoSector @jihoon-seo
Possible fix (but still testing):

  1. Refreshing page will show Syntax error in mermaid graph sometimes #3232 noted ...If Mermaid.js is loaded from cache, Mermaid will sometimes not pick up the configuration and start processing before one can tell it to not startOnLoad. ...

  2. Looked into Firefox loading pages from cache after latest update.

  3. @sftim observed I can reproduce this reliably but not on first page load. Does this mean initial page load IS NOT from cache? I think so? I can reproduce error after initial page load by hitting multiple subsequent page reloads.

  4. Tried shift + Reload described in Firefox loading pages from cache after latest update. I could not reproduce error.

  5. There is a No-Cache No-Store for Selected Hosts add-on. Have not tested this yet.

Still testing and will report back.

@chrismetz09
Copy link
Contributor

  1. Tested [No-Cache No-Store for Selected Hosts add-on.). Did not work. Removed add-on then reproduced error.

Do we want to tell users to install add-on before using?

  1. I could not reproduce error using Shift + command/R in Firefox.

@sftim, guidance requested. Options I see are:

a) close the issue with a firefox mitigation note. Also add note in Diagram Guide.

b) Pass it on to web-dev folks?

tx

@sftim
Copy link
Contributor

sftim commented Mar 21, 2022

@chrismetz09 would you be willing to add this to the agenda for the next SIG Docs meeting and / or highlight this via Slack as an issue that needs attention?

@chrismetz09
Copy link
Contributor

Will do.

@chrismetz09
Copy link
Contributor

Updated to Mermaid 8.14.0 on test branch.

Replicated previously observed behavior:

  1. Chrome renders okay, although you do see rare mis-renders when pounding the reload button.
  2. FF shows frequent mis-renders. Shift + command R seems to clear the error and correctly renders the diagram.

As mentioined in very rare chrome occurrence and frequent FF reloads, you see the following:

Screen Shot 2022-04-12 at 10 31 43 AM


Verified checksums to ensure downloaded mermaid.min.js file is placed in proper /website/static/js directory.

➜  ~ curl https://unpkg.com/mermaid@8.14.0/dist/mermaid.min.js | shasum
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 1080k    0 1080k    0     0  5272k      0 --:--:-- --:--:-- --:--:-- 5298k
bb450af2b99ae0904a7264b06ef9d98017a8f417  -
➜  ~ shasum mermaid.min.js
bb450af2b99ae0904a7264b06ef9d98017a8f417  mermaid.min.js

@danieltharp
Copy link

Just noting this persists on Firefox 100.0b3 on the first load, and cleared up after a refresh..

@sftim
Copy link
Contributor

sftim commented Apr 13, 2022

Maybe Mermaid 9.0.0 would help?

@YoinkBird
Copy link

YoinkBird commented Feb 17, 2023

Confirmed for me too, using :

* chromium `108.0.5359.94-1~deb11u1`

* firefox-esr `102.6.0esr-1~deb11u1`

* System : debian bullseye

* [Sample page](https://kubernetes.io/docs/tasks/run-application/horizontal-pod-autoscale/)
  
  * Chromium
    ![image](https://user-images.githubusercontent.com/3980933/213699054-cc6369cb-3132-4261-805f-ee6808011b8c.png)
  * Firefox
    ![image](https://user-images.githubusercontent.com/3980933/213699245-74b40b67-60c0-47b7-99f0-1e5f2a770812.png)

As a plus, earlier today I had created like 5 mermaids to document a code. All of them worked fine (on firefox) using an online processor, like this one.

Confirmation
I encountered this as well; image loads in firefox private window but not a "normal" window.
Disabling the "DuckDuckGo Privacy Essentials" extension allowed the SVG to load.

image

Details:

  • firefox: Mozilla Firefox 110.0

Speculation
Not to over-speculate, but as an extra datapoint, "googletagmanager" is blocked by DuckDuckGo Privacy Essentials in a normal firefox window, but not in the private window. So this might be related to googletagmanager not being able to load:
image

@mrgiles
Copy link
Contributor

mrgiles commented Apr 20, 2023

I can confirm that The diagram How does a HorizontalPodAutoscaler work also fails to render in Firefox (112.0.1) in both standard and private modes.
Note: I don't have the DuckDuckGo Privacy Essentials extension installed.

@sftim
Copy link
Contributor

sftim commented Jul 23, 2023

If we have duplicates of this issue and either:

  • the person who filed the issue is happy to have it closed
  • it's been marked as a duplicate for over 15 days

then it's OK to close that duplicate issue - not this one - with an explanatory note.

@sftim
Copy link
Contributor

sftim commented Aug 18, 2023

Duplicated by #42625

@junktext
Copy link

FYI: I ran into this bug today and for me I figured out that the Privacy Badger v2023.10.31 extension in Firefox was causing issues with mermaid for some reason. Once I disabled Privacy Badger protection, the diagrams loaded up just fine. Privacy Badger was only detecting 3 potential trackers, which even if I manually allowed those connections to go through, the diagrams would still not work properly.

Screenshot from 2023-11-22 16-16-21

I was using Firefox v119.0.1 on Ubuntu Linux 22.04. The Kubernetes documentation page I saw this issue on today was here: https://kubernetes.io/docs/tasks/run-application/horizontal-pod-autoscale/

Lastly, for what it's worth when the diagram fails to load it mentions that mermaid v8.13.4 is used, but that was released two years ago on 2021-11-18. As of this writing, mermaid is on v10.6.1 (2023-11-06), so I'm wondering if a version upgrade for mermaid may help fix this bug?

@sftim
Copy link
Contributor

sftim commented Nov 22, 2023

Help is very welcome!

@sftim sftim pinned this issue Jan 2, 2024
@Gauravpadam
Copy link
Member

I'll help with this, This needs some debugging

@sftim
Copy link
Contributor

sftim commented Jan 9, 2024

Looks like we load the Mermaid script in two places. I'm not sure that's helpful.

See #44644 (review)

@Gauravpadam
Copy link
Member

Also see #44768

@brc
Copy link

brc commented Feb 6, 2024

Latest report details to help @chrismetz09 debug it:

  • Reproducible with latest 64-bit Firefox on Linux, v122.0.
  • Reproducible in Private Browsing mode with NO extensions enabled.
  • Must use non-cached page loads (i.e., bypass browser cache) to eventually get a successful render;
    • Once broken, can never get successful render when reloading from cache.
  • No apparent pattern to intermittent flapping;
    • Sometimes it renders every other load;
    • Sometimes it renders every 3rd, 4th, or 5th load;
    • It usually works within < 10 loads ("hard" reloads that bypass cache);
    • It never worked twice in a row.
  • Failures never indicated any problem with HTTP requests while inspecting network traffic with FF Web Developer Tools.
  • Problem is unrelated to Google Tag Manager (www.googletagmanager.com) because Mermaid will successfully render even when DNS resolution is blackholed for this domain query;
    • I use Pi-Hole to effectively block this domain.
  • I saw errors in the Developer Tools console about:
Source map error: Error: request failed with status 404
Resource URL: https://kubernetes.io/js/bootstrap-4.6.1.min.js
Source Map URL: bootstrap.min.js.map

    ...but these errors appeared even when the diagrams rendered successfully, AFAICT.

I have basically ignored Javascript since the 1990s (on purpose), so I am slow at debugging front-end issues across different frameworks and browser platforms.

Hope this helps.

@dennis-benzinger-hybris
Copy link
Contributor

Happens to me on Safari 17.4

For example on https://kubernetes.io/docs/concepts/scheduling-eviction/topology-spread-constraints/ :
image

A reload solved it for now

@sftim
Copy link
Contributor

sftim commented Aug 21, 2024

Are folks still seeing these symptoms?

@dennis-benzinger-hybris
Copy link
Contributor

I wasn't able to reproduce it today

@allan-kg
Copy link

allan-kg commented Aug 22, 2024

Are folks still seeing these symptoms?

I have checked today, and it is not occurring anymore, I tried, both in linux-x86_64 :

  • 115.14.0esr
  • 97.0 (downloaded from mozilla's ftp)
    image

The only console log was related to a button is null issue.

@sftim
Copy link
Contributor

sftim commented Aug 22, 2024

Let's treat this as fixed!

/close

@k8s-ci-robot
Copy link
Contributor

@sftim: Closing this issue.

In response to this:

Let's treat this as fixed!

/close

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

@sftim sftim unpinned this issue Aug 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes kind/bug Categorizes issue or PR as related to a bug. lifecycle/frozen Indicates that an issue or PR should not be auto-closed due to staleness. priority/important-longterm Important over the long term, but may not be staffed and/or may need multiple releases to complete. triage/accepted Indicates an issue or PR is ready to be actively worked on.
Projects
Status: Triage Accepted
Development

No branches or pull requests