Error Plugin

Ett Vue-plugin som visar en generell felsida då ett ohanterat fel uppstår.

Usage

Skapa en komponent som wrappar din applikationskomponent:

-import { createApp } from "vue";
+import { createApp, markRaw } from "vue";
+import { ErrorPlugin, FErrorHandlingApp } from "@fkui/vue";

+const ErrorHandlingApp = defineComponent({
+    render() {
+        return h(FErrorHandlingApp, {
+            defaultComponent: markRaw(MyAwesomeApp),
+        });
+    },
+});

-const app = createApp(MyAwesomeApp);
+const app = createApp(ErrorHandlingApp);
 app.mount("#app");

Anropa app.use(ErrorPlugin) innan applikationen monteras:

 const app = createApp(ErrorHandlingApp);
+app.use(ErrorPlugin);
 app.mount("#app");

Egen felsida

Det går att sätta sin egen specifika felsida.

 const ErrorHandlingApp = defineComponent({
     render() {
         return h(FErrorHandlingApp, {
             defaultComponent: markRaw(MyAwesomeApp),
+            errorComponent: markRaw(MyApplicationErrorPage),
         });
     },
 });

Ett enkelt sätt för att komma igång med en applikationsspecifik sida är att kopiera FErrorPage.vue i detta repo.

Exempel

Prova att kasta ett ohanterat fel:

<template>
    <div>
        <button
            v-test="'generate-error'"
            class="button button--secondary"
            type="button"
            @click="generateError()"
        >
            Fel
        </button>
        <button
            v-test="'generate-warning'"
            class="button button--secondary"
            type="button"
            @click="generateWarning()"
        >
            Varning
        </button>
    </div>
</template>

<script>
import { defineComponent, getCurrentInstance } from "vue";

export default defineComponent({
    name: "ErrorPluginExample",
    data() {
        return {
            instance: getCurrentInstance(),
        };
    },
    methods: {
        generateError() {
            throw new Error("It's game over man!");
        },
        generateWarning() {
            const error = new Error();
            const warnHandler = this.instance.appContext.config.warnHandler;
            warnHandler("It's game over man!", null, error.stack);
        },
    },
});
</script>

Axios-fel mm hanteras om man har kodat på följande vis:

async function bliFel() {
    await axios.get("http://hej");
    // alternativt return axios.get('http://hej');
}

Om man däremot har kodat felaktigt, enligt nedanstående exempel, kommer exceptions inte att fångas av denna plugin.

function bliFel() {
    axios.get("http://hej");
}

Options

Plugin tar ett optional objekt med inställningar:

app.use(ErrorPlugin, {
    captureWarnings: true,
    logToConsole: true,
});

`captureWarnings`

type: boolean
default: true

Om true så hanteras varningar som fel i utvecklarläge.

`logToConsole`

type: boolean
default: true

Om true så loggas fel till console (så som det normallt set blir när ErrorPlugin eller en annan errorHandler installerats)

Kakor på webbplatsen