Skip to content

Commit 081d081

Browse files
neSpeccneSpecc
committed
sentry dsn guide
1 parent e95005d commit 081d081

10 files changed

Lines changed: 246 additions & 11 deletions

File tree

‎src/assets/catalog/sentry.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎src/components/catalog/GuidePageHeader.vue‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,22 @@
2222
</div>
2323
<CatalogItemLabel
2424
class="guide-page-header__label"
25-
item-type="catcher"
25+
:item-type="badge"
2626
/>
2727
</div>
2828
<div class="guide-page-header__description">
2929
{{ description }}
3030
</div>
3131
<div class="guide-page-header__info">
32-
<a :href="githubLink">
32+
<a
33+
v-if="githubLink"
34+
:href="githubLink"
35+
>
3336
<Icon symbol="github" />
3437
{{ $t('components.catalog.viewSource') }}
3538
</a>
3639
<a
40+
v-if="readmeLink"
3741
:href="readmeLink"
3842
>
3943
{{ $t('components.catalog.viewReadme') }}
@@ -61,17 +65,21 @@ export default {
6165
type: String,
6266
required: true,
6367
},
68+
badge: {
69+
type: String,
70+
default: 'catcher',
71+
},
6472
githubLink: {
6573
type: String,
66-
required: true,
74+
default: '',
6775
},
6876
description: {
6977
type: String,
7078
required: true,
7179
},
7280
readmeLink: {
7381
type: String,
74-
required: true,
82+
default: '',
7583
},
7684
},
7785
data() {

‎src/components/catalog/Item.vue‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<div class="catalog-item">
2+
<div
3+
class="catalog-item"
4+
:class="{'catalog-item--wide': isWide}"
5+
>
36
<div
47
class="catalog-item__header"
58
:style="{'background-image': `url(${image})`}"
@@ -48,6 +51,10 @@ export default {
4851
type: String,
4952
required: true,
5053
},
54+
isWide: {
55+
type: Boolean,
56+
default: false,
57+
},
5158
},
5259
};
5360
</script>
@@ -63,8 +70,13 @@ export default {
6370
cursor: pointer;
6471
transition: all 120ms ease;
6572
73+
&--wide {
74+
max-width: 300px;
75+
}
76+
6677
&__header {
6778
height: 100px;
79+
flex-shrink: 0;
6880
background-position: center center;
6981
background-size: cover;
7082
border-radius: 4px;
@@ -87,7 +99,7 @@ export default {
8799
}
88100
89101
&__install-button {
90-
margin: 15px auto 15px 15px;
102+
margin: 0 auto 15px 15px;
91103
text-transform: uppercase;
92104
}
93105

‎src/components/catalog/catchers/AddCatcher.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,26 @@
5252
:class="{'project-add-catcher__catalog-item--not-implemented': !item.page}"
5353
@click.native="item.page && $router.push({name: 'setup-catcher', params: {projectId: $route.params.projectId, page: item.page}})"
5454
/>
55+
56+
<a class="project-add-catcher__catalog-more" href="https://docs.hawk.so/integrations?from=garage" target="_blank">
57+
{{ $t('components.catalog.discoverMore') }}
58+
</a>
59+
60+
<h2 class="project-add-catcher__catalog-header">
61+
{{ $t('components.catalog.migrationFromSentry') }}
62+
</h2>
63+
<CatalogItem
64+
type="external"
65+
class="project-add-catcher__catalog-item"
66+
:name="'SENTRY'"
67+
:isWide="true"
68+
:image="require('../../../assets/catalog/sentry.svg')"
69+
:description="$t('components.catalog.migrationFromSentryDescription')"
70+
@click.native="$router.push({name: 'setup-catcher', params: {projectId: $route.params.projectId, page: 'sentry'}})"
71+
/>
72+
<div class="project-add-catcher__migration-description"></div>
5573
</div>
74+
5675
</div>
5776
</div>
5877
</template>
@@ -243,6 +262,7 @@ export default {
243262
display: flex;
244263
flex-direction: column;
245264
justify-content: center;
265+
margin-bottom: 100px;
246266
}
247267
248268
&__catalog-header {
@@ -283,5 +303,21 @@ export default {
283303
max-width: 245px;
284304
}
285305
}
306+
307+
&__catalog-more {
308+
background-color: var(--color-bg-main);
309+
margin: 7.5px 7.5px 50px;
310+
text-align: center;
311+
padding: 18px 20px;
312+
border-radius: 4px;
313+
width: 100%;
314+
cursor: pointer;
315+
transition: all 0.2s ease;
316+
317+
&:hover {
318+
box-shadow: 0 6px 12px -5px rgba(0,0,0,0.15);
319+
transform: translateY(-2px);
320+
}
321+
}
286322
}
287323
</style>

‎src/components/catalog/catchers/dynamicLoadGuidePages.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default {
1111
async beforeRouteEnter(to, _from, next) {
1212
const hasSeparatePage = [
1313
'javascript',
14+
'sentry',
1415
];
1516

1617
let view = 'common';

‎src/components/catalog/catchers/guides/sentry.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<div class="guide-page">
3+
<GuideHeader
4+
class="guide-page__header"
5+
:background-image="
6+
require('../../../../assets/catalog/sentry.svg')
7+
"
8+
catcher-name="Sentry"
9+
:badge="'external'"
10+
:description="$t('components.catalog.migrationFromSentryDescription')"
11+
/>
12+
<div class="guide-page__instructions">
13+
<div class="guide-page__instructions-header">
14+
{{ $t('components.catalog.installation') }}
15+
</div>
16+
<GuideStepBlock :step-number="1">
17+
<template #header>
18+
{{ $t('components.catalog.getDSN') }}
19+
</template>
20+
<template #content>
21+
{{ $t('components.catalog.hereIsDSN') }}
22+
<TokenBlock :token="computedDSN" />
23+
</template>
24+
</GuideStepBlock>
25+
<GuideStepBlock
26+
:step-number="2"
27+
last
28+
>
29+
<template #header>
30+
{{ $t('components.catalog.useDSN') }}
31+
</template>
32+
<template #content>
33+
{{ $t('components.catalog.useDSNText') }}
34+
</template>
35+
</GuideStepBlock>
36+
</div>
37+
</div>
38+
</template>
39+
40+
<script>
41+
import GuideSection from '../../GuideSection';
42+
import GuideStepBlock from '../../GuideStepBlock';
43+
import GuideHeader from '../../GuidePageHeader';
44+
import TokenBlock from '../../../project/TokenBlock';
45+
import CodeBlock from '../../../utils/CodeBlock';
46+
import UiButton from '../../../utils/UiButton';
47+
import { getSentryDSN } from '../../../../utils';
48+
49+
export default {
50+
name: 'SetupJavascriptCatcher',
51+
components: {
52+
GuideStepBlock,
53+
GuideHeader,
54+
TokenBlock,
55+
CodeBlock,
56+
GuideSection,
57+
UiButton,
58+
},
59+
data() {
60+
return {
61+
repoUrl: 'https://github.com/codex-team/hawk.javascript',
62+
readmeUrl: 'https://github.com/codex-team/hawk.javascript/blob/master/README.md',
63+
};
64+
},
65+
computed: {
66+
/**
67+
* Current viewed project
68+
*
69+
* @returns {Project}
70+
*/
71+
project() {
72+
const projectId = this.$route.params.projectId;
73+
74+
return this.$store.getters.getProjectById(projectId);
75+
},
76+
77+
computedDSN() {
78+
if (!this.project || !this.project.token) {
79+
return '';
80+
}
81+
82+
return getSentryDSN(this.project.token);
83+
},
84+
},
85+
};
86+
</script>
87+
88+
<style src="../../../../styles/guide-page.css"></style>

‎src/components/project/settings/Integrations.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,19 @@
2424
</span>
2525
</template>
2626
</i18n>
27+
<br>
28+
<br>
29+
<br>
30+
<div class="settings-window-page__title">
31+
{{ $t('projects.settings.integrations.sentryDSN') }}
32+
</div>
33+
<div>
34+
{{ $t('projects.settings.integrations.sentryDSNText') }}
35+
</div>
36+
<TokenBlock
37+
class="projects-integrations-settings-page__token"
38+
:token="sentryDSN"
39+
/>
2740
</div>
2841
</template>
2942

@@ -34,6 +47,7 @@ import TokenBlock from '../TokenBlock.vue';
3447
import { ActionType } from '../../utils/ConfirmationWindow/types';
3548
import { GENERATE_NEW_INTEGRATION_TOKEN } from '@/store/modules/projects/actionTypes';
3649
import notifier from 'codex-notifier';
50+
import { getSentryDSN } from '../../../utils';
3751
3852
export default Vue.extend({
3953
name: 'ProjectIntegrationsSettings',
@@ -73,6 +87,11 @@ export default Vue.extend({
7387
});
7488
},
7589
},
90+
computed: {
91+
sentryDSN(): string {
92+
return getSentryDSN(this.project.token);
93+
},
94+
},
7695
});
7796
</script>
7897

‎src/i18n/messages/en.json‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,10 @@
5555
"step2": "Integrate a catcher",
5656
"whatToDo": "To start track events, you need to connect one of our Catchers",
5757
"whatIsCatcher": "Catcher is a small script that will catch errors in your application and send it to Hawk.",
58+
"discoverMore": "Discover more integrations",
5859
"selectCatcherHeading": "Select a Catcher",
60+
"migrationFromSentry": "Migration from Sentry",
61+
"migrationFromSentryDescription": "Hawk can accept errors from Sentry SDK. You will need to change only one line.",
5962
"catchers": {
6063
"nodejs": "Track errors from the server application built on JS or TS",
6164
"php": "Can be connected as a standalone script or as a monolog provider",
@@ -74,7 +77,11 @@
7477
"getToken": "Get an Integration Token",
7578
"hereIsToken": "Here is your Integration token. You can also found it in the project settings later.",
7679
"followGuide": "Follow the Installation guide",
77-
"readmeDisclaimer": "And the most actual guide at the README.md file in Catcher’s repo. As well as its source code."
80+
"readmeDisclaimer": "And the most actual guide at the README.md file in Catcher’s repo. As well as its source code.",
81+
"getDSN": "Get a DSN",
82+
"hereIsDSN": "Here is your DSN. You can also found it in the project settings later.",
83+
"useDSN": "Use DSN in Sentry SDK",
84+
"useDSNText": "All Sentry SDK in one way or another support the `dsn` parameter. Pass the received DSN to the Sentry SDK options."
7885
}
7986
},
8087
"forms": {
@@ -129,7 +136,9 @@
129136
"revokeConfirmation": {
130137
"title": "Revoke integration token?",
131138
"description": "After this action, Hawk will stop accepting events with the old integration token. You will need to replace it with a new one in your project."
132-
}
139+
},
140+
"sentryDSN": "Sentry DSN",
141+
"sentryDSNText": "If you use Sentry SDK, you can use this DSN to send errors to Hawk."
133142
},
134143
"notifications": {
135144
"title": "Notifications",

‎src/i18n/messages/ru.json‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,10 @@
5555
"step2": "Интегрировать Кэтчер",
5656
"whatToDo": "Чтобы начать принимать ивенты, вам нужно интегрировать один из Кэтчеров",
5757
"whatIsCatcher": "Кэтчер это небольшой скрипт, который будет отлавливать ошибки в вашем приложении и отправлять их в Хоука.",
58+
"discoverMore": "Посмотреть все интеграции",
5859
"selectCatcherHeading": "Выберите Кэтчер",
60+
"migrationFromSentry": "Миграция из Sentry",
61+
"migrationFromSentryDescription": "Хоук может принимать ошибки из Sentry SDK. Просто поменяйте DSN.",
5962
"catchers": {
6063
"nodejs": "Прокачайте серверное приложение на JS или TS",
6164
"php": "Держит нагрузки, ловит ошибки, поддерживает Monolog",
@@ -74,7 +77,11 @@
7477
"getToken": "Получить Интеграционный Токен",
7578
"hereIsToken": "Это ваш Интеграционный Токен. Вы сможете найти его в настройках проекта.",
7679
"followGuide": "Следуйте Инструкции по установке",
77-
"readmeDisclaimer": "А наиболее актуальная инструкция — в README.md Кэтчера. А также его исходный код."
80+
"readmeDisclaimer": "А наиболее актуальная инструкция — в README.md Кэтчера. А также его исходный код.",
81+
"getDSN": "Получить DSN",
82+
"hereIsDSN": "Это ваш DSN, который вы можете использовать в Sentry SDK.",
83+
"useDSN": "Поменяйте DSN в Sentry SDK",
84+
"useDSNText": "Все Sentry SDK в том или ином виде поддерживают параметр `dsn`. Передайте полученный DSN в опции Sentry SDK."
7885
}
7986
},
8087
"forms": {
@@ -129,7 +136,9 @@
129136
"revokeConfirmation": {
130137
"title": "Отозвать интеграционный токен?",
131138
"description": "После этого действия Хоук перестанет принимать ивенты со старым интеграционным токеном. Вам будет необходимо заменить его на новый в вашем проекте."
132-
}
139+
},
140+
"sentryDSN": "Sentry DSN",
141+
"sentryDSNText": "Если вы используете Sentry SDK, вы можете использовать этот DSN для того, чтобы отправлять ошибки в Хоук."
133142
},
134143
"notifications": {
135144
"title": "Уведомления",

0 commit comments

Comments
 (0)