Refactor and Move TileErrorBoundary to Shared Components (#32793)

* creation of stories and view in shared-components

* migrate EventTile error fallback to shared TileErrorView MVVM

* Fix lint errors and unused import

* Update tests because of the refactoring

* Update snapshots + stories

* removal of mxEvent since it never changes in timeline

* Update packages/shared-components/src/message-body/TileErrorView/TileErrorView.stories.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Update apps/web/src/viewmodels/message-body/TileErrorViewModel.ts

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* Update apps/web/src/viewmodels/message-body/TileErrorViewModel.ts

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* docs: add TileErrorView tsdoc

* docs: add TileErrorViewModel tsdoc

* docs: add view source label tsdoc

* refactor: move tile error layout into vm

* docs: add TileErrorView story view docs

* docs: move tile error story list wrapper

* refactor: remove unused tile error event setter

* Update packages/shared-components/src/message-body/TileErrorView/TileErrorView.stories.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* docs: add tsdoc for event tile error fallback props

* refactor: rely on snapshot merge no-op checks

* remove unessecery if statment

* test: restore EventTile mocks in afterEach

* test(shared-components): move TileErrorView baselines

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

apps/web/src/components/views/messages/TileErrorBoundary.tsx

@@ -1,92 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020-2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type ReactNode } from "react";
-import classNames from "classnames";
-import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
-
-import { _t } from "../../../languageHandler";
-import Modal from "../../../Modal";
-import AccessibleButton from "../elements/AccessibleButton";
-import SettingsStore from "../../../settings/SettingsStore";
-import ViewSource from "../../structures/ViewSource";
-import { type Layout } from "../../../settings/enums/Layout";
-import { BugReportDialogButton } from "../elements/BugReportDialogButton";
-
-interface IProps {
-    mxEvent: MatrixEvent;
-    layout: Layout;
-    children: ReactNode;
-}
-
-interface IState {
-    error?: Error;
-}
-
-export default class TileErrorBoundary extends React.Component<IProps, IState> {
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {};
-    }
-
-    public static getDerivedStateFromError(error: Error): Partial<IState> {
-        // Side effects are not permitted here, so we only update the state so
-        // that the next render shows an error message.
-        return { error };
-    }
-
-    private onViewSource = (): void => {
-        Modal.createDialog(
-            ViewSource,
-            {
-                mxEvent: this.props.mxEvent,
-            },
-            "mx_Dialog_viewsource",
-        );
-    };
-
-    public render(): ReactNode {
-        if (this.state.error) {
-            const { mxEvent } = this.props;
-            const classes = {
-                mx_EventTile: true,
-                mx_EventTile_info: true,
-                mx_EventTile_content: true,
-                mx_EventTile_tileError: true,
-            };
-
-            let viewSourceButton;
-            if (mxEvent && SettingsStore.getValue("developerMode")) {
-                viewSourceButton = (
-                    <>
-                        &nbsp;
-                        <AccessibleButton onClick={this.onViewSource} kind="link">
-                            {_t("action|view_source")}
-                        </AccessibleButton>
-                    </>
-                );
-            }
-
-            return (
-                <li className={classNames(classes)} data-layout={this.props.layout}>
-                    <div className="mx_EventTile_line">
-                        <span>
-                            {_t("timeline|error_rendering_message")}
-                            {mxEvent && ` (${mxEvent.getType()})`}
-                            <BugReportDialogButton error={this.state.error} label="react-tile-soft-crash" />
-                            {viewSourceButton}
-                        </span>
-                    </div>
-                </li>
-            );
-        }
-
-        return this.props.children;
-    }
-}

apps/web/src/components/views/rooms/EventTile.tsx

@@ -56,6 +56,8 @@ import {
     PinnedMessageBadge,
     ReactionsRowButtonView,
     ReactionsRowView,
+    TileErrorView,
+    type TileErrorViewLayout,
     useViewModel,
 } from "@element-hq/web-shared-components";
 
@@ -89,7 +91,6 @@ import { DecryptionFailureTracker } from "../../../DecryptionFailureTracker";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { shouldDisplayReply } from "../../../utils/Reply";
 import PosthogTrackers from "../../../PosthogTrackers";
-import TileErrorBoundary from "../messages/TileErrorBoundary";
 import { haveRendererForEvent, isMessageEvent, renderTile } from "../../../events/EventTileFactory";
 import ThreadSummary, { ThreadMessagePreview } from "./ThreadSummary";
 import { ReadReceiptGroup } from "./ReadReceiptGroup";
@@ -114,9 +115,11 @@ import {
     MAX_ITEMS_WHEN_LIMITED,
     ReactionsRowViewModel,
 } from "../../../viewmodels/room/timeline/event-tile/reactions/ReactionsRowViewModel";
+import { TileErrorViewModel } from "../../../viewmodels/message-body/TileErrorViewModel";
 import { EventTileActionBarViewModel } from "../../../viewmodels/room/EventTileActionBarViewModel";
 import { ThreadListActionBarViewModel } from "../../../viewmodels/room/ThreadListActionBarViewModel";
 import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
+import { useSettingValue } from "../../../hooks/useSettings";
 import { DecryptionFailureBodyFactory, RedactedBodyFactory } from "../messages/MBodyFactory";
 
 export type GetRelationsForEvent = (
@@ -1571,12 +1574,77 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
     }
 }
 
+/**
+ * Props for the event-tile fallback rendered after the tile error boundary catches a render failure.
+ */
+interface EventTileErrorFallbackProps {
+    error: Error;
+    layout: Layout;
+    mxEvent: MatrixEvent;
+}
+
+function EventTileErrorFallback({ error, layout, mxEvent }: Readonly<EventTileErrorFallbackProps>): JSX.Element {
+    const developerMode = useSettingValue("developerMode");
+    const vm = useCreateAutoDisposedViewModel(
+        () => new TileErrorViewModel({ error, layout: layout as TileErrorViewLayout, mxEvent, developerMode }),
+    );
+
+    useEffect(() => {
+        vm.setError(error);
+    }, [error, vm]);
+
+    useEffect(() => {
+        vm.setLayout(layout as TileErrorViewLayout);
+    }, [layout, vm]);
+
+    useEffect(() => {
+        vm.setDeveloperMode(developerMode);
+    }, [developerMode, vm]);
+
+    return <TileErrorView vm={vm} className="mx_EventTile mx_EventTile_info mx_EventTile_content" />;
+}
+
+interface EventTileErrorBoundaryProps {
+    children: ReactNode;
+    layout: Layout;
+    mxEvent: MatrixEvent;
+}
+
+interface EventTileErrorBoundaryState {
+    error?: Error;
+}
+
+class EventTileErrorBoundary extends React.Component<EventTileErrorBoundaryProps, EventTileErrorBoundaryState> {
+    public constructor(props: EventTileErrorBoundaryProps) {
+        super(props);
+        this.state = {};
+    }
+
+    public static getDerivedStateFromError(error: Error): Partial<EventTileErrorBoundaryState> {
+        return { error };
+    }
+
+    public render(): ReactNode {
+        if (this.state.error) {
+            return (
+                <EventTileErrorFallback
+                    error={this.state.error}
+                    layout={this.props.layout}
+                    mxEvent={this.props.mxEvent}
+                />
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
 // Wrap all event tiles with the tile error boundary so that any throws even during construction are captured
 const SafeEventTile = (props: EventTileProps): JSX.Element => {
     return (
-        <TileErrorBoundary mxEvent={props.mxEvent} layout={props.layout ?? Layout.Group}>
+        <EventTileErrorBoundary mxEvent={props.mxEvent} layout={props.layout ?? Layout.Group}>
             <UnwrappedEventTile {...props} />
-        </TileErrorBoundary>
+        </EventTileErrorBoundary>
     );
 };
 export default SafeEventTile;

apps/web/src/viewmodels/message-body/TileErrorViewModel.ts

@@ -0,0 +1,128 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type MouseEventHandler } from "react";
+import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import {
+    BaseViewModel,
+    type TileErrorViewLayout,
+    type TileErrorViewSnapshot as TileErrorViewSnapshotInterface,
+    type TileErrorViewModel as TileErrorViewModelInterface,
+} from "@element-hq/web-shared-components";
+
+import { _t } from "../../languageHandler";
+import Modal from "../../Modal";
+import SdkConfig from "../../SdkConfig";
+import { BugReportEndpointURLLocal } from "../../IConfigOptions";
+import ViewSource from "../../components/structures/ViewSource";
+import BugReportDialog from "../../components/views/dialogs/BugReportDialog";
+
+const TILE_ERROR_BUG_REPORT_LABEL = "react-tile-soft-crash";
+
+export interface TileErrorViewModelProps {
+    /**
+     * Layout variant used by the host timeline.
+     */
+    layout: TileErrorViewLayout;
+    /**
+     * Event whose tile failed to render.
+     */
+    mxEvent: MatrixEvent;
+    /**
+     * Render error captured by the boundary.
+     */
+    error: Error;
+    /**
+     * Whether developer mode is enabled, which controls the view-source action.
+     */
+    developerMode: boolean;
+}
+
+function getBugReportCtaLabel(): string | undefined {
+    const bugReportUrl = SdkConfig.get().bug_report_endpoint_url;
+
+    if (!bugReportUrl) {
+        return undefined;
+    }
+
+    return bugReportUrl === BugReportEndpointURLLocal
+        ? _t("bug_reporting|download_logs")
+        : _t("bug_reporting|submit_debug_logs");
+}
+
+/**
+ * Returns the localized view-source action label when developer mode is enabled.
+ */
+function getViewSourceCtaLabel(developerMode: boolean): string | undefined {
+    return developerMode ? _t("action|view_source") : undefined;
+}
+
+/**
+ * ViewModel for the tile error fallback, providing the snapshot shown when a tile fails to render.
+ *
+ * The snapshot includes the host timeline layout, the fallback message, the event type,
+ * and optional bug-report and view-source action labels. The view model also exposes
+ * click handlers for those actions, opening the bug-report or view-source dialog when
+ * available.
+ */
+export class TileErrorViewModel
+    extends BaseViewModel<TileErrorViewSnapshotInterface, TileErrorViewModelProps>
+    implements TileErrorViewModelInterface
+{
+    private static readonly computeSnapshot = (props: TileErrorViewModelProps): TileErrorViewSnapshotInterface => ({
+        layout: props.layout,
+        message: _t("timeline|error_rendering_message"),
+        eventType: props.mxEvent.getType(),
+        bugReportCtaLabel: getBugReportCtaLabel(),
+        viewSourceCtaLabel: getViewSourceCtaLabel(props.developerMode),
+    });
+
+    public constructor(props: TileErrorViewModelProps) {
+        super(props, TileErrorViewModel.computeSnapshot(props));
+    }
+
+    public setLayout(layout: TileErrorViewLayout): void {
+        this.props.layout = layout;
+        this.snapshot.merge({ layout });
+    }
+
+    public setError(error: Error): void {
+        this.props.error = error;
+    }
+
+    public setDeveloperMode(developerMode: boolean): void {
+        this.props.developerMode = developerMode;
+
+        const nextViewSourceCtaLabel = getViewSourceCtaLabel(developerMode);
+        this.snapshot.merge({ viewSourceCtaLabel: nextViewSourceCtaLabel });
+    }
+
+    public onBugReportClick: MouseEventHandler<HTMLButtonElement> = () => {
+        if (!this.snapshot.current.bugReportCtaLabel) {
+            return;
+        }
+
+        Modal.createDialog(BugReportDialog, {
+            label: TILE_ERROR_BUG_REPORT_LABEL,
+            error: this.props.error,
+        });
+    };
+
+    public onViewSourceClick: MouseEventHandler<HTMLButtonElement> = () => {
+        if (!this.snapshot.current.viewSourceCtaLabel) {
+            return;
+        }
+
+        Modal.createDialog(
+            ViewSource,
+            {
+                mxEvent: this.props.mxEvent,
+            },
+            "mx_Dialog_viewsource",
+        );
+    };
+}

apps/web/test/unit-tests/components/views/messages/MKeyVerificationRequest-test.tsx

@@ -11,8 +11,6 @@ import { type RenderResult, render } from "jest-matrix-react";
 import { type MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import MKeyVerificationRequest from "../../../../../src/components/views/messages/MKeyVerificationRequest";
-import TileErrorBoundary from "../../../../../src/components/views/messages/TileErrorBoundary";
-import { Layout } from "../../../../../src/settings/enums/Layout";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { filterConsole } from "../../../../test-utils";
 
@@ -60,22 +58,49 @@ describe("MKeyVerificationRequest", () => {
     });
 });
 
+interface TestTileErrorBoundaryProps {
+    children: React.ReactNode;
+}
+
+interface TestTileErrorBoundaryState {
+    error?: Error;
+}
+
+class TestTileErrorBoundary extends React.Component<TestTileErrorBoundaryProps, TestTileErrorBoundaryState> {
+    public constructor(props: TestTileErrorBoundaryProps) {
+        super(props);
+        this.state = {};
+    }
+
+    public static getDerivedStateFromError(error: Error): Partial<TestTileErrorBoundaryState> {
+        return { error };
+    }
+
+    public render(): React.ReactNode {
+        if (this.state.error) {
+            return "Can't load this message";
+        }
+
+        return this.props.children;
+    }
+}
+
 function renderEventNoClient(event: MatrixEvent): RenderResult {
     return render(
-        <TileErrorBoundary mxEvent={event} layout={Layout.Group}>
+        <TestTileErrorBoundary>
             <MKeyVerificationRequest mxEvent={event} />
-        </TileErrorBoundary>,
+        </TestTileErrorBoundary>,
     );
 }
 
 function renderEvent(client: MatrixClient, event: MatrixEvent): RenderResult {
     return render(
-        <TileErrorBoundary mxEvent={event} layout={Layout.Group}>
+        <TestTileErrorBoundary>
             <MatrixClientContext.Provider value={client}>
                 <MKeyVerificationRequest mxEvent={event} />
             </MatrixClientContext.Provider>
             ,
-        </TileErrorBoundary>,
+        </TestTileErrorBoundary>,
     );
 }
 

apps/web/test/unit-tests/components/views/rooms/EventTile-test.tsx

@@ -31,6 +31,7 @@ import { mkEncryptedMatrixEvent } from "matrix-js-sdk/src/testing";
 import { getByTestId } from "@testing-library/dom";
 
 import EventTile, { type EventTileProps } from "../../../../../src/components/views/rooms/EventTile";
+import * as EventTileFactory from "../../../../../src/events/EventTileFactory";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { type RoomContextType, TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
@@ -106,7 +107,7 @@ describe("EventTile", () => {
     });
 
     afterEach(() => {
-        jest.spyOn(PinningUtils, "isPinned").mockReturnValue(false);
+        jest.restoreAllMocks();
     });
 
     describe("EventTile thread summary", () => {
@@ -200,6 +201,19 @@ describe("EventTile", () => {
                 expect(screen.getByText("Pinned message")).toBeInTheDocument();
             },
         );
+
+        it("renders the tile error fallback when tile rendering throws", async () => {
+            jest.spyOn(console, "error").mockImplementation(() => {});
+            jest.spyOn(EventTileFactory, "renderTile").mockImplementation(() => {
+                throw new Error("Boom");
+            });
+
+            getComponent();
+
+            await waitFor(() => {
+                expect(screen.getByText("Can't load this message (m.room.message)")).toBeInTheDocument();
+            });
+        });
     });
 
     describe("EventTile in the right panel", () => {

apps/web/test/viewmodels/message-body/TileErrorViewModel-test.tsx

@@ -0,0 +1,143 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { mocked } from "jest-mock";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import Modal from "../../../src/Modal";
+import SdkConfig from "../../../src/SdkConfig";
+import { BugReportEndpointURLLocal } from "../../../src/IConfigOptions";
+import ViewSource from "../../../src/components/structures/ViewSource";
+import BugReportDialog from "../../../src/components/views/dialogs/BugReportDialog";
+import { TileErrorViewModel } from "../../../src/viewmodels/message-body/TileErrorViewModel";
+
+describe("TileErrorViewModel", () => {
+    const createEvent = (type = "m.room.message"): MatrixEvent =>
+        new MatrixEvent({
+            content: {},
+            event_id: `$${type}`,
+            origin_server_ts: Date.now(),
+            room_id: "!room:example.org",
+            sender: "@alice:example.org",
+            type,
+        });
+
+    const createVm = (
+        overrides: Partial<ConstructorParameters<typeof TileErrorViewModel>[0]> = {},
+    ): TileErrorViewModel => {
+        const error = overrides.error ?? new Error("Boom");
+        const mxEvent = overrides.mxEvent ?? createEvent();
+
+        return new TileErrorViewModel({
+            layout: "group",
+            developerMode: true,
+            error,
+            mxEvent,
+            ...overrides,
+        });
+    };
+
+    beforeEach(() => {
+        SdkConfig.reset();
+        jest.spyOn(Modal, "createDialog").mockImplementation(() => ({ close: jest.fn() }) as any);
+    });
+
+    afterEach(() => {
+        SdkConfig.reset();
+        jest.restoreAllMocks();
+    });
+
+    it("computes the initial snapshot from app state", () => {
+        SdkConfig.add({ bug_report_endpoint_url: "https://example.org" });
+        const vm = createVm();
+
+        expect(vm.getSnapshot()).toEqual({
+            layout: "group",
+            message: "Can't load this message",
+            eventType: "m.room.message",
+            bugReportCtaLabel: "Submit debug logs",
+            viewSourceCtaLabel: "View Source",
+        });
+    });
+
+    it("uses the download logs label for local bug reports", () => {
+        SdkConfig.add({ bug_report_endpoint_url: BugReportEndpointURLLocal });
+        const vm = createVm();
+
+        expect(vm.getSnapshot().bugReportCtaLabel).toBe("Download logs");
+    });
+
+    it("hides optional actions when unavailable", () => {
+        const vm = createVm({ developerMode: false });
+
+        expect(vm.getSnapshot().bugReportCtaLabel).toBeUndefined();
+        expect(vm.getSnapshot().viewSourceCtaLabel).toBeUndefined();
+    });
+
+    it("updates the layout when the host timeline layout changes", () => {
+        const vm = createVm();
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setLayout("bubble");
+
+        expect(vm.getSnapshot().layout).toBe("bubble");
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("guards setters against unchanged values", () => {
+        const error = new Error("Boom");
+        const mxEvent = createEvent();
+        const vm = createVm({ developerMode: true, error, mxEvent });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setDeveloperMode(true);
+        vm.setError(error);
+        vm.setLayout("group");
+
+        expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("opens the bug report dialog with the current error", () => {
+        SdkConfig.add({ bug_report_endpoint_url: "https://example.org" });
+        const originalError = new Error("Boom");
+        const updatedError = new Error("Updated boom");
+        const vm = createVm({ error: originalError });
+
+        vm.setError(updatedError);
+        vm.onBugReportClick({} as any);
+
+        expect(Modal.createDialog).toHaveBeenCalledWith(BugReportDialog, {
+            label: "react-tile-soft-crash",
+            error: updatedError,
+        });
+    });
+
+    it("opens the view source dialog with the current event", () => {
+        const mxEvent = createEvent("m.room.redaction");
+        const vm = createVm({ mxEvent });
+
+        vm.onViewSourceClick({} as any);
+
+        expect(Modal.createDialog).toHaveBeenCalledWith(
+            ViewSource,
+            {
+                mxEvent,
+            },
+            "mx_Dialog_viewsource",
+        );
+    });
+
+    it("does not open view source when developer mode is disabled", () => {
+        const vm = createVm({ developerMode: false });
+
+        vm.onViewSourceClick({} as any);
+
+        expect(mocked(Modal.createDialog)).not.toHaveBeenCalled();
+    });
+});

packages/shared-components/src/index.ts

@@ -17,6 +17,7 @@ export * from "./room/timeline/event-tile/body/EventContentBodyView";
 export * from "./room/timeline/event-tile/body/RedactedBodyView";
 export * from "./room/timeline/event-tile/body/MFileBodyView";
 export * from "./room/timeline/event-tile/body/MVideoBodyView";
+export * from "./room/timeline/event-tile/EventTileView/TileErrorView";
 export * from "./core/pill-input/Pill";
 export * from "./core/pill-input/PillInput";
 export * from "./room/RoomStatusBar";

packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.module.css

@@ -0,0 +1,38 @@
+.tileErrorView {
+    color: var(--cpd-color-text-critical-primary);
+    list-style: none;
+    text-align: center;
+}
+
+.line {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cpd-space-2x);
+}
+
+.bubble .line {
+    flex-direction: column;
+}
+
+.message {
+    padding: var(--cpd-space-1x) var(--cpd-space-4x);
+}
+
+.viewSourceButton {
+    appearance: none;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--cpd-color-text-action-primary);
+    cursor: pointer;
+    font: inherit;
+    text-decoration: underline;
+}
+
+.viewSourceButton:focus-visible {
+    outline: 2px solid var(--cpd-color-border-focused);
+    outline-offset: 2px;
+    border-radius: var(--cpd-space-1x);
+}

packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ComponentProps, type JSX } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { TileErrorView, type TileErrorViewActions, type TileErrorViewSnapshot } from "./TileErrorView";
+
+type WrapperProps = TileErrorViewSnapshot &
+    Partial<TileErrorViewActions> &
+    Omit<ComponentProps<typeof TileErrorView>, "vm">;
+
+const TileErrorViewWrapperImpl = ({
+    className,
+    onBugReportClick = fn(),
+    onViewSourceClick = fn(),
+    ...snapshotProps
+}: WrapperProps): JSX.Element => {
+    const vm = useMockedViewModel(snapshotProps, {
+        onBugReportClick,
+        onViewSourceClick,
+    });
+
+    return <TileErrorView vm={vm} className={className} />;
+};
+
+const TileErrorViewWrapper = withViewDocs(TileErrorViewWrapperImpl, TileErrorView);
+
+const meta = {
+    title: "MessageBody/TileErrorView",
+    component: TileErrorViewWrapper,
+    tags: ["autodocs"],
+    decorators: [
+        (Story): JSX.Element => (
+            <ul>
+                <Story />
+            </ul>
+        ),
+    ],
+    args: {
+        message: "Can't load this message",
+        eventType: "m.room.message",
+        bugReportCtaLabel: "Submit debug logs",
+        viewSourceCtaLabel: "View source",
+        layout: "group",
+    },
+} satisfies Meta<typeof TileErrorViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const BubbleLayout: Story = {
+    args: {
+        layout: "bubble",
+    },
+};
+
+export const WithoutActions: Story = {
+    args: {
+        bugReportCtaLabel: undefined,
+        viewSourceCtaLabel: undefined,
+    },
+};

packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.test.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type MouseEventHandler } from "react";
+import { composeStories } from "@storybook/react-vite";
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+import { MockViewModel } from "../../../../../core/viewmodel";
+import {
+    TileErrorView,
+    type TileErrorViewActions,
+    type TileErrorViewModel,
+    type TileErrorViewSnapshot,
+} from "./TileErrorView";
+import * as stories from "./TileErrorView.stories";
+
+const { Default, BubbleLayout, WithoutActions } = composeStories(stories);
+
+describe("TileErrorView", () => {
+    it("renders the default tile error state", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the bubble layout variant", () => {
+        const { container } = render(<BubbleLayout />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the fallback text without actions", () => {
+        render(<WithoutActions />);
+
+        expect(screen.getByText("Can't load this message (m.room.message)")).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: "Submit debug logs" })).not.toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: "View source" })).not.toBeInTheDocument();
+    });
+
+    it("invokes bug-report and view-source actions", async () => {
+        const user = userEvent.setup();
+        const onBugReportClick = vi.fn();
+        const onViewSourceClick = vi.fn();
+
+        class TestTileErrorViewModel extends MockViewModel<TileErrorViewSnapshot> implements TileErrorViewActions {
+            public onBugReportClick?: MouseEventHandler<HTMLButtonElement>;
+            public onViewSourceClick?: MouseEventHandler<HTMLButtonElement>;
+
+            public constructor(snapshot: TileErrorViewSnapshot, actions: TileErrorViewActions) {
+                super(snapshot);
+                Object.assign(this, actions);
+            }
+        }
+
+        const vm = new TestTileErrorViewModel(
+            {
+                layout: "group",
+                message: "Can't load this message",
+                eventType: "m.room.message",
+                bugReportCtaLabel: "Submit debug logs",
+                viewSourceCtaLabel: "View source",
+            },
+            {
+                onBugReportClick,
+                onViewSourceClick,
+            },
+        ) as TileErrorViewModel;
+
+        render(<TileErrorView vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "Submit debug logs" }));
+        await user.click(screen.getByRole("button", { name: "View source" }));
+
+        expect(onBugReportClick).toHaveBeenCalledTimes(1);
+        expect(onViewSourceClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("applies a custom className to the root element", () => {
+        const vm = new MockViewModel<TileErrorViewSnapshot>({
+            layout: "group",
+            message: "Can't load this message",
+        }) as TileErrorViewModel;
+
+        render(<TileErrorView vm={vm} className="custom-tile-error" />);
+
+        expect(screen.getByRole("status").closest("li")).toHaveClass("custom-tile-error");
+    });
+});

packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.tsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, type MouseEventHandler } from "react";
+import classNames from "classnames";
+import { Button } from "@vector-im/compound-web";
+
+import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import styles from "./TileErrorView.module.css";
+
+export type TileErrorViewLayout = "bubble" | "group" | "irc";
+
+export interface TileErrorViewSnapshot {
+    /**
+     * Layout variant used by the host timeline.
+     */
+    layout?: TileErrorViewLayout;
+    /**
+     * Primary fallback text shown when a tile fails to render.
+     */
+    message: string;
+    /**
+     * Optional event type appended to the fallback text.
+     */
+    eventType?: string;
+    /**
+     * Optional label for the bug-report action button.
+     */
+    bugReportCtaLabel?: string;
+    /**
+     * Optional label for the view-source action.
+     */
+    viewSourceCtaLabel?: string;
+}
+
+export interface TileErrorViewActions {
+    /**
+     * Invoked when the bug-report button is clicked.
+     */
+    onBugReportClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Invoked when the view-source action is clicked.
+     */
+    onViewSourceClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export type TileErrorViewModel = ViewModel<TileErrorViewSnapshot, TileErrorViewActions>;
+
+interface TileErrorViewProps {
+    /**
+     * The view model for the tile error fallback.
+     */
+    vm: TileErrorViewModel;
+    /**
+     * Optional host-level class names.
+     */
+    className?: string;
+}
+
+/**
+ * Renders a timeline tile fallback when message content cannot be displayed.
+ *
+ * The component shows the fallback error message from the view model, optionally
+ * appends the event type in parentheses, and can render bug-report and view-source
+ * actions when their labels are provided. The layout in the view-model snapshot
+ * selects the timeline presentation variant.
+ */
+export function TileErrorView({ vm, className }: Readonly<TileErrorViewProps>): JSX.Element {
+    const { message, eventType, bugReportCtaLabel, viewSourceCtaLabel, layout = "group" } = useViewModel(vm);
+
+    return (
+        <li
+            className={classNames(styles.tileErrorView, className, { [styles.bubble]: layout === "bubble" })}
+            data-layout={layout}
+        >
+            <div className={styles.line} role="status">
+                <span className={styles.message}>
+                    {message}
+                    {eventType && ` (${eventType})`}
+                </span>
+                {bugReportCtaLabel && (
+                    <Button kind="secondary" size="sm" onClick={vm.onBugReportClick}>
+                        {bugReportCtaLabel}
+                    </Button>
+                )}
+                {viewSourceCtaLabel && (
+                    <button type="button" className={styles.viewSourceButton} onClick={vm.onViewSourceClick}>
+                        {viewSourceCtaLabel}
+                    </button>
+                )}
+            </div>
+        </li>
+    );
+}

packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap

@@ -0,0 +1,77 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TileErrorView > renders the bubble layout variant 1`] = `
+<div>
+  <ul>
+    <li
+      class="tileErrorView bubble"
+      data-layout="bubble"
+    >
+      <div
+        class="line"
+        role="status"
+      >
+        <span
+          class="message"
+        >
+          Can't load this message
+           (m.room.message)
+        </span>
+        <button
+          class="_button_13vu4_8"
+          data-kind="secondary"
+          data-size="sm"
+          role="button"
+          tabindex="0"
+        >
+          Submit debug logs
+        </button>
+        <button
+          class="viewSourceButton"
+          type="button"
+        >
+          View source
+        </button>
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`TileErrorView > renders the default tile error state 1`] = `
+<div>
+  <ul>
+    <li
+      class="tileErrorView"
+      data-layout="group"
+    >
+      <div
+        class="line"
+        role="status"
+      >
+        <span
+          class="message"
+        >
+          Can't load this message
+           (m.room.message)
+        </span>
+        <button
+          class="_button_13vu4_8"
+          data-kind="secondary"
+          data-size="sm"
+          role="button"
+          tabindex="0"
+        >
+          Submit debug logs
+        </button>
+        <button
+          class="viewSourceButton"
+          type="button"
+        >
+          View source
+        </button>
+      </div>
+    </li>
+  </ul>
+</div>
+`;

packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/index.tsx

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export {
+    TileErrorView,
+    type TileErrorViewActions,
+    type TileErrorViewLayout,
+    type TileErrorViewModel,
+    type TileErrorViewSnapshot,
+} from "./TileErrorView";