No arrows in servicemap

[甘蓝]

Our hubble is deployed offline. In console there are errors like:

mobx.esm.js:2227 [mobx] uncaught error in 'Reaction[Reaction]' TypeError: this.points.at is not a function
    at r.get (arrows.ts:30)
    at or (mobx.esm.js:1679)
    at e.t.computeValue_ (mobx.esm.js:1475)
    at e.t.trackAndCompute (mobx.esm.js:1452)
    at e.t.get (mobx.esm.js:1421)
    at e.t.getObservablePropValue_ (mobx.esm.js:4572)
    at r.get (mobx.esm.js:5067)
    at r.value (arrow.ts:133)
    at Wt (mobx.esm.js:1077)
    at r.buildPointsAroundSenderAndReceiver (mobx.esm.js:1065)

I am using version v0.12.0 with hubble-relay v1.14.2. Flows below in page are normally shown.

[Dima Kharitonov]

@yandzee can you take a look?

[Dima Kharitonov]

@nijich do you see no arrows all the time or it doesn’t show them only some time?

[甘蓝]

@nijich do you see no arrows all the time or it doesn’t show them only some time?

@geakstr Hi, it is all the time. And this problem for me exists for a long time for about a year. I still using v0.8.5 in the past time. Since we will do a large gap upgrade for cilium, we want update hubble as well.

I guess maybe this is because Array At is introduced in ES2022 and somewhere is not supported now. For me, changing computer or browser is still not working.

I am not familiar with frontend, but if I modify the this.points.at(0) this.points.at(-1) to this.points[0] and this.points[-1], the arrows show, but are not so good-looking.

[Dima Kharitonov]

Interesting, could you post a screenshot with this access to array by index patch, what do you mean not so good-looking?

[甘蓝]

Interesting, could you post a screenshot with this access to array by index patch, what do you mean not so good-looking?

after editing this file: /app/bundle.main.104f057a7d45238d9d45.js, it looks like:

If I change this.points[-1] to this.points[this.points.length-1], console gives another error log, no arrows either.

[mobx] uncaught error in 'Reaction[Reaction]' TypeError: u.at is not a function
    at r.value (arrow.ts:172)
    at Wt (mobx.esm.js:1077)
    at r.buildPointsAroundSenderAndReceiver (mobx.esm.js:1065)
    at arrows.ts:164
    at Map.forEach (<anonymous>)
    at a.get (arrows.ts:163)
    at or (mobx.esm.js:1679)
    at e.t.computeValue_ (mobx.esm.js:1475)
    at e.t.trackAndCompute (mobx.esm.js:1452)
    at e.t.get (mobx.esm.js:1421)

[Robin Hahling]

I still using v0.8.5 in the past time.

I'd suggest updating to v0.12.1, it's compatible even with older releases of Cilium.

[甘蓝]

I still using v0.8.5 in the past time.

I'd suggest updating to v0.12.1, it's compatible even with older releases of Cilium.

@rolinh I mean since there is problem with recent versions, I have to use v0.8.5.

This test in this issue is done with cilium v1.14.2 and hubble-ui v0.12.0.

[Dima Kharitonov]

What browser/OS do you use?

[甘蓝]

What browser/OS do you use?
@geakstr

failed on deepin linux (kernel 4.19.0)

• chromium 83.0.4103.116
• chromium 86.0.4240.198
• firefox 90.0.2

I ask my colleague to access the page, his computer works fine (chrome 92.0.4515.107 on windows 10) for v0.12.0 this time. It looks like causing by browser version? There is once a time we failed when testing maybe v0.10.0

[Tuktarov Renat]

Looks like these are kind of oldish versions of browsers, feels that at function at arrays is not presented there. Is there any chance you can switch to the newest version, at least chromium 92, because if not that means that we need to change our build target to old one, so that bundler could use polyfills for such cases..

[Dima Kharitonov]

These are pretty outdated browsers versions, Chromium 83 released in 2020, Firefox 90 is from 2021, you can check market share of browsers versions here: https://browsersl.ist/ If you prefer to stick with your current browser version you could tweak Hubble UI typescript/webpack config to something that would make final bundle compatible for your browser and build docker images.

[甘蓝]

OK, thanks you for your supports!