Global Error Handler

This library provides a way to handle fetch errors automatically. The errors will also be tracked in Application Insights when provided.

INFO

There is no out of the box support for Axios yet, please contact the Codey team for more information.

Dependencies

• Vue: 3.x.x
• Pinia: 2.x.x
• Vue Use: 9.x.x
• Codey Core Localized Routing

Usage

Installation

In order to have errors handled, the global error handling needs to be setup using setupGlobalErrorHandler providing the necessary options. These options are opt-in, so if you don't want a certain error to be handled it can be left out.

The options provided are in line with how we as codey want to see those error handled from a UX standpoint. The not found, forbidden, unauthorized errors will be redirected to their corresponding page. Make sure to use the localizedRouting instance from the codey core package to navigate to the error pages. For more information on how to use this, please refer to the localized routing documentation.

The internal server error is provided as a callback. This allows for more flexibility in how this is handled. We found that this can deffer from app to app. For a back-office application we recommend using a Toaster to show that something went wrong. For a public facing application it might be better to show a more generic error page.

// App.vue
<script setup lang="ts">
import { useToast } from "primevue/usetoast";
import { setupGlobalErrorHandler } from "@xerius/codey-core/modules/global-error-handler";
import { useApplicationInsights } from "@xerius/codey-core/modules/application-insights";

const toast = useToast();
setupGlobalErrorHandler(
  localizedRouting,
  {
    notFoundRoute: { name: "NotFound" },
    forbiddenRoute: { name: "Forbidden" },
    unauthorizedRoute: { name: "Unauthorized" },
    internalServerErrorAction: () => {
      toast.add({
        severity: "error",
        summary: "Internal Server Error",
        detail: "Oeps, er ging iets mis. Probeer later nog eens ...",
        life: 3000,
      });
    },
  },
  useApplicationInsights
);
</script>

The registration can also be done in the main.ts file. Just make sure its is after the router initialization.

INFO

Initialization in the main will prevent usage of composables like useToaster as they need to be used within a setup method.

// main.ts
import { setupGlobalErrorHandler } from "@xerius/codey-core/modules/global-error-handler";
import { useApplicationInsights } from "@xerius/codey-core/modules/application-insights";

setupGlobalErrorHandler(
  localizedRouting,
  {
    notFoundRoute: { name: "NotFound" },
    forbiddenRoute: { name: "Forbidden" },
    unauthorizedRoute: { name: "Unauthorized" },
    internalServerErrorAction() {
      localizedRouting.pushLocalizedRoute("Oeps");
    },
  },
  useApplicationInsights
);

handleFetchError

In order to handle network failures automatically you need to provide an error handler to the fetch calls. This can be easily done using the useFetch composable from the @vueuse/core library and provide it the handleFetchError as error handler.

import { useFetch } from "@vueuse/core";
import { useGlobalErrorHandler } from "@xerius/codey-core/modules/global-error-handler";

const globalErrorHandler = useGlobalErrorHandler();

const { data } = useFetch(url, {
  onFetchError(ctx) {
    return globalErrorHandler.handleFetchError(ctx);
  },
});

For now we focus on the fetch api with useFetch from VueUse. Support for Axios can be provided upon request. In case errors need to be handled in a specific way, you can omit this function and handled them manually.

useGlobalErrorStore

Along with the error handling we store error data within the globalError store. This can be accessed to get extra information or do specific error handling yourself when needed.

handleGlobalError

This is the error handling function used internally by handleFetchError and can be used to trigger the error handling yourself.

This function is available on the globalErrorHandler instance retrieved by useGlobalErrorHandler.

Reset error state

If the error state is used to show or hide parts of your application it will be necessary to reset this once a page navigation has occurred.

This can be easily done within the router configuration with the following:

// router.ts
import { useGlobalErrorStore } from "@xerius/codey-core/modules/global-error-handler";

router.beforeEach(() => {
  useGlobalErrorStore().$reset();
});