Merge pull request #41 from buggregator/hotfix/issue-40

[#40] Fixes problem with handling Sentry events

Author: butschster

components/SentryPage/SentryPage.stories.ts

@@ -1,6 +1,9 @@
 import { Meta, Story } from "@storybook/vue3";
 import { normalizeSentryEvent } from "~/utils/normalize-event";
-import sentryEventMock from '~/mocks/sentry-common.json'
+import sentryCommonMock from '~/mocks/sentry-common.json'
+import sentryEventMock from '~/mocks/sentry-event.json'
+import sentryJsEventMock from '~/mocks/sentry-js-event.json'
+import sentryJsMock from '~/mocks/sentry-js.json'
 import SentryPage from '~/components/SentryPage/SentryPage.vue';
 
 export default {
@@ -18,8 +21,27 @@ const Template: Story = (args) => ({
   template: `<SentryPage v-bind="args" />`,
 });
 
-export const Page = Template.bind({});
+export const PageCommon = Template.bind({});
 
-Page.args = {
+PageCommon.args = {
+  event: normalizeSentryEvent(sentryCommonMock),
+};
+
+export const PageEvent = Template.bind({});
+
+PageEvent.args = {
   event: normalizeSentryEvent(sentryEventMock),
 };
+
+export const PageJS = Template.bind({});
+
+PageJS.args = {
+  event: normalizeSentryEvent(sentryJsMock),
+};
+
+export const PageJSEvent = Template.bind({});
+
+PageJSEvent.args = {
+  event: normalizeSentryEvent(sentryJsEventMock),
+};
+

components/SentryPage/SentryPage.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="sentry-page">
     <main class="sentry-page__main">
-      <header class="sentry-page__main-header">
-        <h1 class="sentry-page__main-exception">{{ exception }}</h1>
+      <header class="sentry-page__main-header" v-if="hasException">
+        <h1 class="sentry-page__main-exception">{{ mainException.type }}</h1>
 
+        <pre class="sentry-page__main-exception-message" v-html="mainException.value" />
+        <p class="sentry-page__main-date">{{ date }}</p>
+      </header>
+
+      <header class="sentry-page__main-header" v-if="hasMessage">
         <pre class="sentry-page__main-exception-message" v-html="message" />
         <p class="sentry-page__main-date">{{ date }}</p>
       </header>
 
       <SentryPageTags :event="event.payload" class="sentry-page__section" />
 
-      <section class="sentry-page__section">
+      <section v-if="hasException" class="sentry-page__section">
         <h3 class="sentry-page__section-title">exceptions</h3>
 
         <div class="sentry-page__section-exceptions">
@@ -60,14 +65,17 @@ export default defineComponent({
     },
   },
   computed: {
-    mainException() {
-      return this.event.payload.exception.values[0];
+    hasMessage(): boolean {
+      return this.event.payload.message !== "";
+    },
+    message(): boolean {
+      return this.event.payload.message;
     },
-    exception(): string {
-      return this.mainException.type;
+    hasException(): boolean {
+      return this.event.payload.exception?.values?.length > 0;
     },
-    message(): string {
-      return this.mainException.value;
+    mainException() {
+      return this.event.payload.exception.values[0];
     },
     date(): string {
       return moment(this.event.payload.timestamp).toLocaleString();

components/SentryPageRequest/SentryPageRequest.vue

@@ -3,7 +3,8 @@
     <h3 class="sentry-page-request__title">request</h3>
 
     <h3 class="sentry-page-request__url">
-      <strong>{{ event.request.method }}:</strong> {{ event.request.url }}
+      <strong>{{ event.request.method || "GET" }}:</strong>
+      {{ event.request.url }}
     </h3>
 
     <h3 class="sentry-page-request__title sentry-page-request__title--sub">
@@ -15,7 +16,7 @@
         :key="title"
         :title="title"
       >
-        {{ value[0] || value }}
+        {{ Array.isArray(value) ? value[0] || value : value }}
       </EventTableRow>
     </EventTable>
   </section>

components/SentryPreview/SentryPreview.stories.ts

@@ -2,6 +2,8 @@ import { Meta, Story } from "@storybook/vue3";
 import { normalizeSentryEvent } from "~/utils/normalize-event";
 import sentrySpiralEventMock from '~/mocks/sentry-spiral.json'
 import sentryLaravelEventMock from '~/mocks/sentry-laravel.json'
+import sentryEventMock from '~/mocks/sentry-event.json'
+import sentryJsEventMock from '~/mocks/sentry-js-event.json'
 import SentryPreview from '~/components/SentryPreview/SentryPreview.vue';
 
 export default {
@@ -30,3 +32,16 @@ export const Laravel = Template.bind({});
 Laravel.args = {
   event: normalizeSentryEvent(sentryLaravelEventMock),
 };
+
+export const Event = Template.bind({});
+
+Event.args = {
+  event: normalizeSentryEvent(sentryEventMock),
+};
+
+export const JSEvent = Template.bind({});
+
+JSEvent.args = {
+  event: normalizeSentryEvent(sentryJsEventMock),
+};
+

components/SentryPreview/SentryPreview.vue

@@ -1,6 +1,10 @@
 <template>
   <PreviewCard class="sentry-preview" :event="event">
-    <SentryException :exception="exception" :max-frames="maxFrames">
+    <SentryException
+      v-if="hasException"
+      :exception="exception"
+      :max-frames="maxFrames"
+    >
       <NuxtLink tag="div" :to="eventLink" class="sentry-preview__link">
         <h3 class="sentry-preview__title">
           {{ exception.type }}
@@ -9,6 +13,11 @@
         <pre class="sentry-preview__text" v-html="exception.value" />
       </NuxtLink>
     </SentryException>
+    <div v-if="hasMessage">
+      <NuxtLink tag="div" :to="eventLink" class="sentry-preview__link">
+        <pre class="sentry-preview__text" v-html="message" />
+      </NuxtLink>
+    </div>
   </PreviewCard>
 </template>
 
@@ -37,6 +46,15 @@ export default defineComponent({
     eventLink() {
       return `/sentry/${this.event.id}`;
     },
+    hasException() {
+      return this.event?.payload?.exception?.values?.length > 0;
+    },
+    hasMessage(): boolean {
+      return this.event?.payload?.message !== "";
+    },
+    message(): boolean {
+      return this.event.payload.message;
+    },
     exception() {
       const defaultException: object = {
         type: "Unknown",