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

Will also fix some Playwright flakes

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

package.json

@@ -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"
     },

src/components/views/rooms/wysiwyg_composer/DynamicImportWysiwygComposer.tsx

@@ -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 };
 };

webpack.config.js

@@ -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: {

yarn.lock

@@ -10085,6 +10085,11 @@ [email protected]:
   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"