Handle syntax errors.

3 years ago · f8a46b8148
2 changed files with 62 additions and 23 deletions
--- a/layouts/error.hbs
+++ b/layouts/error.hbs
@ -0,0 +1,17 @@
+<html lang="en">
+
+{{> (include_partial "layouts/partials/head") }}
+
+<body>
+
+<main>
+  <div class="container" style="max-width: 1280px; margin: 1rem auto;">
+    <h1>Syntax Error:</h1>
+    <pre style="padding: 10px 15px; background-color: #ffe6e6; border: 1px solid red; border-radius: 0.25rem; overflow: auto">{{err}}</pre>
+  </div>
+</main>
+
+{{> (include_partial "layouts/partials/scripts") }}
+
+</body>
+</html>
--- a/server.js
+++ b/server.js
@ -38,8 +38,9 @@ buildScriptFiles()
 * Init server
 */

-let port = 3000; // This variable is used in *.hbs and it will be updated once BrowserSync is ready.
+let port = 3000; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
 let previewFrameUrl = `http://localhost:${port}`; // This variable is used in *.hbs and it will be updated once BrowserSync is ready.
+const dataFiles = prepareListOfDataFiles(await fs.readdir('./data'));
 const app = express();

 const hbs = create({
@ -61,7 +62,9 @@ app.engine('.hbs', hbs.engine);
 app.set('view engine', '.hbs');
 app.set('views', projectDir + 'layouts');

-const dataFiles = prepareListOfDataFiles(await fs.readdir('./data'));
+//
+// Routes
+//

 app.get('/', async (req, res) => {
  let jsonFileName = req.query.data ? req.query.data : 'default';
@ -149,24 +152,6 @@ app.get('/publish', async (req, res) => {
  await fs.unlink('./dist.zip');
 });

-function getListOfDesignPreviewFiles(jsonDataFileName, previewFiles) {
-  return previewFiles
-    .filter(fileName => {
-      return fileName.startsWith(jsonDataFileName + '.');
-    })
-    .map(fileName => {
-      const fileData = fileName.split('.');
-      const fileFormat = fileData.pop();
-      const previewSize = fileData.pop();
-
-      return {
-        dataSource: jsonDataFileName,
-        widthDimension: Number.parseInt(previewSize, 10),
-        url: `/preview/${fileName}`,
-      };
-    });
-}
-
 app.get('/data', async (req, res) => {
  let jsonDataFileName = req.query.name ? req.query.name : 'default';
  const data = await getBlockConfigs(jsonDataFileName);
@ -181,6 +166,10 @@ app.get('/data', async (req, res) => {
  });
 });

+// Errors handler
+app.use(handleSyntaxErrors);
+
+// Static Files
 app.use(express.static('src'));
 app.use(express.static('design'));
 app.use(express.static(projectDir + 'layouts'));
@ -191,9 +180,28 @@ port = bsOptions.port;
 previewFrameUrl = bsOptions.previewFrameUrl;
 await open(bsOptions.devToolUrl);

-/**
- * Functions
- */
+
+//
+// Functions
+//
+
+function getListOfDesignPreviewFiles(jsonDataFileName, previewFiles) {
+  return previewFiles
+    .filter(fileName => {
+      return fileName.startsWith(jsonDataFileName + '.');
+    })
+    .map(fileName => {
+      const fileData = fileName.split('.');
+      const fileFormat = fileData.pop();
+      const previewSize = fileData.pop();
+
+      return {
+        dataSource: jsonDataFileName,
+        widthDimension: Number.parseInt(previewSize, 10),
+        url: `/preview/${fileName}`,
+      };
+    });
+}

 function startBrowserSync() {
  return new Promise((resolve, reject) => {
@ -371,3 +379,17 @@ async function zipProject() {
  // 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehand
  await archive.finalize();
 }
+
+function handleSyntaxErrors(err, req, res, next) {
+  if (err) {
+    return res.render('error', {
+      helpers: {
+        include_partial: (path) => projectDir + path,
+      },
+      err
+    });
+  }
+
+  next();
+}
+