ShopwareEA

Appearance

Return to top
On this page

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.

ts
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.

ts
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 ​

vue
// 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>