@innertia-solutions/innertia-nuxt 0.1.56 → 0.1.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
// Detalle de un caso de error (Sentry-like)
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
})
|
|
2
|
+
// Detalle de un caso de error (Sentry-like) desde el snapshot durable del caso:
|
|
3
|
+
// stack completo (in-app resaltado + código fuente), contexto del request,
|
|
4
|
+
// cadena de excepciones y breadcrumbs. Timeline de ocurrencias arriba.
|
|
5
|
+
const props = defineProps({ id: { type: [String, Number], required: true } })
|
|
7
6
|
const emit = defineEmits(['back'])
|
|
8
7
|
const api = useApi()
|
|
9
8
|
|
|
@@ -13,12 +12,14 @@ const { data, pending } = await useAsyncData(
|
|
|
13
12
|
{ watch: [() => props.id] },
|
|
14
13
|
)
|
|
15
14
|
|
|
16
|
-
const
|
|
17
|
-
const stackFrames = computed(() => exceptionEvent.value?.payload?.stack ?? exceptionEvent.value?.payload?.frames ?? [])
|
|
15
|
+
const snap = computed(() => data.value?.snapshot ?? null)
|
|
18
16
|
|
|
19
17
|
const timelineSeries = computed(() => [{ name: 'Ocurrencias', data: (data.value?.timeline ?? []).map(d => d.count) }])
|
|
20
18
|
const timelineCats = computed(() => (data.value?.timeline ?? []).map(d => d.day))
|
|
21
19
|
|
|
20
|
+
const expanded = ref({})
|
|
21
|
+
function toggle(i) { expanded.value = { ...expanded.value, [i]: !expanded.value[i] } }
|
|
22
|
+
|
|
22
23
|
const STATUS = { open: 'Abierto', resolved: 'Resuelto', ignored: 'Ignorado' }
|
|
23
24
|
</script>
|
|
24
25
|
|
|
@@ -37,6 +38,7 @@ const STATUS = { open: 'Abierto', resolved: 'Resuelto', ignored: 'Ignorado' }
|
|
|
37
38
|
</div>
|
|
38
39
|
<h2 class="mt-2 text-lg font-semibold text-foreground">{{ data.case.title }}</h2>
|
|
39
40
|
<p class="text-sm text-muted-foreground font-mono">{{ data.case.exception_class }}</p>
|
|
41
|
+
<p v-if="snap?.message" class="mt-1 text-sm text-foreground">{{ snap.message }}</p>
|
|
40
42
|
<p class="mt-1 text-xs text-muted-foreground">Primera vez: {{ data.case.first_seen }} · Última: {{ data.case.last_seen }}</p>
|
|
41
43
|
</div>
|
|
42
44
|
|
|
@@ -45,38 +47,58 @@ const STATUS = { open: 'Abierto', resolved: 'Resuelto', ignored: 'Ignorado' }
|
|
|
45
47
|
<Chart type="bar" :series="timelineSeries" :categories="timelineCats" :height="160" />
|
|
46
48
|
</section>
|
|
47
49
|
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<div><dt class="text-muted-foreground inline">Ruta:</dt> <dd class="inline text-foreground">{{ data.trace.method }} {{ data.trace.route ?? data.trace.url }}</dd></div>
|
|
52
|
-
<div><dt class="text-muted-foreground inline">Status:</dt> <dd class="inline text-foreground">{{ data.trace.status ?? '—' }}</dd></div>
|
|
53
|
-
<div><dt class="text-muted-foreground inline">Usuario:</dt> <dd class="inline text-foreground">{{ data.trace.user_id ?? '—' }}</dd></div>
|
|
54
|
-
<div><dt class="text-muted-foreground inline">Tenant:</dt> <dd class="inline text-foreground">{{ data.trace.tenant ?? '—' }}</dd></div>
|
|
55
|
-
<div><dt class="text-muted-foreground inline">IP:</dt> <dd class="inline text-foreground">{{ data.trace.ip ?? '—' }}</dd></div>
|
|
56
|
-
<div><dt class="text-muted-foreground inline">Duración:</dt> <dd class="inline text-foreground">{{ data.trace.duration_ms != null ? data.trace.duration_ms + ' ms' : '—' }}</dd></div>
|
|
57
|
-
</dl>
|
|
58
|
-
</section>
|
|
50
|
+
<div v-if="!snap" class="rounded-card border border-amber-200 bg-amber-50 p-3 text-xs text-amber-700 dark:border-amber-800/50 dark:bg-amber-900/20 dark:text-amber-400">
|
|
51
|
+
Este caso no tiene snapshot (ocurrió antes de habilitarse la captura durable). Volverá a completarse la próxima vez que el error reincida.
|
|
52
|
+
</div>
|
|
59
53
|
|
|
60
|
-
<
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<h3 class="mb-2 text-sm font-semibold text-foreground">Excepción</h3>
|
|
71
|
-
<pre class="rounded-card border border-card-line bg-card p-3 text-xs whitespace-pre-wrap">{{ exceptionEvent.payload?.message ?? data.case.title }}</pre>
|
|
72
|
-
</section>
|
|
54
|
+
<template v-else>
|
|
55
|
+
<section v-if="snap.previous?.length">
|
|
56
|
+
<h3 class="mb-2 text-sm font-semibold text-foreground">Causado por</h3>
|
|
57
|
+
<ul class="space-y-1 text-xs">
|
|
58
|
+
<li v-for="(p, i) in snap.previous" :key="i" class="rounded-card border border-card-line bg-card px-3 py-1.5">
|
|
59
|
+
<span class="font-mono text-foreground">{{ p.class }}</span>
|
|
60
|
+
<span class="text-muted-foreground"> — {{ p.message }} <span class="opacity-70">({{ p.file }}:{{ p.line }})</span></span>
|
|
61
|
+
</li>
|
|
62
|
+
</ul>
|
|
63
|
+
</section>
|
|
73
64
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
65
|
+
<section v-if="snap.request" class="rounded-card border border-card-line bg-card p-4 text-sm">
|
|
66
|
+
<h3 class="mb-2 text-sm font-semibold text-foreground">Contexto del request</h3>
|
|
67
|
+
<dl class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
|
|
68
|
+
<div><dt class="text-muted-foreground inline">Ruta:</dt> <dd class="inline text-foreground">{{ snap.request.method }} {{ snap.request.route ?? snap.request.url }}</dd></div>
|
|
69
|
+
<div><dt class="text-muted-foreground inline">URL:</dt> <dd class="inline text-foreground break-all">{{ snap.request.url }}</dd></div>
|
|
70
|
+
<div><dt class="text-muted-foreground inline">Usuario:</dt> <dd class="inline text-foreground">{{ snap.request.user_id ?? '—' }}</dd></div>
|
|
71
|
+
<div><dt class="text-muted-foreground inline">IP:</dt> <dd class="inline text-foreground">{{ snap.request.ip ?? '—' }}</dd></div>
|
|
72
|
+
</dl>
|
|
73
|
+
</section>
|
|
74
|
+
|
|
75
|
+
<section v-if="snap.stack?.length">
|
|
76
|
+
<h3 class="mb-2 text-sm font-semibold text-foreground">Stack trace</h3>
|
|
77
|
+
<div class="rounded-card border border-card-line bg-card divide-y divide-card-line overflow-hidden">
|
|
78
|
+
<div v-for="(f, i) in snap.stack" :key="i" :class="f.in_app ? '' : 'opacity-60'">
|
|
79
|
+
<button type="button" class="w-full flex items-baseline gap-2 px-3 py-1.5 text-left text-xs hover:bg-slate-50 dark:hover:bg-slate-800/50" @click="toggle(i)">
|
|
80
|
+
<span v-if="f.in_app" class="mt-0.5 inline-block size-1.5 rounded-full bg-primary shrink-0" title="in-app" />
|
|
81
|
+
<span class="font-mono text-foreground">{{ f.function || '{main}' }}</span>
|
|
82
|
+
<span class="font-mono text-muted-foreground ml-auto shrink-0">{{ f.file }}<span v-if="f.line">:{{ f.line }}</span></span>
|
|
83
|
+
</button>
|
|
84
|
+
<div v-if="f.context && (expanded[i] || f.in_app)" class="bg-slate-50 dark:bg-slate-900/40 overflow-x-auto">
|
|
85
|
+
<pre class="text-[11px] leading-5 font-mono"><template v-for="ln in f.context" :key="ln.n"><div :class="ln.error ? 'bg-red-100 dark:bg-red-500/20' : ''" class="px-3"><span class="inline-block w-8 select-none text-muted-foreground text-right pr-2">{{ ln.n }}</span><span :class="ln.error ? 'text-red-700 dark:text-red-300' : 'text-foreground'">{{ ln.code }}</span></div></template></pre>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
</section>
|
|
90
|
+
|
|
91
|
+
<section v-if="snap.breadcrumbs?.length">
|
|
92
|
+
<h3 class="mb-2 text-sm font-semibold text-foreground">Breadcrumbs (antes del error)</h3>
|
|
93
|
+
<ul class="rounded-card border border-card-line bg-card divide-y divide-card-line text-xs">
|
|
94
|
+
<li v-for="(b, i) in snap.breadcrumbs" :key="i" class="flex items-baseline gap-2 px-3 py-1.5">
|
|
95
|
+
<span class="rounded bg-slate-100 dark:bg-slate-700 px-1.5 py-0.5 text-[10px] uppercase text-muted-foreground shrink-0">{{ b.type }}</span>
|
|
96
|
+
<span class="font-mono text-foreground truncate">{{ b.summary }}</span>
|
|
97
|
+
<span v-if="b.duration_ms != null" class="ml-auto text-muted-foreground shrink-0">{{ b.duration_ms }} ms</span>
|
|
98
|
+
</li>
|
|
99
|
+
</ul>
|
|
100
|
+
</section>
|
|
101
|
+
</template>
|
|
80
102
|
</template>
|
|
81
103
|
</div>
|
|
82
104
|
</template>
|