@common-stack/frontend-stack-react 8.6.1-alpha.1 → 8.6.1-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/config/browser-env-config.js +44 -2
- package/package.json +10 -10
|
@@ -1,8 +1,50 @@
|
|
|
1
|
-
import {cleanEnv,str}from'envalid';import {getEnvironment}from'@common-stack/core';const env = getEnvironment();
|
|
1
|
+
import {cleanEnv,str,envalidErrorFormatter}from'envalid';import {getEnvironment}from'@common-stack/core';const env = getEnvironment();
|
|
2
|
+
/** Show a small banner with a reload button when env validation fails in the browser. */
|
|
3
|
+
const showEnvReloadBanner = (missingKeys) => {
|
|
4
|
+
if (typeof document === 'undefined')
|
|
5
|
+
return;
|
|
6
|
+
if (document.getElementById('__env-reload-banner'))
|
|
7
|
+
return;
|
|
8
|
+
const banner = document.createElement('div');
|
|
9
|
+
banner.id = '__env-reload-banner';
|
|
10
|
+
banner.style.cssText =
|
|
11
|
+
'position:fixed;top:0;left:0;right:0;z-index:99999;background:#fef2f2;border-bottom:2px solid #ef4444;' +
|
|
12
|
+
'padding:10px 16px;display:flex;align-items:center;justify-content:space-between;font-family:system-ui,sans-serif;font-size:14px;color:#991b1b;';
|
|
13
|
+
banner.innerHTML =
|
|
14
|
+
`<span>⚠ Environment failed to load (${missingKeys.join(', ')}). Some features may not work.</span>` +
|
|
15
|
+
`<button style="margin-left:12px;padding:4px 14px;background:#ef4444;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;white-space:nowrap">Reload page</button>`;
|
|
16
|
+
banner.querySelector('button').addEventListener('click', () => window.location.reload());
|
|
17
|
+
if (document.body) {
|
|
18
|
+
document.body.prepend(banner);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
document.addEventListener('DOMContentLoaded', () => document.body.prepend(banner));
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
// Custom reporter that warns in the browser instead of throwing TypeError.
|
|
25
|
+
// The default envalid reporter throws TypeError('Environment validation failed')
|
|
26
|
+
// in the browser, which crashes the entire page — logging a warning is safer.
|
|
27
|
+
const browserSafeReporter = ({ errors }) => {
|
|
28
|
+
const errorKeys = Object.keys(errors);
|
|
29
|
+
if (!errorKeys.length)
|
|
30
|
+
return;
|
|
31
|
+
const isBrowser = typeof window !== 'undefined';
|
|
32
|
+
if (isBrowser) {
|
|
33
|
+
envalidErrorFormatter(errors);
|
|
34
|
+
console.warn('[frontend-stack-react] Environment validation failed for: ' +
|
|
35
|
+
errorKeys.join(', ') +
|
|
36
|
+
'. Some features may not work correctly until the page is reloaded with a healthy backend.');
|
|
37
|
+
showEnvReloadBanner(errorKeys);
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
envalidErrorFormatter(errors);
|
|
41
|
+
process.exit(1);
|
|
42
|
+
}
|
|
43
|
+
};
|
|
2
44
|
const config = cleanEnv(env, {
|
|
3
45
|
GA_ID: str({ devDefault: 'G-xxxxxxx' }),
|
|
4
46
|
GRAPHQL_URL: str({ devDefault: __GRAPHQL_URL__ }),
|
|
5
47
|
LOCAL_GRAPHQL_URL: str({ default: __GRAPHQL_URL__ }),
|
|
6
48
|
GRAPHQL_SUBSCRIPTION_URL: str({ default: env?.GRAPHQL_URL?.replace(/^http/, 'ws') }),
|
|
7
49
|
LOG_LEVEL: str({ devDefault: 'debug' }),
|
|
8
|
-
});export{config};
|
|
50
|
+
}, { reporter: browserSafeReporter });export{config};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@common-stack/frontend-stack-react",
|
|
3
|
-
"version": "8.6.1-alpha.
|
|
3
|
+
"version": "8.6.1-alpha.10",
|
|
4
4
|
"description": "Client Module for react app",
|
|
5
5
|
"homepage": "https://github.com/cdmbase/fullstack-pro#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -32,14 +32,14 @@
|
|
|
32
32
|
"@apollo/client": "^3.9.0",
|
|
33
33
|
"@cdm-logger/client": "^9.0.17",
|
|
34
34
|
"@cdm-logger/server": "^9.0.17",
|
|
35
|
-
"@common-stack/cache-api-server": "8.
|
|
36
|
-
"@common-stack/client-core": "8.6.1-alpha.
|
|
37
|
-
"@common-stack/client-react": "8.6.1-alpha.
|
|
38
|
-
"@common-stack/components-pro": "8.6.1-alpha.
|
|
39
|
-
"@common-stack/core": "8.
|
|
40
|
-
"@common-stack/remix-router-redux": "8.
|
|
41
|
-
"@common-stack/server-core": "8.
|
|
42
|
-
"@common-stack/store-redis": "8.
|
|
35
|
+
"@common-stack/cache-api-server": "8.6.1-alpha.9",
|
|
36
|
+
"@common-stack/client-core": "8.6.1-alpha.9",
|
|
37
|
+
"@common-stack/client-react": "8.6.1-alpha.9",
|
|
38
|
+
"@common-stack/components-pro": "8.6.1-alpha.9",
|
|
39
|
+
"@common-stack/core": "8.6.1-alpha.9",
|
|
40
|
+
"@common-stack/remix-router-redux": "8.6.1-alpha.10",
|
|
41
|
+
"@common-stack/server-core": "8.6.1-alpha.9",
|
|
42
|
+
"@common-stack/store-redis": "8.6.1-alpha.9",
|
|
43
43
|
"@reduxjs/toolkit": "^2.2.6",
|
|
44
44
|
"@remix-run/express": "~2.16.0",
|
|
45
45
|
"@remix-run/node": "~2.16.0",
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
"publishConfig": {
|
|
107
107
|
"access": "public"
|
|
108
108
|
},
|
|
109
|
-
"gitHead": "
|
|
109
|
+
"gitHead": "f189899d1c8bd06af30fa35561a6698658e28a8a",
|
|
110
110
|
"typescript": {
|
|
111
111
|
"definition": "lib/index.d.ts"
|
|
112
112
|
}
|