Added error hanling logic #44

.env.example

@@ -5,3 +5,4 @@ DATABASE_URL=postgres://user:pass@localhost:5432/dbname
 TEST_DATABASE_URL=postgres://user:pass@localhost:5432/test-dbname
 JWT_SECRET=changeIt!
 JWT_EXPIRATION=7d
+SENTRY_DSN=https://<key>@sentry.io/<project>

.eslintrc

@@ -4,6 +4,9 @@
     "airbnb",
     "plugin:jsx-a11y/recommended"
   ],
+  "globals": {
+    "Kit": true
+  },
   "env": {
     "node": true,
     "browser": true,

README.md

@@ -2,6 +2,14 @@
 
 This starter kit is designed to help you start project as soon as possible. It contain all necessary things to develop and maintain a project.
 
+## Before start
+
+You need to read these docs: 
+
+1. [Error handling](/docs/error.md)
+
+Remove all code which we use for showing template opportunities. We left indicator for every place which need to remove `// REMOVE_PROD`
+
 ## Getting started
 
 In this project we used [ESLint](https://eslint.org/docs/user-guide/integrations#editors) and [Stylelint](https://stylelint.io/user-guide/complementary-tools/#editor-plugins), so at the beginning check your code editor plugins or settings to support these linters.
@@ -112,3 +120,132 @@ Service worker file is generated and connected via [Workbox webpack plugin](http
 ## Swagger
 
 Project uses [Swagger](https://swagger.io) to document documentation API routes. You can check [example comments](https://github.com/keenethics/node-react-starter-kit/blob/60e07d395300961f3971f8586e2e23d2dbd0f5ea/server/routes/user.route.js#L9) and follow same [convention](https://swagger.io/docs/specification/basic-structure/).
+
+## Error handling
+
+This is a document how we most work with **Error** on current project.
+
+For correct works with **Error** in project please read [this article](https://expressjs.com/en/guide/error-handling.html) and use `Kit.CustomError` as `Error` object
+
+Example of handling:
+
+```js
+router.get('/error', (req, res, next) => {
+  try {
+    // ...some code
+  } catch(e) {
+    next(new Kit.CustomError('UNAUTHORIZED_ACCESS', 401));
+  }
+});
+```
+
+### Error structure
+
+This structure you must send to client when error is happened and you can get this structure from `Kit.CustomError` by `.get()` method
+
+```js
+{
+  "errors": [
+    {
+      "parameter": "start_time",
+      "details": "invalid date",
+      "code": "INVALID_PARAMETER",
+      "value": "",
+      "message": "Expected time, got \"\" for start_time",
+      "userMessage": "Expected time, got \"\" for start_time"
+    }
+  ],
+  "request": {
+    "params": {
+      "account_id": "hkk5"
+    }
+  },
+  "metadata": {}
+}
+```
+
+## Error codes & what they mean
+
+<table>
+  <thead>
+    <tr>
+      <th>HTTP Code</th>
+      <th>Error Code</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>403</td>
+      <td>ACCOUNT_NOT_FOUND</td>
+    </tr>
+    <tr>
+      <td>403</td>
+      <td>ACTION_NOT_ALLOWED</td>
+    </tr>
+    <tr>
+      <td>400</td>
+      <td>EXCLUSIVE_PARAMETERS</td>
+    </tr>
+    <tr>
+      <td>400</td>
+      <td>FEATURE_NOT_AVAILABLE</td>
+    </tr>
+    <tr>
+      <td>400</td>
+      <td>ILLEGAL_CHARACTERS</td>
+    </tr>
+    <tr>
+      <td>500</td>
+      <td>INTERNAL_ERROR</td>
+    </tr>
+    <tr>
+      <td>400</td>
+      <td>INVALID_PARAMETER</td>
+    </tr>
+    <tr>
+      <td>400</td>
+      <td>INVALID_USER</td>
+    </tr>
+    <tr>
+      <td>400</td>
+      <td>INVALID_USER_ID</td>
+    </tr>
+    <tr>
+      <td>400</td>
+      <td>MISSING_PARAMETERS</td>
+    </tr>
+    <tr>
+      <td>404</td>
+      <td>NOT_FOUND</td>
+    </tr>
+    <tr>
+      <td>400</td>
+      <td>REQUEST_TOO_COMPLEX</td>
+    </tr>
+    <tr>
+      <td>404</td>
+      <td>ROUTE_NOT_FOUND</td>
+    </tr>
+    <tr>
+      <td>503</td>
+      <td>SERVICE_UNAVAILABLE</td>
+    </tr>
+    <tr>
+      <td>503</td>
+      <td>OVER_CAPACITY</td>
+    </tr>
+    <tr>
+      <td>429</td>
+      <td>TOO_MANY_REQUESTS</td>
+    </tr>
+    <tr>
+      <td>401</td>
+      <td>UNAUTHORIZED_ACCESS</td>
+    </tr>
+    <tr>
+      <td>403</td>
+      <td>USER_NOT_FOUND</td>
+    </tr>
+  </tbody>
+</table>
+

client/components/common/Navigation.jsx

@@ -15,6 +15,9 @@ const Navigation = () => (
         <li role="menuitem">
           <NavLink to="/form-components">Form components</NavLink>
         </li>
+        <li role="menuitem">
+          <NavLink to="/example-components">Example page</NavLink>
+        </li>
       </ul>
     </div>
   </nav>

client/pages/Example.jsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import { Button } from 'Form';
+
+class ExampleComponents extends Component {
+  state = {
+    error: '',
+  }
+
+  showError = () => {
+    fetch('/api/test/error')
+      .then(response => response.json())
+      .then(data => this.setState({ error: JSON.stringify(data) }));
+  }
+
+  render() {
+    const { error } = this.state;
+
+    return (
+      <div className="container">
+        <Button className="red" onClick={this.showError}>Show Error Message</Button>
+        <p>
+          {`Error: ${error}`}
+        </p>
+      </div>
+    );
+  }
+}
+
+export default ExampleComponents;

client/routing/Routes.jsx

@@ -5,6 +5,7 @@ import MainLayout from 'Layout/Main';
 
 import Index from 'Pages/Index';
 import FormComponents from 'Pages/FormComponents';
+import ExampleComponents from 'Pages/Example';
 import NoMatch from 'Pages/NoMatch';
 
 const Routes = () => (
@@ -13,6 +14,7 @@ const Routes = () => (
       <Switch>
         <Route path="/" component={Index} exact />
         <Route path="/form-components" component={FormComponents} />
+        <Route path="/example-components" component={ExampleComponents} />
         <Route component={NoMatch} />
       </Switch>
     </MainLayout>