af/error.vue

<template>
    <div>
        <TopBanner>
            <template #headline><slot name="headline">{{ error.statusCode }}</slot></template>
            <template #tagline><slot name="tagline">means I f*cked up…</slot></template>
        </TopBanner>
        <div id="content_box" :class="`flex flex-col bg-white pt-12 sm:pt-24`">
            <CookieMonster />
            <MainMenu />

            <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
                <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
                    <h3 class="text-5xl text-center -mt-6 sm:-mt-16">
                        Sorry, I messed up.
                    </h3>

                    <p class="pt-12 py-6">Please copy the following error report and <a href="/contact" class="text-sky-500 underline">get in touch</a>.</p>

                    <div>
                        <span @click="copyToClipboard" class="btn btn-info btn-outline float-right">Copy to clipboard</span>
                        <div id="errorReport">    
                            <p>Error code: {{ error.statusCode }}</p>
                            <p>Message: {{ error.message }}</p>
                            <p>URL: {{ error.url }}</p>
                            <p v-if="error.data">Additional data: {{ error.data }}</p>
                            <div v-html="error.description" />
                        </div>
                    </div>

                    <p>&nbsp;</p><p>&nbsp;</p>
                </article>
            </div>
        </div>
        <Footer />
    </div>
</template>

<style lang="pcss">
article.body h2 {
    @apply mt-0;
}
</style>

<script setup>
const props = defineProps({
    error: Object
})

const copyToClipboard = () => {
    navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
        if (result.state === 'granted' || result.state === 'prompt') {
            const element = document.getElementById('errorReport');
            navigator.clipboard.writeText(element.innerText).then(() => {
                alert("Error report copied. Head over to the contact section and get in touch!");
            });
        }
    });
}
</script>