diff --git a/app/client/craco.build.config.js b/app/client/craco.build.config.js index 354a2167b3..9d5f3b698e 100644 --- a/app/client/craco.build.config.js +++ b/app/client/craco.build.config.js @@ -4,6 +4,7 @@ const { merge } = require("webpack-merge"); const common = require("./craco.common.config.js"); const WorkboxPlugin = require("workbox-webpack-plugin"); const CompressionPlugin = require("compression-webpack-plugin"); +const { RetryChunkLoadPlugin } = require("webpack-retry-chunk-load-plugin"); const env = process.env.REACT_APP_ENVIRONMENT; @@ -51,6 +52,18 @@ plugins.push( }), ); +plugins.push( + new RetryChunkLoadPlugin({ + // optional value to set the amount of time in milliseconds before trying to load the chunk again. Default is 0 + retryDelay: 3000, + // optional value to set the maximum number of retries to load the chunk. Default is 1 + maxRetries: 2, + // optional code to be executed in the browser context if after all retries chunk is not loaded. + // if not set - nothing will happen and error will be returned to the chunk loader. + lastResortScript: "window.location.href='/404.html';", + }), +); + module.exports = merge(common, { webpack: { plugins: plugins, diff --git a/app/client/package.json b/app/client/package.json index d113c851b1..0f57b4be38 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -164,6 +164,7 @@ "unescape-js": "^1.1.4", "url-search-params-polyfill": "^8.0.0", "webfontloader": "^1.6.28", + "webpack-retry-chunk-load-plugin": "^3.1.1", "worker-loader": "^3.0.2", "yjs": "^13.5.12", "zipcelx": "^1.6.2" diff --git a/app/client/public/404-image.png b/app/client/public/404-image.png new file mode 100644 index 0000000000..c962f6da35 Binary files /dev/null and b/app/client/public/404-image.png differ diff --git a/app/client/public/404.css b/app/client/public/404.css new file mode 100644 index 0000000000..3c267c1f2c --- /dev/null +++ b/app/client/public/404.css @@ -0,0 +1,114 @@ +body, html { + height: 100%; + overflow-x: hidden; + width: 100%; + background-color: #fff; + margin: 0; + color: #182026; + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif; + font-size: 14px; + font-weight: 400; + letter-spacing: 0; +} + +.header-root { + position: relative; + z-index: 9; +} + +.appsmith-header { + justify-content: normal; + background: white; + height: 48px; + color: white; + position: fixed; + top: 0px; + z-index: 9; + box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 4px; + display: flex; + width: 100%; + -webkit-box-align: center; + align-items: center; + padding: 0px 30px 0px 24px; + font-size: 10px; +} + +.appsmith-logo { + display: flex; + align-items: center; +} + +.appsmith-logo svg { + max-width: 110px; + width: 110px; +} + +.main { + display: flex; + align-items: center; + height: 90%; + flex-direction: column; + margin-top: 5%; + text-align: center; +} + +.not-found-img { + width: 35%; +} + +.bold-text { + font-family: system-ui; + font-weight: 700; + font-size: 24px; + margin: 24px 0 0; +} + +.body-text { + margin: 8px 0 0 ; +} + +.button-container { + display: grid; + grid-auto-flow: column; + justify-content: center; + align-content: center; + justify-items: center; + align-items: baseline; + grid-gap: 5px; +} + +.button { + width: auto; + height: 38px; + text-decoration: none; + outline: none; + text-transform: uppercase; + border-radius: 0; + font-size: 13px; + font-weight: 600; + line-height: 15px; + letter-spacing: 0.6px; + padding: 0 26px; + font-style: normal; + display: flex; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; + position: relative; + cursor: pointer; +} + +.primary { + background-color: #f86a2b; + color: #fff; + border: 1.2px solid #f86a2b; +} + +.secondary { + text-transform: uppercase; + background-color: transparent; + color: #f86a2b; + border: 1.2px solid #f86a2b; +} + diff --git a/app/client/public/404.html b/app/client/public/404.html new file mode 100644 index 0000000000..8d5c1bcadf --- /dev/null +++ b/app/client/public/404.html @@ -0,0 +1,37 @@ + + + + + + + + Appsmith + + + +
+
+ +
+
+
+ 404 image +

We couldn’t load some JavaScript files for the operation.

+

A refresh usually works, but sometimes, it may take us a bit to get those files for you.
We'll auto-refresh this page every two minutes.

+
+ Refresh +
+
+ + + diff --git a/app/client/public/index.html b/app/client/public/index.html index 6fec457ec2..f1db5b891a 100755 --- a/app/client/public/index.html +++ b/app/client/public/index.html @@ -100,7 +100,6 @@ return window.localStorage.setItem(key, value); } }; - window.addEventListener("DOMContentLoaded", (event) => { document.getElementById("loader").style.width = "50vw"; }); diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx index d6a658c65d..74ad84a453 100755 --- a/app/client/src/index.tsx +++ b/app/client/src/index.tsx @@ -18,13 +18,13 @@ import { StyledToastContainer } from "components/ads/Toast"; import localStorage from "utils/localStorage"; import "./assets/styles/index.css"; import "./polyfills/corejs-add-on"; +import GlobalStyles from "globalStyles"; // enable autofreeze only in development import { setAutoFreeze } from "immer"; +import AppErrorBoundary from "AppErrorBoundry"; const shouldAutoFreeze = process.env.NODE_ENV === "development"; setAutoFreeze(shouldAutoFreeze); -import AppErrorBoundary from "./AppErrorBoundry"; -import GlobalStyles from "globalStyles"; appInitializer(); function App() { diff --git a/app/client/yarn.lock b/app/client/yarn.lock index e0a1303705..6732e0e340 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -12126,6 +12126,11 @@ prettier@^1.18.2: version "1.19.1" resolved "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz" +prettier@^2.6.2: + version "2.7.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64" + integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== + pretty-bytes@^5.3.0: version "5.4.1" resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.4.1.tgz" @@ -15465,6 +15470,13 @@ webpack-merge@^5.8.0: clone-deep "^4.0.1" wildcard "^2.0.0" +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@^1.4.3: version "1.4.3" resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz"