Add new troubleshooting view, fixes #318

components/Header.vue

@@ -3,7 +3,7 @@
                         role="navigation",
                         aria-label="main navigation")
     .container.is-flex-touch
-      .navbar-brand
+      .navbar-brand(v-if="$store.state.store?.name")
         nuxt-link.navbar-item(exact, :to="getHomeURL")
           strong
             i {{$store.state.store.name}}
@@ -34,7 +34,7 @@ export default {
     ...cartGetters(["total"]),
     ...mapGetters(["onionURL"]),
     isIndexRoute() {
-      return this.$route.name === "index"
+      return this.$store.state.apiError ? true : this.$route.name === "index"
     },
     getHomeURL() {
       const storeID = this.$route.params.id

components/TroubleshootingGuide.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="container">
+    <div class="section">
+      <div class="columns is-centered">
+        <div class="column is-half">
+          <h1 class="is-size-3">Store POS unconfigured</h1>
+          <p class="pb-2">Unable to access Merchants API. Is it running?</p>
+          <b-collapse :open="false" aria-id="contentIdForA11y1">
+            <template #trigger="props">
+              <b-button
+                label="Error details"
+                type="is-info"
+                aria-controls="contentIdForA11y1"
+                :aria-expanded="props.open"
+              />
+            </template>
+            <div class="notification">
+              <div class="content">
+                <code>{{ $store.state.apiError }}</code>
+              </div>
+            </div>
+          </b-collapse>
+          <p class="pt-3">
+            Check out
+            <a
+              href="https://docs.bitcartcc.com/support-and-community/troubleshooting-an-issue"
+              target="_blank"
+              >this guide</a
+            >
+            for more information on how to troubleshoot the issue.
+          </p>
+          <p class="text-h6">
+            Quick steps to try:<br />
+            1. Ensure merchants API is running. If you are developing locally,
+            BitcartCC assumes it is running on port 8000 by default.<br />
+            2. Make sure <code>BITCART_ADMIN_API_URL</code> is set to the
+            correct URL.<br />
+            3. If you are using BitcartCC with ssl enabled, Merchants API's ssl
+            certificate might not have been generated yet. Please retry a bit
+            later.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

layouts/default.vue

@@ -5,8 +5,11 @@
         UIExtensionSlot(name="header")
           app-header
       .hero-body
-        nuxt
-        UIExtensionSlot(name="body")
+        div(v-if="$store.state.apiError")
+          troubleshooting-guide(title="Store POS unconfigured")
+        div(v-else)
+          nuxt
+          UIExtensionSlot(name="body")
       .hero-foot
         UIExtensionSlot(name="footer")
           .container
@@ -20,20 +23,24 @@ import UIExtensionSlot from "@/components/UIExtensionSlot"
 import Header from "@/components/Header"
 import VERSION from "@/version"
 import CartSidebar from "@/components/CartSidebar"
+import TroubleshootingGuide from "@/components/TroubleshootingGuide"
 
 export default {
   components: {
     UIExtensionSlot,
     AppHeader: Header,
     AppCartSidebar: CartSidebar,
+    TroubleshootingGuide,
   },
   data() {
     return {
       VERSION,
     }
   },
   async fetch() {
-    await this.$store.dispatch("syncStats")
+    try {
+      await this.$store.dispatch("syncStats")
+    } catch (e) {}
   },
   head() {
     const themeURL = this.$store.state.store?.theme_settings?.store_theme_url

store/index.js

@@ -8,6 +8,7 @@ export const state = () => ({
   path: "/",
   onion: false,
   storeID: 1,
+  apiError: null,
 })
 
 export const mutations = {
@@ -38,6 +39,9 @@ export const mutations = {
   policies(state, val) {
     state.policies = val
   },
+  apiError(state, value) {
+    state.apiError = value
+  },
 }
 export const getters = {
   url: ({ url }) => url,
@@ -66,12 +70,17 @@ export const getters = {
 export const actions = {
   async nuxtServerInit({ commit, dispatch }, { req, $axios, params }) {
     await dispatch("loadEnv", { env: this.$config, req })
-    const { data } = await $axios.get("/manage/stores")
-    commit("policies", data)
-    const storeID = params.id ? params.id : data.pos_id
-    commit("storeID", storeID)
-    const { data: services } = await $axios.get("/tor/services")
-    commit("services", services)
+    try {
+      const { data } = await $axios.get("/manage/stores")
+      commit("policies", data)
+      const storeID = params.id ? params.id : data.pos_id
+      commit("storeID", storeID)
+      const { data: services } = await $axios.get("/tor/services")
+      commit("services", services)
+      commit("apiError", null) // reset error
+    } catch (e) {
+      commit("apiError", e)
+    }
   },
   async loadEnv({ commit }, { env, req }) {
     let onionURL = null

store/product/actions.js

@@ -40,6 +40,7 @@ export default {
           .get(`/products/categories?store=${this.state.storeID}`)
           .then((resp) => commit("SET_CATEGORIES", resp.data))
       })
+      .catch((e) => [])
   },
   fetchCount({ commit }) {
     return this.$axios