Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Static 404 page for chunk issue (#17168)

Browse Source
This commit is contained in:
Hetu Nandu 2022-09-30 11:57:29 +05:30 committed by GitHub
parent ca5499c358
commit 6db40c1a8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 179 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/client/craco.build.config.js
View File

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

1
app/client/package.json
View File

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

BIN
app/client/public/404-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

114
app/client/public/404.css Normal file
View File

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

37
app/client/public/404.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon"
href="https://res.cloudinary.com/dwpfockn8/image/upload/v1597920848/favicons/favicon-orange_pxfmdc.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Appsmith</title>
<link rel="stylesheet" href="404.css">
</head>
<body>
<div class="header-root">
<header class="appsmith-header">
<div class="appsmith-logo">
<svg viewBox="0 0 923 283" xmlns="http://www.w3.org/2000/svg"><g fill="#1a1a1a"><path d="m580.51 93.21a9.45 9.45 0 0 1 -2.93-7 10 10 0 0 1 10-10 9.45 9.45 0 0 1 7 2.93 9.77 9.77 0 0 1 2.86 7.08 9.45 9.45 0 0 1 -2.93 7 9.6 9.6 0 0 1 -6.94 2.86 9.78 9.78 0 0 1 -7.06-2.87z"></path><path d="m122.81 178.78q-1.29-2.29-2-9-7.44 10.74-23.75 10.73-12.17 0-19.39-5.86t-7.22-16.32q0-20.17 28.33-23l11.16-1c3.72-.47 6.39-1.36 8-2.64a7 7 0 0 0 2.43-5.8q0-4.72-3.07-6.94t-10.38-2.22q-7.86 0-11.3 2.65c-2.29 1.77-3.63 4.79-4 9.09h-17.75q1.57-25.18 33.2-25.19 30.77 0 30.76 22.18v39.35q0 9.74 3 14zm-7.73-15.78q5.3-4.65 5.29-13.38v-6.72c-1.71 1.53-4.53 2.53-8.44 3l-9.73 1.1q-7.2.87-10.2 3.37a8.79 8.79 0 0 0 -3.08 7.23 9 9 0 0 0 3.19 7.4q3.23 2.64 9.23 2.64 8.45-.03 13.74-4.64z"></path><path d="m227.26 113.67q8.88 10.59 8.87 28.19t-8.87 28q-9 10.59-24.18 10.59t-22.9-11.3v37.63h-18v-101.84h17.31v10.59q8-12.3 23.61-12.31 15.15 0 24.16 10.45zm-28.47 51.94q8.86 0 14-6.44t5-17.88q0-11.31-4.94-17.25t-14.09-5.94q-9 0-14 6.16t-5 17.6q0 11.58 5.15 17.6 4.86 6.15 13.88 6.15z"></path><path d="m320 113.67q8.88 10.59 8.87 28.19t-8.87 28q-9 10.59-24.18 10.59t-22.9-11.3v37.63h-18v-101.84h17.32v10.59q8-12.3 23.61-12.31 15.09 0 24.15 10.45zm-28.47 51.94q8.86 0 14-6.44t5-17.88q0-11.31-4.94-17.25t-14.09-5.94q-9 0-14 6.16t-5 17.6q0 11.58 5.16 17.6 4.8 6.15 13.82 6.15z"></path><path d="m345.13 155.31h17.6q.72 6.87 4.51 9.73t11.95 2.86q14.6 0 14.6-8.87a7 7 0 0 0 -3.15-6.15q-3.15-2.15-11.31-3.58l-8.44-1.43q-24.18-4-24.18-22.32 0-10.45 8-16.39t22.61-5.94q31.62 0 32.63 25h-17q-.29-6.57-4.15-9.37t-11.45-2.79q-12.88 0-12.88 8.59a6.75 6.75 0 0 0 2.86 5.79q2.87 2.07 9.45 3.22l9.3 1.43q13.45 2.43 19.53 7.73t6.08 14.74q0 11.16-8.58 17.17t-24.19 6q-32.34.05-33.79-25.42z"></path><path d="m535.09 110.38q6.79 7.16 6.8 19.6v48.8h-18v-45.94q0-14-12.74-14a13.9 13.9 0 0 0 -11.15 4.92q-4.21 4.93-4.22 14.38v40.64h-17.86v-45.94q0-14-12.87-14a13.73 13.73 0 0 0 -10.95 4.94q-4.23 4.93-4.22 14.38v40.64h-18v-73.86h17.46v10.59q7.57-12.3 21-12.31 16.89 0 22.9 13.74 8.29-13.74 22.89-13.74 12.17 0 18.96 7.16z"></path><path d="m680 118.68h-23v39.92q0 3.57 1.93 5t6.47 1.4h13.17v13.74c-3.91.38-14.07.57-16.46.57q-12 0-17.53-4.51t-5.51-14.38v-41.74h-16.74v-13.74h16.74v-24.65h17.93v24.65h23z"></path><path d="m760.66 110.16q6.95 6.95 6.94 19.68v48.94h-18v-45.94q0-14-13.88-14a15.65 15.65 0 0 0 -11.72 4.92q-4.78 4.93-4.79 13.66v41.36h-18v-98.49h18v34.52q8.44-11.58 22.46-11.59 12.06 0 18.99 6.94z"></path></g><path d="m782.16 203.1v-13.74h70.4v13.74z" fill="#ff6d2d"></path><path d="m596.75 165.04v-60.1h-37.91v13.74h19.89v46.36h-19.89v13.74h57.8v-13.74z" fill="#1a1a1a"></path></svg>
</div>
</header>
</div>
<div class="main">
<img src="404-image.png" alt="404 image" class="not-found-img"/>
<p class="bold-text">We couldn’t load some JavaScript files for the operation.</p>
<p>A refresh usually works, but sometimes, it may take us a bit to get those files for you. <br> We'll auto-refresh this page every two minutes.</p>
<div class="button-container">
<span class="button primary" onclick="refresh()">Refresh</span>
</div>
</div>
</body>
<script type="application/javascript">
setTimeout(() => {
refresh();
},120000);
function refresh() {
history.back();
}
</script>
</html>

1
app/client/public/index.html
View File

@ -100,7 +100,6 @@
return window.localStorage.setItem(key, value);
}
};
window.addEventListener("DOMContentLoaded", (event) => {
document.getElementById("loader").style.width = "50vw";
});

4
app/client/src/index.tsx
View File

@ -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() {

12
app/client/yarn.lock
View File

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