[Feat] Send client errors to host (#10856)

Final feature PR implements extension of `host_config` endpoint with `blockErrorDialogs`, as well as `CLIENT_ERROR` & `CLIENT_ERROR_DIALOG` messages to the host on following failures:
* Websocket connection issues
    * See #10831
* Custom component load
    * See #10781
* Media load (audio, video, image, etc)
    * See #10837
* Error dialogs (Page Not Found, Bad message format, etc.)
    * See #10760

Author: mayagbarnes

e2e_playwright/custom_components/component_errors.py

@@ -0,0 +1,22 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2025)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from streamlit_ace import st_ace
+
+import streamlit as st
+
+## Spawn a new Ace editor
+st.subheader("Ace Editor Component", divider="blue")
+content = st_ace()
+st.write(content)

e2e_playwright/custom_components/component_errors_test.py

@@ -0,0 +1,102 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2025)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from playwright.sync_api import Page, Route, expect
+
+from e2e_playwright.conftest import wait_for_app_run, wait_until
+
+# The timeout value from ComponentInstance.tsx
+COMPONENT_READY_WARNING_TIME_MS = 60000  # 60 seconds
+
+
+def handle_component_source_failure(route: Route):
+    """Handle custom component source request by returning a 404 status."""
+    route.fulfill(status=404, headers={"Content-Type": "text/plain"}, body="Not Found")
+
+
+def handle_component_timeout_failure(route: Route):
+    """Handle custom component request by aborting the request (trigger catch in fetch)."""
+    route.abort("failed")
+
+
+def test_component_source_failure(page: Page, app_port: int):
+    """Test that a component source failure is handled correctly."""
+    # Ensure custom component source requests return a 404 status
+    page.route(
+        f"http://localhost:{app_port}/component/**", handle_component_source_failure
+    )
+
+    # Capture console messages
+    messages = []
+    page.on("console", lambda msg: messages.append(msg.text))
+
+    # Navigate to the app
+    page.goto(f"http://localhost:{app_port}")
+    wait_for_app_run(page)
+
+    # Expect the iframe to be attached
+    expect(page.get_by_test_id("stCustomComponentV1")).to_be_attached()
+
+    # Wait until the expected error is logged, which indicates CLIENT_ERROR was sent
+    wait_until(
+        page,
+        lambda: any(
+            "Client Error: Custom Component streamlit_ace.streamlit_ace source error"
+            in message
+            for message in messages
+        ),
+    )
+
+
+def test_component_timeout_failure(page: Page, app_port: int):
+    """Test that a component timeout failure is handled correctly."""
+    # Ensure custom component requests times out
+    page.route(
+        f"http://localhost:{app_port}/component/**", handle_component_timeout_failure
+    )
+
+    # Capture console messages
+    messages = []
+    page.on("console", lambda msg: messages.append(msg.text))
+
+    # Navigate to the app
+    page.goto(f"http://localhost:{app_port}")
+
+    # Expect the iframe to be attached
+    expect(page.get_by_test_id("stCustomComponentV1")).to_be_attached()
+
+    # Fetch error should be logged
+    wait_until(
+        page,
+        lambda: any(
+            "Client Error: Custom Component streamlit_ace.streamlit_ace fetch error"
+            in message
+            for message in messages
+        ),
+    )
+
+    # Wait for the component to timeout
+    page.wait_for_timeout(COMPONENT_READY_WARNING_TIME_MS)
+
+    wait_until(
+        page,
+        lambda: any(
+            "Client Error: Custom Component streamlit_ace.streamlit_ace timeout error"
+            in message
+            for message in messages
+        ),
+    )
+
+    # Wait for the warning to appear and verify
+    expect(page.get_by_test_id("stAlert")).to_be_visible()

e2e_playwright/host_config.py

@@ -17,6 +17,23 @@
 
 import streamlit as st
 
+
+def page2():
+    st.header("Page 2")
+
+
+def page3():
+    st.header("Page 3")
+
+
+# Make MPA to use for dialog blocking test
+st.navigation(
+    [
+        st.Page(page2, title="02_App_Page_2", default=True),
+        st.Page(page3, title="03_App_Page_3"),
+    ]
+)
+
 # always generate the same data
 np.random.seed(0)
 

e2e_playwright/host_config_test.py

@@ -14,13 +14,18 @@
 
 from playwright.sync_api import Page, Route, expect
 
-from e2e_playwright.conftest import ImageCompareFunction, wait_for_app_loaded
+from e2e_playwright.conftest import (
+    ImageCompareFunction,
+    wait_for_app_loaded,
+    wait_until,
+)
 
 
-def handle_route_hostconfig_disable_fullscreen(route: Route) -> None:
+def handle_route_hostconfig_disable_fullscreen_and_error_dialogs(route: Route) -> None:
     response = route.fetch()
     body = response.json()
     body["disableFullscreenMode"] = True
+    body["blockErrorDialogs"] = True
     route.fulfill(
         # Pass all fields from the response.
         response=response,
@@ -33,7 +38,10 @@ def test_disable_fullscreen(
     page: Page, app_port: int, assert_snapshot: ImageCompareFunction
 ):
     """Test that fullscreen mode is disabled for elements when set via host-config."""
-    page.route("**/_stcore/host-config", handle_route_hostconfig_disable_fullscreen)
+    page.route(
+        "**/_stcore/host-config",
+        handle_route_hostconfig_disable_fullscreen_and_error_dialogs,
+    )
     page.goto(f"http://localhost:{app_port}")
     wait_for_app_loaded(page)
 
@@ -52,3 +60,36 @@ def test_disable_fullscreen(
     assert_snapshot(
         dataframe_toolbar, name="host_config-dataframe_disabled_fullscreen_mode"
     )
+
+
+def test_block_error_dialogs(page: Page, app_port: int):
+    """Test that error dialogs are blocked and sent to host when set via host-config."""
+    # Need to be more specific about the route to allow for successful redirect
+    page.route(
+        f"http://localhost:{app_port}/_stcore/host-config",
+        handle_route_hostconfig_disable_fullscreen_and_error_dialogs,
+    )
+
+    # Initial load of page
+    page.goto(f"http://localhost:{app_port}")
+    wait_for_app_loaded(page)
+
+    # Capture console messages
+    messages = []
+    page.on("console", lambda msg: messages.append(msg))
+
+    # Navigate to a non-existent page to trigger page not found error
+    page.goto(f"http://localhost:{app_port}/nonexistent_page")
+
+    # Wait until the expected error is logged - console should include 2 404 errors (health & host-config) then the page not found error
+    wait_until(
+        page,
+        lambda: any(
+            "The page that you have requested does not seem to exist. Running the app's main page."
+            in message.text
+            for message in messages
+        ),
+    )
+
+    # Verify no error dialog is shown
+    expect(page.get_by_role("dialog")).not_to_be_attached()

e2e_playwright/multipage_apps_v2/mpa_v2_basics_test.py

@@ -20,6 +20,7 @@
     ImageCompareFunction,
     wait_for_app_loaded,
     wait_for_app_run,
+    wait_until,
 )
 from e2e_playwright.shared.app_utils import (
     click_button,
@@ -539,3 +540,35 @@ def test_sidebar_interaction_performance(app: Page):
     options = sidebar.locator("li")
     for option in options.all():
         option.hover()
+
+
+def test_logo_source_errors(app: Page, app_port: int):
+    """Test that logo source errors are logged."""
+    app.route(
+        f"http://localhost:{app_port}/media/**",
+        lambda route: route.fulfill(
+            status=404, headers={"Content-Type": "text/plain"}, body="Not Found"
+        ),
+    )
+
+    # Capture console messages
+    messages = []
+    app.on("console", lambda msg: messages.append(msg.text))
+
+    # Navigate to the app
+    app.goto(f"http://localhost:{app_port}")
+
+    # Wait until the expected error is logged, indicating CLIENT_ERROR was sent
+    # for the logo in the main app area and the sidebar
+    wait_until(
+        app,
+        lambda: any(
+            "Client Error: Logo source error" in message for message in messages
+        ),
+    )
+    wait_until(
+        app,
+        lambda: any(
+            "Client Error: Sidebar Logo source error" in message for message in messages
+        ),
+    )

e2e_playwright/st_audio_test.py

@@ -23,6 +23,25 @@
     click_checkbox,
 )
 
+AUDIO_ELEMENTS_WITH_PATH = 3
+AUDIO_ELEMENTS_WITH_URL = 3
+
+
+def check_audio_source_error_count(messages: list[str], expected_count: int):
+    """Check that the expected number of audio source error messages are logged."""
+    assert (
+        len(
+            [
+                message
+                for message in messages
+                if "Client Error: Audio source error" in message
+            ]
+        )
+        # when test run on webkit, it will sometimes log extra instances of the error
+        # for the same source - so we use >= expected_count to avoid flakiness
+        >= expected_count
+    )
+
 
 def test_audio_has_correct_properties(app: Page):
     """Test that `st.audio` renders correct properties."""
@@ -123,3 +142,57 @@ def test_audio_uses_unified_height(
     themed_app.wait_for_timeout(1000)
 
     assert_snapshot(audio_element, name="st_audio-unified_height")
+
+
+# TODO(mgbarnes): Figure out why this test is flaky on Firefox.
+@pytest.mark.skip_browser("firefox")
+def test_audio_source_error_with_url(app: Page, app_port: int):
+    """Test `st.audio` source error when data is a url."""
+    # Ensure audio source request return a 404 status
+    app.route(
+        "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/viper.mp3",
+        lambda route: route.fulfill(
+            status=404, headers={"Content-Type": "text/plain"}, body="Not Found"
+        ),
+    )
+
+    # Capture console messages
+    messages = []
+    app.on("console", lambda msg: messages.append(msg.text))
+
+    # Navigate to the app
+    app.goto(f"http://localhost:{app_port}")
+
+    # Wait until the expected error is logged, indicating CLIENT_ERROR was sent
+    # Should be 3 instances of the error, one for each audio element with url
+    wait_until(
+        app,
+        lambda: check_audio_source_error_count(messages, AUDIO_ELEMENTS_WITH_URL),
+    )
+
+
+# TODO(mgbarnes): Figure out why this test is flaky on Firefox.
+@pytest.mark.skip_browser("firefox")
+def test_audio_source_error_with_path(app: Page, app_port: int):
+    """Test `st.audio` source error when data is path (media endpoint)."""
+    # Ensure audio source request return a 404 status
+    app.route(
+        f"http://localhost:{app_port}/media/**",
+        lambda route: route.fulfill(
+            status=404, headers={"Content-Type": "text/plain"}, body="Not Found"
+        ),
+    )
+
+    # Capture console messages
+    messages = []
+    app.on("console", lambda msg: messages.append(msg.text))
+
+    # Navigate to the app
+    app.goto(f"http://localhost:{app_port}")
+
+    # Wait until the expected errors are logged, indicating CLIENT_ERROR was sent
+    # Should be 3 instances of the error, one for each audio element with path
+    wait_until(
+        app,
+        lambda: check_audio_source_error_count(messages, AUDIO_ELEMENTS_WITH_PATH),
+    )