A "safe mode" toggle to disable loading of custom resources

[karwosts]

Proposed change

I had a thought if it might be nice to have a sort of "safe mode" switch for the frontend that disables loading of custom resources when it is enabled, as kind of a tool for debugging.

I'm sometimes doing support for users who complain that some core functionality of the frontend is broken. After several rounds of back and forth debugging and trying different ideas, this often unsatisfyingly ends with "I just updated some plugin from HACS and everything works again now".

Sometimes looking into issues I suspect that users may have some custom resources installed that is interfering, but it's difficult to pinpoint, and asking "can you uninstall all your resources" is not a popular suggestion just when trying to diagnose a possibly unrelated issue; as it is disruptive and users may worry that it will take significant effort to reinstall everything correctly again. Just having a simple toggle to flip to achieve the same effect might be worthwhile. For now I placed this as a device-local setting on the user preferences page.

I realized after implementing that HA Core already has a "safe mode" which I think is unrelated, so maybe will have to come up with some other name to avoid confusion.

Wanted to see if anyone agreed that this might be a useful idea, or if it is too niche to be worth its own setting. Thanks!

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

I think this is a great idea!

But I think we should not add it to the profile page, but somewhere in developer tools or something...

Also we should probably block more than just lovelace resources but also the custom resources provided by the backend, meaning maybe we should make this a backend setting?

[karwosts]

What exactly is "custom resources provided by the backend", are you referring to custom_components like integrations?

As it is this is very lightweight, it only requires a simple page refresh to activate, and it only affects the local client that activates it.

If this becomes a backend setting that's starting to sound much more heavyweight, like it might require a HA reboot. might break running and scheduled automations, break the UI for all users, etc. If I'm understanding what you're suggesting correctly.

[bramkragten]

I'm talking about the https://www.home-assistant.io/integrations/frontend/#extra_module_url settings, these are also often used by custom integrations to provide custom frontend for their integration, or global customisations that are not just for Lovelace.

[karwosts]

Do you happen to know of a good test case offhand that uses those extra_module_urls? I could try to add those to blocking as well, but I've never personally used one or seen one so I'm not sure exactly where they show up.

I'm not sure about adding options to developer tools, doesn't seem like there's really a precedent for it. Would it go on a new tab or in one of the existing panels?

Do we need a design mockup first for where it should go, and what it should be named?

[bramkragten]

Browser mod uses this for example: https://github.com/thomasloven/hass-browser_mod/blob/master/custom_components/browser_mod/mod_view.py#L17

[bramkragten]

I'm not sure about adding options to developer tools, doesn't seem like there's really a precedent for it. Would it go on a new tab or in one of the existing panels?

Do we need a design mockup first for where it should go, and what it should be named?

I think we should add a new tab, something like "debug tools"? I don't think we need a design first, developer tools is not exactly the best designed part of Home Assistant 😅

[karwosts]

I'm at a bit of a loss for how to deal with the extra_modules, looked around the frontend code a bit but I don't really understand how they get loaded or how to interact with them, so not sure if I can move this forward from here.

[silamon]

I'm at a bit of a loss for how to deal with the extra_modules, looked around the frontend code a bit but I don't really understand how they get loaded or how to interact with them, so not sure if I can move this forward from here.

This is impossible to prevent loading from within the frontend itself, I guess. These are defined in the jinja templates:

frontend/src/html/index.html.template

Lines 122 to 124 in 4e2877b

	{%- for extra_script in extra_js_es5 -%}
	_ls("{{ extra_script }}");
	{%- endfor -%}

frontend/src/html/index.html.template

Lines 97 to 99 in 4e2877b

	{%- for extra_module in extra_modules -%}
	import("{{ extra_module }}");
	{%- endfor -%}

Then over at frontend integration in core, that template is interpreted and those extra_modules are passed when the frontend is being opened:

https://github.com/home-assistant/core/blob/76cc04e52b88c052db8ddfa3f630390f4cc2680a/homeassistant/components/frontend/__init__.py#L591-L599

IMO, the only choice would be to have this in the frontend integration as a new backend variable and I would call it a "safe frontend mode".

[silamon]

We can have the toggle in the frontend, which will call a new home assistant service, then show a pop-up to reload the frontend. Very similar to how set theme (dark / light) works.

https://github.com/home-assistant/core/blob/76cc04e52b88c052db8ddfa3f630390f4cc2680a/homeassistant/components/frontend/__init__.py#L438

[karwosts]

I'm not sure it makes sense to be a service.

Maybe how advanced mode is handled is a better example? When you toggle that switch it seems to save to core in a per-user configuration, it doesn't do a service call, calls the frontend/set_user_data API.

  private async _advancedToggled(ev) {
    getOptimisticFrontendUserDataCollection(this.hass.connection, "core").save({
      ...this.coreUserData,
      showAdvanced: ev.currentTarget.checked,
    });
  }

Actually I'm not convinced if that works or not.

[silamon]

I think that would work too, but I'm not sure if it would be accepted as a per-user setting.

[karwosts]

I'm not sure if it would be accepted as a per-user setting.

Feels like that makes more sense to me, like in theory if you have an admin trying to debug something, you wouldn't want toggling this to knock all the other clients/users in your house into a broken frontend.

But I have no idea if this makes it technically more different in the backend or not. I've never looked at the backend-frontend code 😂

[silamon]

That makes sense.

I should take a deeper look as well, but at this time I don't think you can achieve this without having a backend setting since the imported extra modules are loaded somewhere the same time as the frontend. You can't intercept or prevent them from being loaded in the frontend since the template is being compiled by the backend upon loading.

[karwosts]

I don't think you can achieve this without having a backend setting since the imported extra modules are loaded somewhere the same time as the frontend.

Yeah I came to the same conclusion.

[bramkragten]

Yeah, backend needs to be involved, making it a setting per user makes sense I think.

I can do the backend part if you want, then it will be command to call from the frontend and a refresh.

I don't think we want to persist this setting when you reboot your system right?

[karwosts]

I can do the backend part if you want, then it will be command to call from the frontend and a refresh.

Yeah, if you'd like to volunteer, go for it.

I don't think we want to persist this setting when you reboot your system right?

I guess I can't think of an obvious reason why persisting would be necessary, so I guess just go for whatever is easiest?

[bramkragten]

A global safe mode is being worked on, that will disable all back and frontend custom resources.