Show all event's exceptions

resources/js/Components/Sentry/Show/Exception.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="py-5">
+        <h3 class="mb-1 text-xl font-bold">
+            {{ exception.type }}
+        </h3>
+        <div class="text-muted break-all mb-5">
+            {{ exception.value }}
+        </div>
+        <div class="border border-purple-200 text-muted">
+            <File :file="file" v-for="(file, i) in exception.stacktrace.frames" :collapsed="i !== 0"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import File from "../UI/File";
+
+export default {
+    components: {File},
+    props: {
+        exception: Object
+    },
+}
+</script>

resources/js/Components/Sentry/Show/Exceptions.vue

@@ -0,0 +1,20 @@
+<template>
+    <section class="py-5 px-4 md:px-6 lg:px-8 border-b dark:border-gray-400">
+        <h3 class="text-muted font-bold uppercase text-sm mb-5">exceptions</h3>
+
+        <Exception :exception="exception" v-for="exception in exceptions" />
+
+    </section>
+</template>
+
+<script>
+import File from "../UI/File";
+import Exception from "@/Components/Sentry/Show/Exception";
+
+export default {
+    components: {File, Exception},
+    props: {
+        exceptions: Array
+    },
+}
+</script>

resources/js/Pages/Sentry/Show.vue

@@ -28,19 +28,7 @@
 
             <Tags :event="event" />
 
-            <section class="py-5 px-4 md:px-6 lg:px-8 border-b dark:border-gray-400">
-                <h3 class="text-muted font-bold uppercase text-sm mb-5">exception</h3>
-
-                <h3 class="mb-1 text-xl font-bold">
-                    {{ event.payload.type }}
-                </h3>
-                <div class="text-muted break-all mb-5">
-                    {{ event.payload.value }}
-                </div>
-                <div class="border border-purple-200 text-muted">
-                    <File :file="file" v-for="(file, i) in stacktrace" :collapsed="i !== 0"/>
-                </div>
-            </section>
+            <Exceptions :exceptions="event.exceptions" />
 
             <Breadcrumbs :event="event" />
             <Request :event="event" />
@@ -58,10 +46,12 @@ import File from "@/Components/Sentry/UI/File";
 import Tags from "@/Components/Sentry/Show/Tags";
 import Breadcrumbs from "@/Components/Sentry/Show/Breadcrumbs";
 import Request from "@/Components/Sentry/Show/Request";
+import Exceptions from "@/Components/Sentry/Show/Exceptions";
 export default {
     components: {
         MainLayout, Link, File,
         Tags, Breadcrumbs, Request,
+        Exceptions
     },
     setup() {
         const store = useStore();

resources/js/Sentry/event.js

@@ -62,6 +62,10 @@ export default class extends Event {
         return this._stacktrace
     }
 
+    get exceptions() {
+        return this.event.exception.values || []
+    }
+
     get breadcrumbs() {
         return this.event.breadcrumbs.values || []
     }