Skip to content

Commit 38850e7

Browse files
butschsterbutschster
committed
Adds support for Sentry events from Javascript SDK.
1 parent 5c88b97 commit 38850e7

File tree

6 files changed

+183
-3
lines changed

6 files changed

+183
-3
lines changed

‎components/SentryPage/SentryPage.stories.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { Meta, Story } from "@storybook/vue3";
22
import { normalizeSentryEvent } from "~/utils/normalize-event";
33
import sentryCommonMock from '~/mocks/sentry-common.json'
44
import sentryEventMock from '~/mocks/sentry-event.json'
5+
import sentryJsEventMock from '~/mocks/sentry-js-event.json'
6+
import sentryJsMock from '~/mocks/sentry-js.json'
57
import SentryPage from '~/components/SentryPage/SentryPage.vue';
68

79
export default {
@@ -30,3 +32,16 @@ export const PageEvent = Template.bind({});
3032
PageEvent.args = {
3133
event: normalizeSentryEvent(sentryEventMock),
3234
};
35+
36+
export const PageJS = Template.bind({});
37+
38+
PageJS.args = {
39+
event: normalizeSentryEvent(sentryJsMock),
40+
};
41+
42+
export const PageJSEvent = Template.bind({});
43+
44+
PageJSEvent.args = {
45+
event: normalizeSentryEvent(sentryJsEventMock),
46+
};
47+

‎components/SentryPageRequest/SentryPageRequest.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<h3 class="sentry-page-request__title">request</h3>
44

55
<h3 class="sentry-page-request__url">
6-
<strong>{{ event.request.method }}:</strong> {{ event.request.url }}
6+
<strong>{{ event.request.method || "GET" }}:</strong>
7+
{{ event.request.url }}
78
</h3>
89

910
<h3 class="sentry-page-request__title sentry-page-request__title--sub">
@@ -15,7 +16,7 @@
1516
:key="title"
1617
:title="title"
1718
>
18-
{{ value[0] || value }}
19+
{{ Array.isArray(value) ? value[0] || value : value }}
1920
</EventTableRow>
2021
</EventTable>
2122
</section>

‎components/SentryPreview/SentryPreview.stories.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { Meta, Story } from "@storybook/vue3";
22
import { normalizeSentryEvent } from "~/utils/normalize-event";
33
import sentrySpiralEventMock from '~/mocks/sentry-spiral.json'
44
import sentryLaravelEventMock from '~/mocks/sentry-laravel.json'
5+
import sentryEventMock from '~/mocks/sentry-event.json'
6+
import sentryJsEventMock from '~/mocks/sentry-js-event.json'
57
import SentryPreview from '~/components/SentryPreview/SentryPreview.vue';
68

79
export default {
@@ -30,3 +32,16 @@ export const Laravel = Template.bind({});
3032
Laravel.args = {
3133
event: normalizeSentryEvent(sentryLaravelEventMock),
3234
};
35+
36+
export const Event = Template.bind({});
37+
38+
Event.args = {
39+
event: normalizeSentryEvent(sentryEventMock),
40+
};
41+
42+
export const JSEvent = Template.bind({});
43+
44+
JSEvent.args = {
45+
event: normalizeSentryEvent(sentryJsEventMock),
46+
};
47+

‎components/SentryPreview/SentryPreview.vue‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<template>
22
<PreviewCard class="sentry-preview" :event="event">
3-
<SentryException :exception="exception" :max-frames="maxFrames">
3+
<SentryException
4+
v-if="hasException"
5+
:exception="exception"
6+
:max-frames="maxFrames"
7+
>
48
<NuxtLink tag="div" :to="eventLink" class="sentry-preview__link">
59
<h3 class="sentry-preview__title">
610
{{ exception.type }}
@@ -9,6 +13,11 @@
913
<pre class="sentry-preview__text" v-html="exception.value" />
1014
</NuxtLink>
1115
</SentryException>
16+
<div v-if="hasMessage">
17+
<NuxtLink tag="div" :to="eventLink" class="sentry-preview__link">
18+
<pre class="sentry-preview__text" v-html="message" />
19+
</NuxtLink>
20+
</div>
1221
</PreviewCard>
1322
</template>
1423

@@ -37,6 +46,15 @@ export default defineComponent({
3746
eventLink() {
3847
return `/sentry/${this.event.id}`;
3948
},
49+
hasException() {
50+
return this.event?.payload?.exception?.values?.length > 0;
51+
},
52+
hasMessage(): boolean {
53+
return this.event?.payload?.message !== "";
54+
},
55+
message(): boolean {
56+
return this.event.payload.message;
57+
},
4058
exception() {
4159
const defaultException: object = {
4260
type: "Unknown",

‎mocks/sentry-js-event.json‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"id": "79e27c1d-e610-4c82-9180-aa07b51d2295",
3+
"type": "sentry",
4+
"labels": ["sentry.1"],
5+
"origin": null,
6+
"serverName": "",
7+
"date": "2023-09-17T21:49:59.000Z",
8+
"payload": {
9+
"message": "Something went wrong",
10+
"level": "info",
11+
"event_id": "c3e75f2edbfb4c79bbe0e42fd14f25aa",
12+
"platform": "javascript",
13+
"timestamp": 1694987399.84,
14+
"environment": "production",
15+
"sdk": {
16+
"integrations": [
17+
"InboundFilters",
18+
"FunctionToString",
19+
"TryCatch",
20+
"Breadcrumbs",
21+
"GlobalHandlers",
22+
"LinkedErrors",
23+
"Dedupe",
24+
"HttpContext",
25+
"BrowserTracing",
26+
"Replay"
27+
],
28+
"name": "sentry.javascript.browser",
29+
"version": "7.69.0",
30+
"packages": [
31+
{
32+
"name": "loader:@sentry/browser",
33+
"version": "7.69.0"
34+
}
35+
]
36+
},
37+
"contexts": {
38+
"trace": {
39+
"op": "pageload",
40+
"span_id": "9d251e73999c14d5",
41+
"trace_id": "1c1162cb90e74b4c98447a44896ea2f9"
42+
}
43+
},
44+
"tags": {
45+
"transaction": "/"
46+
},
47+
"request": {
48+
"url": "http://127.0.0.1:8000/",
49+
"headers": {
50+
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"
51+
}
52+
}
53+
}
54+
}

‎mocks/sentry-js.json‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{
2+
"id": "28482489-cbf9-4331-b4d8-90549009f777",
3+
"type": "sentry",
4+
"labels": ["sentry.1"],
5+
"origin": null,
6+
"serverName": "",
7+
"date": "2023-09-17T21:51:25.000Z",
8+
"payload": {
9+
"exception": {
10+
"values": [
11+
{
12+
"type": "ReferenceError",
13+
"value": "myUndefinedFunction is not defined",
14+
"stacktrace": {
15+
"frames": [
16+
{
17+
"filename": "http://127.0.0.1:8000/",
18+
"function": "?",
19+
"in_app": true,
20+
"lineno": 553,
21+
"colno": 5
22+
}
23+
]
24+
},
25+
"mechanism": {
26+
"type": "onerror",
27+
"handled": false
28+
}
29+
}
30+
]
31+
},
32+
"level": "error",
33+
"platform": "javascript",
34+
"event_id": "5c648be7c5614c83804b18dd8be36654",
35+
"timestamp": 1694987485.144,
36+
"environment": "production",
37+
"sdk": {
38+
"integrations": [
39+
"InboundFilters",
40+
"FunctionToString",
41+
"TryCatch",
42+
"Breadcrumbs",
43+
"GlobalHandlers",
44+
"LinkedErrors",
45+
"Dedupe",
46+
"HttpContext",
47+
"BrowserTracing",
48+
"Replay"
49+
],
50+
"name": "sentry.javascript.browser",
51+
"version": "7.69.0",
52+
"packages": [
53+
{
54+
"name": "loader:@sentry/browser",
55+
"version": "7.69.0"
56+
}
57+
]
58+
},
59+
"contexts": {
60+
"trace": {
61+
"op": "pageload",
62+
"span_id": "97088fb11b4f9d54",
63+
"status": "internal_error",
64+
"trace_id": "fefb24e1a72047d9b4feeb68bf56497a"
65+
}
66+
},
67+
"tags": {
68+
"transaction": "/"
69+
},
70+
"request": {
71+
"url": "http://127.0.0.1:8000/",
72+
"headers": {
73+
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"
74+
}
75+
}
76+
}
77+
}

0 commit comments

Comments
 (0)