enki/blap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Refactor and Move TileErrorBoundary to Shared Components (#32793)

Browse Source 
* 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>
This commit is contained in:
Zack
2026-04-08 11:05:31 +02:00
committed by GitHub
parent 6e9fc9b8fa
commit d197fb4e30
16 changed files with 780 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/views/messages/TileErrorBoundary.tsx
-92
View File
@@ -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
+71 -3
View File
@@ -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
+128
View File
@@ -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",
);
};
}