<template>
  <ErrorTemplate v-bind="{ statusCode, statusMessage, description, stack }" />
</template>

<script setup>
import { defineAsyncComponent } from "vue";
const props = defineProps({
  error: Object
});
const _error = props.error;
const stacktrace = _error.stack ? _error.stack.split("\n").splice(1).map((line) => {
  const text = line.replace("webpack:/", "").replace(".vue", ".js").trim();
  return {
    text,
    internal: line.includes("node_modules") && !line.includes(".cache") || line.includes("internal") || line.includes("new Promise")
  };
}).map((i) => `<span class="stack${i.internal ? " internal" : ""}">${i.text}</span>`).join("\n") : "";
const statusCode = Number(_error.statusCode || 500);
const is404 = statusCode === 404;
const statusMessage = _error.statusMessage ?? (is404 ? "Page Not Found" : "Internal Server Error");
const description = _error.message || _error.toString();
const stack = import.meta.dev && !is404 ? _error.description || `<pre>${stacktrace}</pre>` : void 0;
const _Error404 = defineAsyncComponent(() => import("./error-404.vue"));
const _Error = import.meta.dev ? defineAsyncComponent(() => import("./error-dev.vue")) : defineAsyncComponent(() => import("./error-500.vue"));
const ErrorTemplate = is404 ? _Error404 : _Error;
</script>
