Chromium and errors optimization (#25)

* Add debug information

* Add Progress log

* Optimize errors

client/src/app.tsx

@@ -46,10 +46,11 @@ addLocaleData([...en, ...ru]);
 export const App = () => {
   return (<Provider store={ AppStore }>
     <ConnectedIntlProvider textComponent={ TextComponent }>
-      <BrowserRouter basename={`/${locale}`}>
+      <BrowserRouter basename={ `/${locale}` }>
         <LastLocationProvider>
           <Switch>
-            <Route path='/server-error' exact={ true } component={ ServerErrorComponent }/>
+            { window.__HAS_ERROR__ && <Route path='/' component={ ServerErrorComponent }/> }
+
             <Route path='/' component={ AppComponent }/>
           </Switch>
         </LastLocationProvider>

client/src/pages/server-error/server-error.component.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 
 import './server-error.scss';
 
@@ -11,7 +10,7 @@ export class ServerErrorComponent extends React.PureComponent {
           Unhandled Error occurred
         </h2>
 
-        <Link to={'/'}>Go back to home</Link>
+        <a href={ '/' }>Go back to home</a>
       </div>
     );
   }

client/src/typings.d.ts

@@ -13,6 +13,7 @@ declare module 'highcharts-react-official';
 
 interface Window {
   __PRELOADED_STATE__: any;
+  __HAS_ERROR__: number;
   __APP_CONFIG__: {
     apiUrl: string;
   };

server/app.server.tsx

@@ -21,7 +21,7 @@ const TextComponent = (props: any) => {
 
 addLocaleData([...en, ...ru]);
 
-export const App = ({ location, context, preloadedState }: any) => {
+export const App = ({ location, context, preloadedState, hasError }: any) => {
   const languages = ['en', 'ru'];
   let locale      = languages[0];
 
@@ -31,29 +31,8 @@ export const App = ({ location, context, preloadedState }: any) => {
     locale = pathLanguage;
   }
 
-  preloadedState.settings.locale = locale;
-
-  const AppStore = configureStore(preloadedState);
-
-  return (<Provider store={ AppStore }>
-    <ConnectedIntlProvider textComponent={ TextComponent }>
-      <StaticRouter location={ location } context={ context } basename={ `/${locale}` }>
-        <LastLocationProvider>
-          <AppComponent/>
-        </LastLocationProvider>
-      </StaticRouter>
-    </ConnectedIntlProvider>
-  </Provider>);
-};
-
-export const Error = ({ location, context, preloadedState }: any) => {
-  const languages = ['en', 'ru'];
-  let locale      = languages[0];
-
-  const pathLanguage = location.split('/')[1];
-
-  if (languages.includes(pathLanguage)) {
-    locale = pathLanguage;
+  if (!preloadedState.settings) {
+    preloadedState.settings = {};
   }
 
   preloadedState.settings.locale = locale;
@@ -62,9 +41,9 @@ export const Error = ({ location, context, preloadedState }: any) => {
 
   return (<Provider store={ AppStore }>
     <ConnectedIntlProvider textComponent={ TextComponent }>
-      <StaticRouter location={ location } context={ context }>
+      <StaticRouter location={ location } context={ context } basename={ `/${locale}` }>
         <LastLocationProvider>
-          <ServerErrorComponent/>
+          { hasError ? <ServerErrorComponent/> : <AppComponent/> }
         </LastLocationProvider>
       </StaticRouter>
     </ConnectedIntlProvider>

server/index.tsx

@@ -10,13 +10,13 @@ import sprite from 'svg-sprite-loader/runtime/sprite.build';
 
 import { serverHtml } from './server.html';
 
-import { App, Error } from './app.server';
+import { App } from './app.server';
 
 import '../client/src/config/axios.config';
 
 import { AddressPage } from './pages/address.page';
 import { BlockPage } from './pages/block.page';
-import { ChartImage, generateImages } from './pages/chart-image';
+import { ChartImage, runImageGeneration } from './pages/chart-image';
 import { ChartPage } from './pages/charts.page';
 import { DataPage } from './pages/data.page';
 import { SearchPage } from './pages/search.page';
@@ -67,49 +67,14 @@ server.use('/:locale?/search', SearchPage);
 
 server.use((req: any, res, next) => {
   axios.interceptors.response.use(response => response, () => {
-    if (req.explorer.skipError) {
-      return;
+    if (!req.explorer.skipError) {
+      req.explorer.hasError = true;
     }
-
-    return res.redirect('/server-error');
   });
 
   next();
 });
 
-server.use('/:locale?/server-error', (req: any, res) => {
-  const context: any = {};
-
-  const body = renderToString(
-    (
-      <Error location={ req.url }
-             context={ context }
-             preloadedState={ req.explorer.preloadedState }/>
-    )
-  );
-
-  const helmet = Helmet.renderStatic();
-
-  const htmlToRender = serverHtml({
-    assets: manifest.assets,
-    body,
-    helmet,
-    preloadedState: req.explorer.preloadedState,
-    spriteContent: sprite.stringify()
-  });
-
-  if (context.url) {
-    res.writeHead(302, {
-      Location: context.url
-    });
-
-    res.end();
-  } else {
-    res.write(htmlToRender);
-    res.end();
-  }
-});
-
 server.use('*', Preloader);
 
 server.use('/:locale?', DataPage);
@@ -128,6 +93,7 @@ server.get('*', (req: any, res) => {
     (
       <App location={ req.url }
            context={ context }
+           hasError={ req.explorer.hasError }
            preloadedState={ req.explorer.preloadedState }/>
     )
   );
@@ -137,6 +103,7 @@ server.get('*', (req: any, res) => {
   const htmlToRender = serverHtml({
     assets: manifest.assets,
     body,
+    hasError: req.explorer.hasError,
     helmet,
     preloadedState: req.explorer.preloadedState,
     spriteContent: sprite.stringify()
@@ -157,22 +124,6 @@ server.get('*', (req: any, res) => {
 server.listen(port, () => {
   console.debug(`App is listening on port ${port}!`);
 
-  generateImages()
-    .then(() => {
-      console.debug('images generated...');
-    })
-    .catch((e) => {
-      console.debug(e);
-    });
-
-  setInterval(() => {
-    generateImages()
-      .then(() => {
-        console.debug('images generated...');
-      })
-      .catch((e) => {
-        console.debug(e);
-      });
-  }, 1000 * 60 * 10);
+  runImageGeneration();
 });
 

server/pages/address.page.tsx

@@ -30,6 +30,11 @@ const render = (req: any, res: any, next: any) => {
 
           next();
         });
+    })
+    .catch(() => {
+      req.explorer.hasError = true;
+
+      next();
     });
 };
 

server/pages/block.page.tsx

@@ -24,6 +24,11 @@ const render = (req: any, res: any, next: any) => {
         }
       };
 
+      next();
+    })
+    .catch(() => {
+      req.explorer.hasError = true;
+
       next();
     });
 };

server/pages/chart-image.tsx

@@ -9,7 +9,7 @@ export const ChartImage = express.Router();
 const cacheRoot = fs.realpathSync(process.cwd()) + '/tmp/cache/';
 fs.ensureDirSync(cacheRoot);
 
-export const generateImages = async () => {
+const generateImages = async () => {
   const chartTypes = [
     'total',
     'blockchain-size',
@@ -54,3 +54,22 @@ export const generateImages = async () => {
 };
 
 ChartImage.use('/', express.static(cacheRoot));
+
+export const runImageGeneration = () => {
+  console.debug('[PROGRESS] Generating charts preview images...');
+
+  generateImages()
+    .then(() => {
+      console.debug('[SUCCESS] Charts preview generated!');
+
+      setTimeout(() => {
+        runImageGeneration();
+      }, 1000 * 60 * 10);
+    })
+    .catch((e) => {
+      console.debug('[FAILURE] Charts preview generation failed!');
+      console.debug(e);
+
+      runImageGeneration();
+    });
+};

server/pages/charts.page.tsx

@@ -21,6 +21,11 @@ ChartPage.get('/*', (req: any, res, next) => {
         chart: preloadedState,
       };
 
+      next();
+    })
+    .catch(() => {
+      req.explorer.hasError = true;
+
       next();
     });
 });

server/pages/data.page.tsx

@@ -23,6 +23,11 @@ DataPage.get('/', (req: any, res, next) => {
 
       req.explorer.preloadedState = { ...req.explorer.preloadedState, ...preloadedState };
 
+      next();
+    })
+    .catch(() => {
+      req.explorer.hasError = true;
+
       next();
     });
 });

server/pages/stats.page.tsx

@@ -25,6 +25,11 @@ StatsPage.get('/', (req: any, res, next) => {
         }
       };
 
+      next();
+    })
+    .catch(() => {
+      req.explorer.hasError = true;
+
       next();
     });
 });

server/pages/transaction.page.tsx

@@ -25,6 +25,11 @@ const render = (req: any, res: any, next: any) => {
         }
       };
 
+      next();
+    })
+    .catch(() => {
+      req.explorer.hasError = true;
+
       next();
     });
 };

server/preloader.tsx

@@ -30,7 +30,7 @@ Preloader.get('*', (req: any, res, next) => {
 
       const apiPreloadedState = apiReducer(apiInitialState, {
         payload: {
-          data: apiData,
+          data: apiData
         },
         type: GET_API_SUCCESS
       });
@@ -39,7 +39,7 @@ Preloader.get('*', (req: any, res, next) => {
         ...req.explorer.preloadedState,
         api: {
           ...apiPreloadedState,
-          preloaded: true,
+          preloaded: true
         },
         settings: {
           isScriptsDisplayed: true,
@@ -51,6 +51,10 @@ Preloader.get('*', (req: any, res, next) => {
         }
       };
 
+      next();
+    })
+    .catch(() => {
+      req.explorer.hasError = true;
       next();
     });
 });

server/server.html.tsx

@@ -1,4 +1,4 @@
-export const serverHtml = ({ body, assets, helmet, spriteContent, preloadedState }: { body: string, assets: any, helmet: any, spriteContent: any, preloadedState: any }) => `<!DOCTYPE html><html>
+export const serverHtml = ({ body, assets, helmet, spriteContent, preloadedState, hasError }: { body: string, assets: any, helmet: any, spriteContent: any, preloadedState: any, hasError: boolean }) => `<!DOCTYPE html><html>
     <head>
       <meta charSet='utf-8'/>
       <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no'/>
@@ -21,6 +21,7 @@ export const serverHtml = ({ body, assets, helmet, spriteContent, preloadedState
   JSON.stringify(preloadedState)
     .replace(/</g, '\\\u003c')
   }
+          window.__HAS_ERROR__ = ${ hasError ? 1 : 0};
       </script>
     
     <script src='/${assets['main.js']}'></script>