Medusa: Menu not loading in Edge

[juliemars]

Describe the bug
In todays update if I go to the webpage then the menu that should appear in the upper right hand corner is missing as can be seen in the below image.

If I use Firefox then the menu appears.

To Reproduce
Steps to reproduce the behavior:

1. Log into Medusa using Edge from latest Windows 10
2. Menu doesn't load.

Expected behavior
Menu appears

Edge Log
I used F12 and under Console I have 8 errors shown:

[OmgImAlexis]

Possible duplicate? https://github.com/pymedusa/Medusa/issues/4772

[sharkykh]

I remember trying it on the latest Edge and couldn't reproduce.
@juliemars Try CTRL + F5. Should eliminate the errors.

[juliemars]

Hi Sharkykh thanks for the reply, I tried that and nothing the issue remains. I have also cleared cookies and cache and tried on multiple PC's and the issue remains. Works fine in Firefox though but not private browsing.

[sharkykh]

You should try the develop branch then, maybe we inadvertently fixed the underlying issue.
Use git if you're familiar with it, or enter your Github credentials in the general config (under advanced tab), and you should be able to checkout the develop branch (option is above the Github credentials).

[sharkykh]

@OmgImAlexis
I just noticed the Syntax Error in the vue-native-websocket library. You already moved that to Webpack, but I wonder why that is.

[juliemars]

@sharkykh and @OmgImAlexis I had some spare time today and tried to troubleshoot this further. I think I have a cause but not a solution.

I use a reverse proxy on NGINX to access the site if I navigate to the site using the internal IP, Port and base URL lets says http://127.0.0.1:8081/TV it works fine.

I changed the base URL in Medusa and the reverse proxy and it still never worked which makes me think it is something in the reverse proxy setup I have causing the issue.

I compared my proxy settings to the ones on https://github.com/pymedusa/Medusa/wiki/Reverse-Proxy-setup and the only difference was the top 2 lines mine has:

 location /TV/ {
    proxy_pass http://127.0.0.1:8081/TV/;

Which I expected, I am sure this is something simple but I cannot see what it is! if either of you have any ideas I would really appreciate it!

[sharkykh]

• I'm not familiar enough with setting up reverse proxies.
• Are you still getting errors on the browser's console?
• We already did much work on the develop branch (next version), but I can't say for sure if the next version will solve your issue since I can't figure out the issue.

[juliemars]

Hi Sharkykh no worries hopefully someone else can help with the reverse proxy bit.

When I navigate directly using the internal IP the syntax errors disappear

I will update as soon as it is available and let you know if it fixes it.

[p0psicles]

Well I can confirm, but for me it's already not loading the login page.

HTML1300: Navigation occurred.
login
Current window: proxy.server.nl/medusa/login
SCRIPT5022: SyntaxError
build.js (110,36)
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
eval code (2048) (7751,7)
SCRIPT5007: Unable to get property 'fn' of undefined or null reference
vender.min.js (1,7696)
SCRIPT5009: 'jQuery' is undefined
bootstrap-formhelpers.min.js (6,1)
SCRIPT5009: '$' is undefined
parsers.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
index.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
init.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
notifications.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
init.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
popular-shows.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
recommended-shows.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
trending-shows.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
init.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
index.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
post-process.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
restart.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
status.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
failed-downloads.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
index.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
init.js (1,1)
SCRIPT5009: 'MEDUSA' is undefined
subtitle-missed.js (1,1)
SCRIPT5009: 'jQuery' is undefined
browser.js (1,2)
SCRIPT5009: 'PNotify' is undefined
notifications.js (3,1)
SCRIPT5007: Unable to get property 'push' of undefined or null reference
login (237,1)
SCRIPT5007: Unable to get property 'push' of undefined or null reference
login (503,1)
SCRIPT5009: 'Vue' is undefined
login (508,13)
SCRIPT5007: Unable to get property 'forEach' of undefined or null reference
app.js (55,1)

Seems to have something to do with the WebSocket.

return r(e, [{ key: "connect", value: function value(e) {
          var t = this,
              n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
              o = n.protocol || "";return this.WebSocket = n.WebSocket || ("" === o ? new WebSocket(e) : new WebSocket(e, o)), "json" === this.format && ("sendObj" in this.WebSocket || (this.WebSocket.sendObj = function (e) {
            return t.WebSocket.send(JSON.stringify(e));
          })), this.WebSocket;

But unfortunately I can't trace it back to a source file.

[sharkykh]

Where did you get that websocket code?

Also, please check the first error:

SCRIPT5022: SyntaxError
build.js (110,36)

~I think that's a webpack builtin.~ I wonder what is the syntax error.

[OmgImAlexis]

@sharkykh is that trying to connect the websocket on the login page? If so it won't be authenticated, that may be the issue?

[p0psicles]

I cant see the syntax error. Anything i can check?

[sharkykh]

@OmgImAlexis It's possible that's the case on master, but not on develop.
@p0psicles I'm not sure :\

[p0psicles]

Im running develop. The syntax highlighted piece of code is from that error.

[p0psicles]

I'm changing this to bug prio high. As medusa is just not working at all with it.
But we have edge listed as a supported browser.

So either we should fix this asap.
Or remove it from the supported browsers.

@pymedusa/developers thoughts?

[sharkykh]

IMO it should be fixed rather than dropping support for Edge.

@p0psicles
Looks like it only affects reverse proxies and I don't have a setup to test this myself.
You can try commenting out the websocket code from ./src/store/index.js and rebuild the Webpack bundle.

And actually, looks like I was mistaken. The websocket is initialized on the /login page like all other pages. I don't know why I thought it didn't. So it could be the issue.

I have a hunch Edge doesn't support the full spec of the native WebSocket client:
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket#Browser_compatibility

[p0psicles]

I know that edge has troubles with unhandled promises or exceptions.
Maybe that's happening here, when using a reverse proxy?
I'm setting up a dev env on my win10 laptop.

[sharkykh]

@p0psicles It's possible, maybe the URL it tries to connect is incorrect, you should look for that when you're debugging.
And if you need it, this is the source of the minified code you sent earlier:
https://github.com/nathantsoi/vue-native-websocket/blob/v2.0.7/src/Observer.js#L21-L31

If you want to debug using that source, you can try changing this import:
https://github.com/pymedusa/Medusa/blob/74e1f148d4f305192767a2d057a7f01265543653/themes-default/slim/src/store/index.js#L3
to:

import VueNativeSock from 'vue-native-websocket/src/Main';

[p0psicles]

That didn't make any difference. Or at least it's still minified.

Drilled it down to this:

this is causing the error: new WebSocket(e)

Similar issue:
https://stackoverflow.com/questions/36667587/syntax-error-on-new-websocket-in-edge-internet-explorer

I think it's causing the error because of a colon.
wss://my.domain.com:/medusa/ws/ui

[p0psicles]

Yeah that fixed it. I'll clean up the branch and PR it.

[sharkykh]

@p0psicles
I agree with you.
Good job tracking it down!

[juliemars]

Thanks @p0psicles for looking at it, I appreciate it.

Thanks everyone else for the help on this one.

[sharkykh]

Fixed in develop with #4928.