Maintenance mode

You can activate the maintenance mode of your store by selecting your sales channel and then activating the maintenance mode under Status

Detecting maintenance mode via API

Maintenance mode is returned as an error from all of the endpoints. We can detect it by using onResponseError hook.

import { isMaintenanceMode } from "@shopware-pwa/helpers-next";

const apiClient = createAPIClient({
  baseURL: shopwareEndpoint,
  accessToken: shopwareAccessToken,
  contextToken: Cookies.get("sw-context-token"),
});

apiClient.hook("onResponseError", (response) => {
  const error = isMaintenanceMode(response._data?.errors ?? []);
  // do proper reaction to maintenance mode
});

Displaying maintenance page

WARNING

This example is for Nuxt 3 apps

Throwing MAINTENANCE_MODE error

Every error thrown within the application is automatically caught and the error.vue page is displayed.

import { isMaintenanceMode } from "@shopware-pwa/helpers-next";

apiClient.hook("onResponseError", (response) => {
  const error = isMaintenanceMode(response._data?.errors ?? []);
  if (error) {
    throw createError({
      statusCode: 503,
      statusMessage: "MAINTENANCE_MODE",
    });
  }
});

Displaying maintenance mode page

// error.vue
<script setup lang="ts">
const props = defineProps<{
  error: {
    statusCode: number;
    statusMessage: string;
    message: string;
  };
}>();

const isMaintenanceMode = computed(() => {
  return props.error.statusMessage === "MAINTENANCE_MODE";
});
</script>

<template>
  <div v-if="isMaintenanceMode">Maintenance Mode Page Content</div>
</template>