Retry loading chunks to make the app more resilient (#29001)

Will also fix some Playwright flakes

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2025-01-15 09:57:07 +00:00 committed by GitHub
parent ef3bf59656
commit 03a1b48e1f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 25 additions and 8 deletions

View File

@ -293,6 +293,7 @@
"webpack-bundle-analyzer": "^4.8.0",
"webpack-cli": "^6.0.0",
"webpack-dev-server": "^5.0.0",
"webpack-retry-chunk-load-plugin": "^3.1.1",
"webpack-version-file-plugin": "^0.5.0",
"yaml": "^2.3.3"
},

View File

@ -12,20 +12,16 @@ import { ISendEventResponse } from "matrix-js-sdk/src/matrix";
// we need to import the types for TS, but do not import the sendMessage
// function to avoid importing from "@vector-im/matrix-wysiwyg"
import { SendMessageParams } from "./utils/message";
import { retry } from "../../../../utils/promise";
// Due to issues such as https://github.com/vector-im/element-web/issues/25277, we add retry
// attempts to all of the dynamic imports in this file
const RETRY_COUNT = 3;
const SendComposer = lazy(() => retry(() => import("./SendWysiwygComposer"), RETRY_COUNT));
const EditComposer = lazy(() => retry(() => import("./EditWysiwygComposer"), RETRY_COUNT));
const SendComposer = lazy(() => import("./SendWysiwygComposer"));
const EditComposer = lazy(() => import("./EditWysiwygComposer"));
export const dynamicImportSendMessage = async (
message: string,
isHTML: boolean,
params: SendMessageParams,
): Promise<ISendEventResponse | undefined> => {
const { sendMessage } = await retry(() => import("./utils/message"), RETRY_COUNT);
const { sendMessage } = await import("./utils/message");
return sendMessage(message, isHTML, params);
};
@ -55,7 +51,7 @@ export const dynamicImportConversionFunctions = async (): Promise<{
*/
plainToRich(plain: string, inMessageFormat: boolean): Promise<string>;
}> => {
const { richToPlain, plainToRich } = await retry(() => import("@vector-im/matrix-wysiwyg"), RETRY_COUNT);
const { richToPlain, plainToRich } = await import("@vector-im/matrix-wysiwyg");
return { richToPlain, plainToRich };
};

View File

@ -10,6 +10,7 @@ const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackInjectPreload = require("@principalstudio/html-webpack-inject-preload");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const VersionFilePlugin = require("webpack-version-file-plugin");
const { RetryChunkLoadPlugin } = require("webpack-retry-chunk-load-plugin");
// Environment variables
// RIOT_OG_IMAGE_URL: specifies the URL to the image which should be used for the opengraph logo.
@ -690,6 +691,13 @@ module.exports = (env, argv) => {
templateString: "<%= extras.VERSION %>",
extras: { VERSION },
}),
// Due to issues such as https://github.com/vector-im/element-web/issues/25277 we should retry chunk loading
new RetryChunkLoadPlugin({
cacheBust: `() => Date.now()`,
retryDelay: 500,
maxRetries: 3,
}),
].filter(Boolean),
output: {

View File

@ -10085,6 +10085,11 @@ prettier@3.4.2:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f"
integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==
prettier@^2.6.2:
version "2.8.8"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
pretty-error@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"
@ -12411,6 +12416,13 @@ webpack-merge@^6.0.1:
flat "^5.0.2"
wildcard "^2.0.1"
webpack-retry-chunk-load-plugin@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/webpack-retry-chunk-load-plugin/-/webpack-retry-chunk-load-plugin-3.1.1.tgz#44aefc21abd01769ecd07f9a200a58a78caf930c"
integrity sha512-BKq/7EcelyWUUI6SeBaUKB1G+fSZP0rlxIwRQ+aO6mK5tffljaHdpJ4I2q54rpaaKjSbwbZRQlaITXe93SL9nA==
dependencies:
prettier "^2.6.2"
webpack-sources@^3.2.3:
version "3.2.3"
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"