Skip to content

Commit

Permalink
Merge pull request #105 from buggregator/feature/sentry-exceptions
Browse files Browse the repository at this point in the history 
Improves sentry blocks UI
  • Loading branch information
@butschster
butschster committed Dec 15, 2023
2 parents 7295a7d + 4a8df2f commit 43a10bf
Show file tree
Hide file tree
Showing 7 changed files with 107 additions and 53 deletions.
4 changes: 2 additions & 2 deletions src/entities/sentry/ui/preview-card/preview-card.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down
27 changes: 14 additions & 13 deletions src/entities/sentry/ui/sentry-exception/sentry-exception.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
40 changes: 36 additions & 4 deletions src/screens/sentry/ui/sentry-page-breadcrumbs/sentry-page-breadcrumbs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
/>
Expand All @@ -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) }}
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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>
42 changes: 24 additions & 18 deletions src/screens/sentry/ui/sentry-page-request/sentry-page-request.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/screens/sentry/ui/sentry-page-tags/sentry-page-tags.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
38 changes: 23 additions & 15 deletions src/screens/sentry/ui/sentry-page/sentry-page.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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>
7 changes: 7 additions & 0 deletions src/shared/ui/preview-card/preview-card-header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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" />
Expand All @@ -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
Expand All @@ -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"
Expand All @@ -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
Expand All @@ -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,
}"
Expand All @@ -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"
>
Expand Down

0 comments on commit 43a10bf

Please sign in to comment.