Merge pull request #105 from buggregator/feature/sentry-exceptions

Improves sentry blocks UI

Author: butschster

src/entities/sentry/ui/preview-card/preview-card.vue

@@ -69,7 +69,7 @@ const exception: Ref<Exception> = computed(() =>
 }
 
 .preview-card__link {
-  @apply cursor-pointer pb-2 flex-grow;
+  @apply cursor-pointer dark:bg-gray-900 bg-gray-100 p-3 rounded-t-md border border-purple-300 dark:border-gray-400;
 }
 
 .preview-card__title {
@@ -78,7 +78,7 @@ const exception: Ref<Exception> = computed(() =>
 
 .preview-card__text {
   @include code-example();
-  @apply text-sm break-all mb-3 overflow-auto text-opacity-60;
+  @apply text-sm break-words whitespace-pre-wrap mb-3 overflow-auto text-opacity-60;
 }
 
 .preview-card__frames {

src/entities/sentry/ui/sentry-exception/sentry-exception.vue

@@ -26,19 +26,21 @@ const exceptionFrames = computed(() => {
 <template>
   <div class="sentry-exception">
     <slot>
-      <h3 class="sentry-exception__title">
-        {{ exception.type }}
-      </h3>
+      <header class="sentry-exception__header">
+        <h3 class="sentry-exception__title">
+          {{ exception.type }}
+        </h3>
 
-      <pre class="sentry-exception__text" v-html="exception.value" />
+        <pre class="sentry-exception__text" v-html="exception.value"/>
+      </header>
     </slot>
 
     <div v-if="exceptionFrames.length" class="sentry-exception__frames">
       <template
         v-for="(frame, index) in exceptionFrames"
         :key="frame.context_line"
       >
-        <SentryExceptionFrame :frame="frame" :is-open="index === 0" />
+        <SentryExceptionFrame :frame="frame" :is-open="index === 0"/>
       </template>
     </div>
   </div>
@@ -48,28 +50,27 @@ const exceptionFrames = computed(() => {
 @import "assets/mixins";
 
 .sentry-exception {
-  @apply flex flex-col;
+  @apply flex flex-col ;
 }
 
 .sentry-exception__link {
   @apply cursor-pointer pb-2 flex-grow;
 }
 
-.sentry-exception__text {
-  @include text-muted;
-  @apply text-sm break-all mb-3 p-3 dark:bg-gray-800;
+.sentry-exception__header {
+  @apply dark:bg-gray-900 bg-gray-100 p-3 rounded-t-md border border-purple-300 dark:border-gray-400 border-b-0;
 }
 
 .sentry-exception__title {
-  @apply mb-3 font-semibold;
+  @apply mb-3 font-semibold text-lg;
 }
 
 .sentry-exception__text {
-  @include text-muted;
-  @apply text-sm break-all mb-3 p-3 dark:bg-gray-800;
+  @include code-example();
+  @apply text-sm break-words whitespace-pre-wrap rounded text-opacity-60;
 }
 
 .sentry-exception__frames {
-  @apply border border-purple-200 dark:border-gray-600 flex-col justify-center w-full;
+  @apply border border-purple-200 dark:border-gray-600 flex-col justify-center w-full border border-purple-300 dark:border-gray-400 border-t-0 rounded-b-md overflow-hidden;
 }
 </style>

src/screens/sentry/ui/sentry-page-breadcrumbs/sentry-page-breadcrumbs.vue

@@ -17,7 +17,11 @@ const formatDate = (timestamp: number): string =>
 
 <template>
   <section class="sentry-page-breadcrumbs">
-    <h3 class="sentry-page-breadcrumbs__title">breadcrumbs</h3>
+    <h3 class="sentry-page-breadcrumbs__title">
+      breadcrumbs
+
+      <span v-if="breadcrumbs.length > 0" class="sentry-page-breadcrumbs__counter">{{ breadcrumbs.length }}</span>
+    </h3>
     <div class="sentry-page-breadcrumbs__in">
       <nav
         style="grid-template-columns: 1fr 100px 200px 17px"
@@ -39,7 +43,7 @@ const formatDate = (timestamp: number): string =>
 
             <CodeSnippet
               v-if="b.data"
-              class="mt-3"
+              class="sentry-page-breadcrumbs__col-data"
               language="json"
               :code="b.data"
             />
@@ -64,7 +68,7 @@ const formatDate = (timestamp: number): string =>
             </div>
           </div>
           <div class="sentry-page-breadcrumbs__col">
-            {{ b.level }}
+            <span class="sentry-page-breadcrumbs__col-level-badge" :class="b.level?.toLowerCase()">{{ b.level }}</span>
           </div>
           <div class="sentry-page-breadcrumbs__col">
             {{ formatDate(b.timestamp) }}
@@ -87,8 +91,12 @@ const formatDate = (timestamp: number): string =>
   @apply font-bold uppercase text-sm mb-5;
 }
 
+.sentry-page-breadcrumbs__counter {
+  @apply bg-purple-100 dark:bg-purple-800 text-purple-600 dark:text-purple-100 rounded-full text-xs px-2 py-1 ml-2;
+}
+
 .sentry-page-breadcrumbs__in {
-  @apply flex flex-col border border-purple-300 dark:border-purple-700 rounded;
+  @apply flex flex-col border border-purple-300 dark:border-gray-400 rounded overflow-hidden;
   max-height: 600px;
 }
 
@@ -113,6 +121,10 @@ const formatDate = (timestamp: number): string =>
   @apply p-3;
 }
 
+.sentry-page-breadcrumbs__col-data {
+  @apply mt-3  rounded-md overflow-hidden;
+}
+
 .sentry-page-breadcrumbs__col-message {
   @apply font-bold;
 }
@@ -132,4 +144,24 @@ const formatDate = (timestamp: number): string =>
 .sentry-page-breadcrumbs__col-detail-value {
   @apply px-2 bg-purple-100 dark:bg-purple-800 rounded-r font-bold;
 }
+
+.sentry-page-breadcrumbs__col-level-badge {
+  @apply uppercase text-2xs font-bold rounded-full px-2 py-1;
+}
+
+.sentry-page-breadcrumbs__col-level-badge.debug {
+  @apply bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-100;
+}
+
+.sentry-page-breadcrumbs__col-level-badge.error {
+  @apply bg-red-100 dark:bg-red-800 text-red-600 dark:text-red-100;
+}
+
+.sentry-page-breadcrumbs__col-level-badge.warning {
+  @apply bg-yellow-100 dark:bg-yellow-800 text-yellow-600 dark:text-yellow-100;
+}
+
+.sentry-page-breadcrumbs__col-level-badge.info {
+  @apply bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-100;
+}
 </style>

src/screens/sentry/ui/sentry-page-request/sentry-page-request.vue

@@ -16,24 +16,26 @@ const normalizeHeaderValue = (value: unknown) =>
   <section class="sentry-page-request">
     <h3 class="sentry-page-request__title">request</h3>
 
-    <h3 v-if="request" class="sentry-page-request__url">
-      <strong>{{ request.method || "GET" }}:</strong>
-      {{ request.url }}
-    </h3>
-
-    <h3 class="sentry-page-request__title sentry-page-request__title--sub">
-      headers
-    </h3>
-
-    <TableBase v-if="request && request.headers">
-      <TableBaseRow
-        v-for="(value, title) in request.headers"
-        :key="title"
-        :title="title"
-      >
-        {{ normalizeHeaderValue(value) }}
-      </TableBaseRow>
-    </TableBase>
+    <div class="sentry-page-request__wrapper">
+      <code v-if="request" class="sentry-page-request__url">
+        <strong>{{ request.method || "GET" }}:</strong>
+        {{ request.url }}
+      </code>
+
+      <h3 class="sentry-page-request__title sentry-page-request__title--sub">
+        headers
+      </h3>
+
+      <TableBase v-if="request && request.headers">
+        <TableBaseRow
+          v-for="(value, title) in request.headers"
+          :key="title"
+          :title="title"
+        >
+          {{ normalizeHeaderValue(value) }}
+        </TableBaseRow>
+      </TableBase>
+    </div>
   </section>
 </template>
 
@@ -43,6 +45,10 @@ const normalizeHeaderValue = (value: unknown) =>
 .sentry-page-request {
 }
 
+.sentry-page-request__wrapper {
+  @apply dark:bg-gray-900 bg-gray-100 p-3 rounded-md border border-purple-300 dark:border-gray-400;
+}
+
 .sentry-page-request__title {
   @include text-muted;
   @apply font-bold uppercase text-sm mb-5;

src/screens/sentry/ui/sentry-page-tags/sentry-page-tags.vue

@@ -146,7 +146,7 @@ const contextsOS = computed(() => {
 }
 
 .sentry-page-tags__labels-wrapper {
-  @apply bg-gray-50 dark:bg-gray-900 p-4 rounded-lg;
+  @apply bg-gray-50 dark:bg-gray-900 p-4 rounded-md border border-purple-300 dark:border-gray-400;
 }
 
 .sentry-page-tags__label {

src/screens/sentry/ui/sentry-page/sentry-page.vue

@@ -35,23 +35,20 @@ const mainException = computed(
           class="sentry-page__main-exception-message"
           v-html="mainException.value"
         />
-      </header>
 
-      <header
-        v-if="event.payload.message !== ''"
-        class="sentry-page__main-header"
-      >
-        <pre
-          class="sentry-page__main-exception-message"
-          v-html="event.payload.message"
-        />
         <p class="sentry-page__main-date">{{ formattedTimestamp }}</p>
       </header>
 
       <SentryPageTags :payload="event.payload" class="sentry-page__section" />
 
       <section v-if="mainException" class="sentry-page__section">
-        <h3 class="sentry-page__section-title">exceptions</h3>
+        <h3 class="sentry-page__section-title">
+          exceptions
+
+          <span v-if="event?.payload?.exception?.values?.length > 0" class="sentry-page__section-title__counter">
+            {{ event.payload.exception.values.length }}
+          </span>
+        </h3>
 
         <div class="sentry-page__section-exceptions">
           <template
@@ -65,6 +62,8 @@ const mainException = computed(
               v-for="e in event.payload.exception.values"
               :key="`exception-${e.value}-${e.type}`"
               :exception="e"
+              :max-frames="null"
+              class="sentry-page__section-exceptions__exception"
             />
           </template>
         </div>
@@ -126,19 +125,28 @@ const mainException = computed(
 }
 
 .sentry-page__main-exception-message {
-  @apply text-sm;
+  @include code-example();
+  @apply text-sm rounded text-opacity-60;
 }
 
 .sentry-page__section {
   @apply py-5 px-4;
 }
 
-.sentry-page__section-exceptions {
-  @apply flex flex-col gap-y-10;
-}
-
 .sentry-page__section-title {
   @include text-muted;
   @apply font-bold uppercase text-sm mb-5;
 }
+
+.sentry-page__section-title__counter {
+  @apply bg-purple-100 dark:bg-purple-800 text-purple-600 dark:text-purple-100 rounded-full text-xs px-2 py-1 ml-2;
+}
+
+.sentry-page__section-exceptions {
+  @apply flex flex-col -mx-4;
+}
+
+.sentry-page__section-exceptions__exception {
+  @apply p-4;
+}
 </style>

src/shared/ui/preview-card/preview-card-header.vue

@@ -64,6 +64,7 @@ const isVisibleTags = computed(() => props.tags.length > 0);
         :href="eventUrl"
         target="_blank"
         class="preview-card-header__tag preview-card-header__tag--json"
+        title="Open JSON payload for this event in new tab"
       >
         JSON
       </a>
@@ -85,6 +86,7 @@ const isVisibleTags = computed(() => props.tags.length > 0);
       <div class="preview-card-header__buttons-expand">
         <button
           class="preview-card-header__button preview-card-header__button--copy"
+          title="Copy event as PNG image to clipboard"
           @click="copyEvent"
         >
           <IconSvg name="copy" class="preview-card-header__button-icon" />
@@ -93,6 +95,7 @@ const isVisibleTags = computed(() => props.tags.length > 0);
         <div class="preview-card-header__buttons-expand-list">
           <button
             class="preview-card-header__button preview-card-header__button--copy"
+            title="Download event as JSON file"
             @click="downloadFile"
           >
             <IconSvg
@@ -104,6 +107,7 @@ const isVisibleTags = computed(() => props.tags.length > 0);
           <button
             class="preview-card-header__button preview-card-header__button--copy"
             @click="downloadImageEvent"
+            title="Download event as PNG image"
           >
             <IconSvg
               name="image-download"
@@ -116,6 +120,7 @@ const isVisibleTags = computed(() => props.tags.length > 0);
       <button
         class="preview-card-header__button preview-card-header__button--collapse"
         :class="{ 'preview-card-header__button--collapse-closed': !isOpen }"
+        title="Collapse event"
         @click="changeView"
       >
         <IconSvg
@@ -132,6 +137,7 @@ const isVisibleTags = computed(() => props.tags.length > 0);
 
       <button
         class="preview-card-header__button preview-card-header__button--lock"
+        title="Lock event. Locked events will not be deleted"
         :class="{
           'preview-card-header__button--locked': isLocked,
         }"
@@ -142,6 +148,7 @@ const isVisibleTags = computed(() => props.tags.length > 0);
 
       <button
         class="preview-card-header__button preview-card-header__button--delete"
+        title="Delete event"
         :disabled="isLocked"
         @click="deleteEvent"
       >