sentry dsn guide

src/components/catalog/GuidePageHeader.vue

@@ -22,18 +22,22 @@
       </div>
       <CatalogItemLabel
         class="guide-page-header__label"
-        item-type="catcher"
+        :item-type="badge"
       />
     </div>
     <div class="guide-page-header__description">
       {{ description }}
     </div>
     <div class="guide-page-header__info">
-      <a :href="githubLink">
+      <a
+        v-if="githubLink"
+        :href="githubLink"
+      >
         <Icon symbol="github" />
         {{ $t('components.catalog.viewSource') }}
       </a>
       <a
+        v-if="readmeLink"
         :href="readmeLink"
       >
         {{ $t('components.catalog.viewReadme') }}
@@ -61,17 +65,21 @@ export default {
       type: String,
       required: true,
     },
+    badge: {
+      type: String,
+      default: 'catcher',
+    },
     githubLink: {
       type: String,
-      required: true,
+      default: '',
     },
     description: {
       type: String,
       required: true,
     },
     readmeLink: {
       type: String,
-      required: true,
+      default: '',
     },
   },
   data() {

src/components/catalog/Item.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="catalog-item">
+  <div
+    class="catalog-item"
+    :class="{'catalog-item--wide': isWide}"
+  >
     <div
       class="catalog-item__header"
       :style="{'background-image': `url(${image})`}"
@@ -48,6 +51,10 @@ export default {
       type: String,
       required: true,
     },
+    isWide: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
@@ -63,8 +70,13 @@ export default {
   cursor: pointer;
   transition: all 120ms ease;
 
+  &--wide {
+    max-width: 300px;
+  }
+
   &__header {
     height: 100px;
+    flex-shrink: 0;
     background-position: center center;
     background-size: cover;
     border-radius: 4px;
@@ -87,7 +99,7 @@ export default {
   }
 
   &__install-button {
-    margin: 15px auto 15px 15px;
+    margin: 0 auto 15px 15px;
     text-transform: uppercase;
   }
 

src/components/catalog/catchers/AddCatcher.vue

@@ -52,7 +52,26 @@
           :class="{'project-add-catcher__catalog-item--not-implemented': !item.page}"
           @click.native="item.page && $router.push({name: 'setup-catcher', params: {projectId: $route.params.projectId, page: item.page}})"
         />
+
+        <a class="project-add-catcher__catalog-more" href="https://docs.hawk.so/integrations?from=garage" target="_blank">
+          {{ $t('components.catalog.discoverMore') }}
+        </a>
+
+        <h2 class="project-add-catcher__catalog-header">
+          {{ $t('components.catalog.migrationFromSentry') }}
+        </h2>
+        <CatalogItem
+          type="external"
+          class="project-add-catcher__catalog-item"
+          :name="'SENTRY'"
+          :isWide="true"
+          :image="require('../../../assets/catalog/sentry.svg')"
+          :description="$t('components.catalog.migrationFromSentryDescription')"
+          @click.native="$router.push({name: 'setup-catcher', params: {projectId: $route.params.projectId, page: 'sentry'}})"
+        />
+        <div class="project-add-catcher__migration-description"></div>
       </div>
+
     </div>
   </div>
 </template>
@@ -243,6 +262,7 @@ export default {
       display: flex;
       flex-direction: column;
       justify-content: center;
+      margin-bottom: 100px;
     }
 
     &__catalog-header {
@@ -283,5 +303,21 @@ export default {
         max-width: 245px;
       }
     }
+
+    &__catalog-more {
+      background-color: var(--color-bg-main);
+      margin: 7.5px 7.5px 50px;
+      text-align: center;
+      padding: 18px 20px;
+      border-radius: 4px;
+      width: 100%;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:hover {
+        box-shadow: 0 6px 12px -5px rgba(0,0,0,0.15);
+        transform: translateY(-2px);
+      }
+    }
   }
 </style>

src/components/catalog/catchers/dynamicLoadGuidePages.js

@@ -11,6 +11,7 @@ export default {
   async beforeRouteEnter(to, _from, next) {
     const hasSeparatePage = [
       'javascript',
+      'sentry',
     ];
 
     let view = 'common';

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="guide-page">
+    <GuideHeader
+      class="guide-page__header"
+      :background-image="
+        require('../../../../assets/catalog/sentry.svg')
+      "
+      catcher-name="Sentry"
+      :badge="'external'"
+      :description="$t('components.catalog.migrationFromSentryDescription')"
+    />
+    <div class="guide-page__instructions">
+      <div class="guide-page__instructions-header">
+        {{ $t('components.catalog.installation') }}
+      </div>
+      <GuideStepBlock :step-number="1">
+        <template #header>
+          {{ $t('components.catalog.getDSN') }}
+        </template>
+        <template #content>
+          {{ $t('components.catalog.hereIsDSN') }}
+          <TokenBlock :token="computedDSN" />
+        </template>
+      </GuideStepBlock>
+      <GuideStepBlock
+        :step-number="2"
+        last
+      >
+        <template #header>
+          {{ $t('components.catalog.useDSN') }}
+        </template>
+        <template #content>
+          {{ $t('components.catalog.useDSNText') }}
+        </template>
+      </GuideStepBlock>
+    </div>
+  </div>
+</template>
+
+<script>
+import GuideSection from '../../GuideSection';
+import GuideStepBlock from '../../GuideStepBlock';
+import GuideHeader from '../../GuidePageHeader';
+import TokenBlock from '../../../project/TokenBlock';
+import CodeBlock from '../../../utils/CodeBlock';
+import UiButton from '../../../utils/UiButton';
+import { getSentryDSN } from '../../../../utils';
+
+export default {
+  name: 'SetupJavascriptCatcher',
+  components: {
+    GuideStepBlock,
+    GuideHeader,
+    TokenBlock,
+    CodeBlock,
+    GuideSection,
+    UiButton,
+  },
+  data() {
+    return {
+      repoUrl: 'https://github.com/codex-team/hawk.javascript',
+      readmeUrl: 'https://github.com/codex-team/hawk.javascript/blob/master/README.md',
+    };
+  },
+  computed: {
+    /**
+     * Current viewed project
+     *
+     * @returns {Project}
+     */
+    project() {
+      const projectId = this.$route.params.projectId;
+
+      return this.$store.getters.getProjectById(projectId);
+    },
+
+    computedDSN() {
+      if (!this.project || !this.project.token) {
+        return '';
+      }
+
+      return getSentryDSN(this.project.token);
+    },
+  },
+};
+</script>
+
+<style src="../../../../styles/guide-page.css"></style>

src/components/project/settings/Integrations.vue

@@ -24,6 +24,19 @@
         </span>
       </template>
     </i18n>
+    <br>
+    <br>
+    <br>
+    <div class="settings-window-page__title">
+      {{ $t('projects.settings.integrations.sentryDSN') }}
+    </div>
+    <div>
+      {{ $t('projects.settings.integrations.sentryDSNText') }}
+    </div>
+    <TokenBlock
+      class="projects-integrations-settings-page__token"
+      :token="sentryDSN"
+    />
   </div>
 </template>
 
@@ -34,6 +47,7 @@ import TokenBlock from '../TokenBlock.vue';
 import { ActionType } from '../../utils/ConfirmationWindow/types';
 import { GENERATE_NEW_INTEGRATION_TOKEN } from '@/store/modules/projects/actionTypes';
 import notifier from 'codex-notifier';
+import { getSentryDSN } from '../../../utils';
 
 export default Vue.extend({
   name: 'ProjectIntegrationsSettings',
@@ -73,6 +87,11 @@ export default Vue.extend({
       });
     },
   },
+  computed: {
+    sentryDSN(): string {
+      return getSentryDSN(this.project.token);
+    },
+  },
 });
 </script>
 

src/i18n/messages/en.json

@@ -55,7 +55,10 @@
       "step2": "Integrate a catcher",
       "whatToDo": "To start track events, you need to connect one of our Catchers",
       "whatIsCatcher": "Catcher is a small script that will catch errors in your application and send it to Hawk.",
+      "discoverMore": "Discover more integrations",
       "selectCatcherHeading": "Select a Catcher",
+      "migrationFromSentry": "Migration from Sentry",
+      "migrationFromSentryDescription": "Hawk can accept errors from Sentry SDK. You will need to change only one line.",
       "catchers": {
         "nodejs": "Track errors from the server application built on JS or TS",
         "php": "Can be connected as a standalone script or as a monolog provider",
@@ -74,7 +77,11 @@
       "getToken": "Get an Integration Token",
       "hereIsToken": "Here is your Integration token. You can also found it in the project settings later.",
       "followGuide": "Follow the Installation guide",
-      "readmeDisclaimer": "And the most actual guide at the README.md file in Catcher’s repo. As well as its source code."
+      "readmeDisclaimer": "And the most actual guide at the README.md file in Catcher’s repo. As well as its source code.",
+      "getDSN": "Get a DSN",
+      "hereIsDSN": "Here is your DSN. You can also found it in the project settings later.",
+      "useDSN": "Use DSN in Sentry SDK",
+      "useDSNText": "All Sentry SDK in one way or another support the `dsn` parameter. Pass the received DSN to the Sentry SDK options."
     }
   },
   "forms": {
@@ -129,7 +136,9 @@
         "revokeConfirmation": {
           "title": "Revoke integration token?",
           "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."
-        }
+        },
+        "sentryDSN": "Sentry DSN",
+        "sentryDSNText": "If you use Sentry SDK, you can use this DSN to send errors to Hawk."
       },
       "notifications": {
         "title": "Notifications",

src/i18n/messages/ru.json

@@ -55,7 +55,10 @@
       "step2": "Интегрировать Кэтчер",
       "whatToDo": "Чтобы начать принимать ивенты, вам нужно интегрировать один из Кэтчеров",
       "whatIsCatcher": "Кэтчер это небольшой скрипт, который будет отлавливать ошибки в вашем приложении и отправлять их в Хоука.",
+      "discoverMore": "Посмотреть все интеграции",
       "selectCatcherHeading": "Выберите Кэтчер",
+      "migrationFromSentry": "Миграция из Sentry",
+      "migrationFromSentryDescription": "Хоук может принимать ошибки из Sentry SDK. Просто поменяйте DSN.",
       "catchers": {
         "nodejs": "Прокачайте серверное приложение на JS или TS",
         "php": "Держит нагрузки, ловит ошибки, поддерживает Monolog",
@@ -74,7 +77,11 @@
       "getToken": "Получить Интеграционный Токен",
       "hereIsToken": "Это ваш Интеграционный Токен. Вы сможете найти его в настройках проекта.",
       "followGuide": "Следуйте Инструкции по установке",
-      "readmeDisclaimer": "А наиболее актуальная инструкция — в README.md Кэтчера. А также его исходный код."
+      "readmeDisclaimer": "А наиболее актуальная инструкция — в README.md Кэтчера. А также его исходный код.",
+      "getDSN": "Получить DSN",
+      "hereIsDSN": "Это ваш DSN, который вы можете использовать в Sentry SDK.",
+      "useDSN": "Поменяйте DSN в Sentry SDK",
+      "useDSNText": "Все Sentry SDK в том или ином виде поддерживают параметр `dsn`. Передайте полученный DSN в опции Sentry SDK."
     }
   },
   "forms": {
@@ -129,7 +136,9 @@
         "revokeConfirmation": {
           "title": "Отозвать интеграционный токен?",
           "description": "После этого действия Хоук перестанет принимать ивенты со старым интеграционным токеном. Вам будет необходимо заменить его на новый в вашем проекте."
-        }
+        },
+        "sentryDSN": "Sentry DSN",
+        "sentryDSNText": "Если вы используете Sentry SDK, вы можете использовать этот DSN для того, чтобы отправлять ошибки в Хоук."
       },
       "notifications": {
         "title": "Уведомления",