Add an nice-looking error page

[pkarw]

In case of internal server error (for example ElasticSearch is not responding) we're currently displaying the very sad-looking message:

https://www.dropbox.com/s/rue8h3n3sur85bc/Screenshot%202018-09-03%2015.18.22.png?dl=0

We should create a kind of special error page based on the PageNotFound.

This page should:

• not contain dynamic data get from Elastic (for example categories)
• contain just the header + footer + styles

After creating such a page (and adding it to the routing) You need to add the redirect in case of error in here:
https://github.com/DivanteLtd/vue-storefront/blob/cd7ebcdd934b6dc4855287de2907f73548fd6f68/core/scripts/server.js#L81

[mercs600]

@pkarw @filrak To achieve error page without any async data we have to create new layout page without components which can use potential connection to some server service.

So we have to implement layout system, because right now App.vue use the same components for each route path

<template>
  <div id="app">
    <overlay v-if="overlayActive"/>
    <loader/>
    <div id="viewport" class="w-100 relative">
      <microcart/>
      <search-panel/>
      <wishlist/>
      <sidebar-menu/>
      <main-header/>
      <router-view/>
      <main-footer/>
      <notification/>
      <sign-up/>
      <newsletter-popup/>
      <cookie-notification/>
      <offline-badge/>
      <modal-switcher/>
      <order-confirmation :orders-data="ordersData"/>
    </div>
    <vue-progress-bar />
  </div>
</template>

So I created POC of layout components with default and plain template. You can pass in router/path setting what layout you want to use for specific path.

<template>
  <div id="app">
    <overlay v-if="overlayActive"/>
    <loader/>
    <div id="viewport" class="w-100 relative">
      <component :is="layout">
        <router-view/>
      </component>
    </div>
    <vue-progress-bar/>
  </div>
</template>

Check it please and let me know what do you think, maybe do you have better idea ? -> mercs600@d19e4c4

[pkarw]

@filrak
I don't like this solution as it's quite a massive change just for single error page. Maybe we can create just a plain HTML error page instead ...

[mercs600]

@pkarw Yes, now it's seems like this is big change for just error page, but in the future this feature will be required.

[pkarw]

OK, I'm not a frontend guy so would be great to hear what others think on this approach

[filrak]

@pkarw It's not that massive change. The problem is that by displaying header/footer we are also querying ES for some data so we need another layout without this data to display in case of error as @mercs600 said. We can just wrap content from App.vue into some Main.vue component to achieve what @mercs600 is talking about. The layout system will be in new theme tho so this task can be just done along with it.

[pkarw]

Ok, i think we need to fix it in the current theme as well
@mercs600 you can go along with Your solution but please take care of the naming to have all convention in place