feat: activate sentry for browser (#781)

.github/workflows/deploy.yml

@@ -90,8 +90,6 @@ jobs:
         run: yarn inst
       - name: Lint files
         run: yarn run lint:all
-      - name: Build assets
-        run: yarn run production
 
       - name: Check if there is any file update needed
         id: check
@@ -105,6 +103,16 @@ jobs:
             exit -1
           fi
 
+      - name: Prepare environment
+        run: |
+          { \
+            echo "MIX_PROD_SOURCE_MAPS=true"; \
+            echo "MIX_SENTRY_RELEASE=$GITHUB_SHA"; \
+          } | tee .env
+
+      - name: Build assets
+        run: yarn run production
+
       - name: Store assets
         uses: actions/upload-artifact@v2
         with:
@@ -113,7 +121,14 @@ jobs:
             public/mix-manifest.json
             public/js
             public/css
-            public/fonts
+            !public/**/*.map
+
+      - name: Store source maps
+        uses: actions/upload-artifact@v2
+        with:
+          name: sourcemaps
+          path: |
+            public/**/*.map
 
 
   ######################
@@ -179,7 +194,7 @@ jobs:
   sentry:
     runs-on: ubuntu-latest
     name: Sentry release
-    needs: deploy
+    needs: build
     if: github.event_name != 'pull_request'
 
     environment: fortrabbit-sentry
@@ -188,6 +203,12 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v2
 
+      - name: Download source maps
+        uses: actions/download-artifact@v2
+        with:
+          name: sourcemaps
+          path: public
+
       - name: Create Sentry release
         uses: getsentry/action-release@v1
         env:
@@ -196,3 +217,4 @@ jobs:
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
         with:
           environment: ${{ secrets.SENTRY_ENVIRONMENT }}
+          sourcemaps: public/css/app.css.map,public/js/app.js.map

app/Exceptions/Handler.php

@@ -64,7 +64,7 @@ public function render($request, Throwable $e)
      */
     public function report(Throwable $e)
     {
-        if (config('app.sentry.enable') && app()->bound('sentry') && $this->shouldReport($e)) {
+        if (config('app.sentry.enabled') && app()->bound('sentry') && $this->shouldReport($e)) {
             app('sentry')->captureException($e); // @codeCoverageIgnore
         }
 

app/Http/Middleware/SentryContext.php

@@ -21,7 +21,7 @@ class SentryContext
      */
     public function handle($request, Closure $next)
     {
-        if (app()->bound('sentry') && config('app.sentry.enable')) {
+        if (app()->bound('sentry') && config('app.sentry.enabled')) {
             \Sentry\configureScope(function (Scope $scope): void {
                 // Add user context
                 $user = Auth::user();
@@ -30,8 +30,8 @@ public function handle($request, Closure $next)
                         'id' => $user->id,
                     ]);
                 }
-                $scope->setTag('page.route.name', Route::currentRouteName());
-                $scope->setTag('page.route.action', Route::currentRouteAction());
+                $scope->setTag('page.route.name', Route::currentRouteName() ?? '');
+                $scope->setTag('page.route.action', Route::currentRouteAction() ?? '');
             });
         }
 

config/app.php

@@ -129,7 +129,9 @@
     |--------------------------------------------------------------------------
     */
 
-    'sentry.enable' => env('SENTRY_ENABLED', false),
+    'sentry' => [
+        'enabled' => env('SENTRY_ENABLED', false),
+    ],
 
     /*
     |--------------------------------------------------------------------------

config/sentry.php

@@ -27,10 +27,10 @@
         'command_info' => true,
     ],
 
-    // @see: https://docs.sentry.io/error-reporting/configuration/?platform=php#send-default-pii
-    'send_default_pii' => true,
+    // @see: https://docs.sentry.io/platforms/php/data-management/sensitive-data/#personally-identifiable-information-pii
+    'send_default_pii' => env('SENTRY_DEFAULT_PII', false),
 
-    'traces_sample_rate' => (float)(env('SENTRY_TRACES_SAMPLE_RATE', 0.0)),
+    'traces_sample_rate' => (float) env('SENTRY_TRACES_SAMPLE_RATE', 0.0),
 
     'controllers_base_namespace' => env('SENTRY_CONTROLLERS_BASE_NAMESPACE', 'App\\Http\\Controllers'),
 

package.json

@@ -58,6 +58,9 @@
         "@inertiajs/inertia-vue3": "^0.3.5",
         "@inertiajs/progress": "^0.2.4",
         "@popperjs/core": "^2.5",
+        "@sentry/browser": "^6.2.5",
+        "@sentry/integrations": "^6.2.5",
+        "@sentry/tracing": "^6.2.5",
         "@vue/compiler-sfc": "^3.0.5",
         "axios": "^0.20",
         "lodash": "^4.17.20",

resources/js/app.js

@@ -4,23 +4,32 @@ require('./bootstrap');
 import { createApp, h } from 'vue';
 import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
 import { InertiaProgress } from '@inertiajs/progress';
+import Sentry from './sentry';
 
 const langs = require('./langs').default;
 
 const el = document.getElementById('app');
 
 langs.loadLanguage('en', true).then((locale) => {
 
-  createApp({
+  const app = createApp({
     locale,
     render: () =>
       h(InertiaApp, {
         initialPage: JSON.parse(el.dataset.page),
         resolveComponent: (name) => require(`./Pages/${name}`).default,
         locale: locale.locale,
       }),
-  })
-    .mixin({ methods: _.assign({ route }, require('./methods').default) })
+    mounted() {
+      this.$nextTick(() => {
+        Sentry.setContext(this, locale);
+      });
+    }
+  });
+
+  Sentry.init(app, process.env.MIX_SENTRY_RELEASE);
+
+  app.mixin({ methods: _.assign({ route }, require('./methods').default) })
     .use(InertiaPlugin)
     .use(langs.i18n)
     .mount(el);

resources/js/sentry.js

@@ -0,0 +1,43 @@
+import * as Sentry from '@sentry/browser';
+import { Vue as VueIntegration } from '@sentry/integrations';
+import { Integrations } from '@sentry/tracing';
+import { Inertia } from '@inertiajs/inertia';
+
+export default {
+  _activated: false,
+
+  init(app, release) {
+    if (typeof SentryConfig !== 'undefined' && SentryConfig.dsn !== '') {
+      Sentry.init({
+        dsn: SentryConfig.dsn,
+        environment: SentryConfig.environment || null,
+        release: release || '',
+        sendDefaultPii: SentryConfig.sendDefaultPii || false,
+        tracesSampleRate: SentryConfig.tracesSampleRate || 0.0,
+        integrations: [
+          new VueIntegration({ Vue: app, attachProps: true }),
+          SentryConfig.tracesSampleRate > 0 ? new Integrations.BrowserTracing() : null,
+        ],
+      });
+      this._activated = true;
+    }
+  },
+
+  setContext(vm, locale) {
+    if (this._activated && typeof vm.$page !== 'undefined') {
+      if (vm.$page.props.auth) {
+        Sentry.setUser({ id: vm.$page.props.auth.user.id });
+        Sentry.setTag('company.id', vm.$page.props.auth.company.id);
+        Sentry.setTag('employee.id', vm.$page.props.auth.employee.id);
+      }
+      Sentry.setTag('locale', locale);
+      Sentry.setTag('page.component', vm.$page.component);
+      vm.$once(
+        'hook:destroyed',
+        Inertia.on('success', (event) => {
+          Sentry.setTag('page.component', event.detail.page.component);
+        })
+      );
+    }
+  },
+};

resources/views/app.blade.php

@@ -10,6 +10,17 @@
   <script src="{{ asset(mix('js/app.js')) }}" defer></script>
   <title>@yield('title', config('app.name'))</title>
 
+  @if (config('app.sentry.enabled'))
+  <script>
+    const SentryConfig = {!! \json_encode([
+      'dsn' => config('sentry.dsn'),
+      'environment' => config('sentry.environment'),
+      'sendDefaultPii' => config('sentry.send_default_pii'),
+      'tracesSampleRate' => config('sentry.traces_sample_rate'),
+    ]); !!}
+  </script>
+  @endif
+
   @routes
 </head>
 

webpack.mix.js

@@ -17,17 +17,15 @@ mix.js('resources/js/app.js', 'public/js').vue()
   .purgeCss(purgeCssOptions)
   .webpackConfig({
     output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
-    resolve: {
-      alias: {
-        '@': path.resolve('resources/js'),
-      },
-    },
-    devtool: "inline-source-map",
+  })
+  .alias({
+    vue$: path.join(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js'),
+    '@': path.resolve('resources/js'),
   })
   .babelConfig({
     plugins: ['@babel/plugin-syntax-dynamic-import'],
   })
-  .sourceMaps(false)
+  .sourceMaps(process.env.MIX_PROD_SOURCE_MAPS || false, 'eval-cheap-module-source-map', 'source-map')
   .setResourceRoot('../');
 
 if (mix.inProduction()) {

yarn.lock

@@ -1033,6 +1033,79 @@
   dependencies:
     any-observable "^0.3.0"
 
+"@sentry/browser@^6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.2.5.tgz#35e259e16521d26f348a06b31eb495e0033111d6"
+  integrity sha512-nlvaE+D7oaj4MxoY9ikw+krQDOjftnDYJQnOwOraXPk7KYM6YwmkakLuE+x/AkaH3FQVTQF330VAa9d6SWETlA==
+  dependencies:
+    "@sentry/core" "6.2.5"
+    "@sentry/types" "6.2.5"
+    "@sentry/utils" "6.2.5"
+    tslib "^1.9.3"
+
+"@sentry/core@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.2.5.tgz#e75093f8598becc0a4a0be927f32f7ac49e8588f"
+  integrity sha512-I+AkgIFO6sDUoHQticP6I27TT3L+i6TUS03in3IEtpBcSeP2jyhlxI8l/wdA7gsBqUPdQ4GHOOaNgtFIcr8qag==
+  dependencies:
+    "@sentry/hub" "6.2.5"
+    "@sentry/minimal" "6.2.5"
+    "@sentry/types" "6.2.5"
+    "@sentry/utils" "6.2.5"
+    tslib "^1.9.3"
+
+"@sentry/hub@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.2.5.tgz#324cae0c90d736cd1032e94104bf3f18becec4d6"
+  integrity sha512-YlEFdEhcfqpl2HC+/dWXBsBJEljyMzFS7LRRjCk8QANcOdp9PhwQjwebUB4/ulOBjHPP2WZk7fBBd/IKDasTUg==
+  dependencies:
+    "@sentry/types" "6.2.5"
+    "@sentry/utils" "6.2.5"
+    tslib "^1.9.3"
+
+"@sentry/integrations@^6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-6.2.5.tgz#37cac11b486779707d62751da36aaaefbb44951a"
+  integrity sha512-4LOgO8lSeGaRV4w1Y03YWtTqrZdm56ciD7k0GLhv+PcFLpiu0exsS1XSs/9vET5LB5GtIgBTeJNNbxVFvvmv8g==
+  dependencies:
+    "@sentry/types" "6.2.5"
+    "@sentry/utils" "6.2.5"
+    localforage "^1.8.1"
+    tslib "^1.9.3"
+
+"@sentry/minimal@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.2.5.tgz#3e963e868bfa68e97581403521fd4e09a8965b02"
+  integrity sha512-RKP4Qx3p7Cv0oX1cPKAkNVFYM7p2k1t32cNk1+rrVQS4hwlJ7Eg6m6fsqsO+85jd6Ne/FnyYsfo9cDD3ImTlWQ==
+  dependencies:
+    "@sentry/hub" "6.2.5"
+    "@sentry/types" "6.2.5"
+    tslib "^1.9.3"
+
+"@sentry/tracing@^6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.2.5.tgz#3f5dadfdccdb5c1fb2eef68458c7c34329b0a34a"
+  integrity sha512-j/hM0BoHxfrNLxPeEJ5Vq4R34hO/TOHMEpLR3FdnunBXbsmjoKMMygIkPxnpML5XWtvukAehbwpDXldwMYz83w==
+  dependencies:
+    "@sentry/hub" "6.2.5"
+    "@sentry/minimal" "6.2.5"
+    "@sentry/types" "6.2.5"
+    "@sentry/utils" "6.2.5"
+    tslib "^1.9.3"
+
+"@sentry/types@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.2.5.tgz#34b75285b149e0b9bc5fd54fcc2c445d978c7f2e"
+  integrity sha512-1Sux6CLYrV9bETMsGP/HuLFLouwKoX93CWzG8BjMueW+Di0OGxZphYjXrGuDs8xO8bAKEVGCHgVQdcB2jevS0w==
+
+"@sentry/utils@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.2.5.tgz#be90d056b09ed1216097d7a29e3e81ba39238e1b"
+  integrity sha512-fJoLUZHrd5MPylV1dT4qL74yNFDl1Ur/dab+pKNSyvnHPnbZ/LRM7aJ8VaRY/A7ZdpRowU+E14e/Yeem2c6gtQ==
+  dependencies:
+    "@sentry/types" "6.2.5"
+    tslib "^1.9.3"
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@@ -4966,6 +5039,11 @@ img-loader@^3.0.2:
   dependencies:
     loader-utils "^1.1.0"
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
 import-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
@@ -5768,6 +5846,13 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -5900,6 +5985,13 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
+localforage@^1.8.1:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.9.0.tgz#f3e4d32a8300b362b4634cc4e066d9d00d2f09d1"
+  integrity sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -9301,7 +9393,7 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@^1.9.0:
+tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==