From 394f17ad8c6b9cb475bfef27ccd9865a32f42b07 Mon Sep 17 00:00:00 2001
From: Jakub Stanecki <js361014@students.mimuw.edu.pl>
Date: Thu, 21 Jul 2022 11:50:17 +0200
Subject: [PATCH] Show all event's exceptions

---
 .../js/Components/Sentry/Show/Exception.vue   | 24 +++++++++++++++++++
 .../js/Components/Sentry/Show/Exceptions.vue  | 20 ++++++++++++++++
 resources/js/Pages/Sentry/Show.vue            | 16 +++----------
 resources/js/Sentry/event.js                  |  4 ++++
 4 files changed, 51 insertions(+), 13 deletions(-)
 create mode 100644 resources/js/Components/Sentry/Show/Exception.vue
 create mode 100644 resources/js/Components/Sentry/Show/Exceptions.vue

diff --git a/resources/js/Components/Sentry/Show/Exception.vue b/resources/js/Components/Sentry/Show/Exception.vue
new file mode 100644
index 0000000..c8e7bd0
--- /dev/null
+++ b/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>
diff --git a/resources/js/Components/Sentry/Show/Exceptions.vue b/resources/js/Components/Sentry/Show/Exceptions.vue
new file mode 100644
index 0000000..dbd0aee
--- /dev/null
+++ b/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>
diff --git a/resources/js/Pages/Sentry/Show.vue b/resources/js/Pages/Sentry/Show.vue
index f0bfd50..1eee659 100644
--- a/resources/js/Pages/Sentry/Show.vue
+++ b/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();
diff --git a/resources/js/Sentry/event.js b/resources/js/Sentry/event.js
index 4d725b8..e4913b8 100644
--- a/resources/js/Sentry/event.js
+++ b/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 || []
     }