Tutor mfe plugin fresh startup error

Good day fellow Developers! I recently installed open edx tutor on a fresh instance. I followed the instructions on the open edx tutor documentation and everything seems to be working fine.

But there seems to be a problem with the tutor-MFE plugin. There are times that it works, and there are times that it don’t. For example, if I would click the “Profile” or “Account” tab here:

image

It would redirect me to the MFE_HOST. But on my end, there are times that it displays what is to be expected, but most of the time it crashes like this:

I just simply followed the directions in installing tutor and by default, mfe is installed. I disable it for quite some time, but when I visit the “Profile” or “Account” tab again, it crashes the same way like this:

Can anyone please help me? I’m pretty sure this discussion will help others as well. Thank you!

It’s hard to know the issue without looking at the logs, both the browser based logs (developer console) and tutor logs i.e. (tutor local logs --tail 10 -f) and then duplicate the bug.

UPDATE:
After using

tutor local logs --tail 10 -f

The log file says something like this:

lms_1 | 2022-08-20 12:18:26,428 INFO 7 [tracking] [user 4] [ip 112.207.109.56] logger.py:41 - {"name": "/account/settings", "context": {"user_id": 4, "path": "/account/settings", "course_id": "", "org_id": "", "enterprise_uuid": ""}, "username": "Engr_James", "session": "9244d954c2c9453d243975b84a5baf17", "ip": "112.207.109.56", "agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36 Edg/104.0.1293.54", "host": "test.tmtg-clone.click", "referer": "https://test.tmtg-clone.click/dashboard", "accept_language": "en-US,en;q=0.9", "event": "{\"GET\": {}, \"POST\": {}}", "time": "2022-08-20T12:18:26.427892+00:00", "event_type": "/account/settings", "event_source": "server", "page": null}

lms_1 | 2022-08-20 12:18:26,433 INFO 7 [openedx.core.djangoapps.cors_csrf.helpers] [user 4] [ip 112.207.109.56] helpers.py:64 - Origin 'https://test.tmtg-clone.click' was not in CORS_ORIGIN_WHITELIST; full referer was 'https://test.tmtg-clone.click/dashboard' and requested host was 'test.tmtg-clone.click'; CORS_ORIGIN_ALLOW_ALL=False

caddy_1 | {"level":"info","ts":1660997906.4398189,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_addr":"112.207.109.56:14868","proto":"HTTP/2.0","method":"GET","host":"test.tmtg-clone.click","uri":"/account/settings","tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","proto_mutual":true,"server_name":"test.tmtg-clone.click"}},"user_id":"","duration":0.025716977,"size":0,"status":302}

lms_1 | [pid: 7|app: 0|req: 7/17] 172.18.0.11 () {58 vars in 4427 bytes} [Sat Aug 20 12:18:26 2022] GET /account/settings => generated 0 bytes in 25 msecs (HTTP/1.1 302) 7 headers in 357 bytes (1 switches on core 0)

lms_1 | [pid: 19|app: 0|req: 8/18] 172.18.0.11 () {58 vars in 4324 bytes} [Sat Aug 20 12:18:27 2022] POST /login_refresh => generated 213 bytes in 110 msecs (HTTP/1.1 200) 10 headers in 1691 bytes (1 switches on core 0)

caddy_1 | {"level":"info","ts":1660997907.931983,"logger":"http.log.access.log0","msg":"handled request","request":{"remote_addr":"112.207.109.56:14868","proto":"HTTP/2.0","method":"POST","host":"test.tmtg-clone.click","uri":"/login_refresh","tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","proto_mutual":true,"server_name":"test.tmtg-clone.click"}},"user_id":"","duration":0.111898831,"size":213,"status":200}

And here is the BROWSER Error

image

UPDATE
For all my credentials, I am using subdomains. For example:
My LMS_HOST is test.domainexample.click
while my CMS_HOST is studiotest.domainexample.click
and my MFE_HOST is appstest.domainexample.click

Does that have an effect on this? Because on the other hand, when I tried using the created domain directly, such as for example:

My LMS_HOST is domainexample.click
while my CMS_HOST is studio.domainexample.click
and my MFE_HOST is apps.domainexample.click
everything seems to be working fine.

Now, my follow up question is this: If it does have an effect, is there a way where I can still use the same subdomains such as the appstest.domainexample.click but still make the MFE_HOST work?

How about apps.test.example.com?

You can have your site on example.com

LMS on test.example.com

Everything else on *.test.example.com

There might be other possible solution to add all subdomins to cors whitelist but i am not sure how well that works.

Tried this as well. But it is not possible.
I also tried adding them to cors_whitelist but it doesn’t seem to be working.

Ouch I think I been there before, I think probably the problem is your MFE_HOST is not a subdomain of LMS_HOST but in order for my theory to be true it shouldn’t work at all not that sometimes it do or sometimes its not.

To resolve the issue for me when I had, I changed the cookie domain for use case make sure the cookie domain is “. domainexample.click.” I think that value is lms.env.yml it should be SESSION_COOKIE_DOMAIN: ". domainexample.click." Assuming MFE_HOST is not subdomain of LMS

I too was trying to make the MFE host be a subdomain of the base domain rather than like it is defined here tutor-mfe/plugin.py at master · overhangio/tutor-mfe · GitHub.

@regis Is there a way to configure the MFE_HOST to be located at a subdomain other than the LMS_HOST?

I keep getting this error when viewing the MFE host. No container logs or browser logs seem to give us any clue what’s wrong.

An unexpected error occurred. Please click the button below to refresh the page.

@becdavid @traek728

So I was able to get the MFE to load with the following configuration settings. I didn’t have the {cms|lms}-env tutor patches overridden and that was the issue. As @ghassan mentions here I used the .{{ BASE_DOMAIN}} for the SESSION_COOKIE_DOMAIN value along with the same SESSION_COOKIE_NAME to allow the session to work across both the CMS and LMS applications.

"BASE_DOMAIN": "example.com"

Tutor Plugin Patches

cms-env
lms-env

"SESSION_COOKIE_DOMAIN": ".{{ BASE_DOMAIN }}",

openedx-cms-production-settings
openedx-lms-production-settings

SESSION_COOKIE_DOMAIN = ".{{ BASE_DOMAIN }}"
SESSION_COOKIE_NAME = "sessionid-<named-release>"