Distributed tracing functionality with Magento (#12)

Author: indykoning

README.md

@@ -100,6 +100,29 @@ This can be done in the configuration file like so:
 ],
 ```
 
+## Linking frontend errors to Magento Errors (Distributed Tracing)
+
+For full observability you may want to connect your frontend errors and sessions to the thrown Magento errors.
+This could give benefits like showing where in a Replay an error occurred in Magento.
+
+For this you must first install the [Magento2 Sentry module](https://github.com/justbetter/magento2-sentry)
+
+Then add the following to your Rapidez `.env`
+
+```env
+SENTRY_VUE_SAMPLE_RATE=10 # A percentage is required here (0 is allowed as well)
+SENTRY_VUE_INTEGRATION_BROWSER_TRACING=true
+SENTRY_VUE_INTEGRATION_HTTP_CLIENT=true
+SENTRY_VUE_INTEGRATION_GRAPHQL_CLIENT=true
+SENTRY_VUE_INTEGRATION_REPLAY=true
+```
+
+With this enabled you must make sure the `sentry-trace,baggage,traceparent` headers are allowed in your Magento (and if applicable Rapidez) CORS config
+
+Then in Magento make sure to enable "Tracing", "Performance tracking", and to set a "Traces sample rate" (0 is allowed)
+
+With this set up your Rapidez and Magento Sentry should be linked with each other.
+
 ## License
 
 GNU General Public License v3. Please see [License File](LICENSE) for more information.

config/rapidez/sentry-vue.php

@@ -8,6 +8,18 @@
 
         // Amount of errors to be logged to sentry (1.00 = 100%)
         'sampleRate' => env('SENTRY_VUE_SAMPLE_RATE', 100) / 100,
+        // Amount of transactions to be logged to sentry (1.00 = 100%)
+        'tracesSampleRate' => env('SENTRY_VUE_TRACES_SAMPLE_RATE', 10) / 100,
+        // Which backends should sentry link transactions to, by default it'll be the Rapidez and Magento backend
+        'tracePropagationTargets' => explode(' ', env('SENTRY_VUE_TRACES_PROPAGATION_TARGETS', '') ),
+        // Amount of replays to be logged to sentry when no error occurs (1.00 = 100%)
+        // https://docs.sentry.io/platforms/javascript/guides/vue/session-replay/#recommended-production-sample-rates
+        'replaysSessionSampleRate' => env('SENTRY_VUE_REPLAY_SAMPLE_RATE', 10) / 100,
+        // Amount of replays to be logged to sentry when errors have occured (1.00 = 100%)
+        'replaysOnErrorSampleRate' =>  env('SENTRY_VUE_ERROR_REPLAY_SAMPLE_RATE', 100) / 100,
+
+        // Only report errors for matching urls, by default the shop url will be used
+        'allowUrls' => explode(' ', env('SENTRY_VUE_ALLOW_URLS', '') ),
 
         // See the Sentry documentation: https://docs.sentry.io/platforms/javascript/guides/vue/configuration/filtering/#using-ignore-errors
         'ignoreErrors' => [
@@ -42,6 +54,7 @@
         'debug' => env('SENTRY_VUE_INTEGRATION_DEBUG', false),
         'extraErrorData' => env('SENTRY_VUE_INTEGRATION_EXTRA_ERROR_DATA', false),
         'httpClient' => env('SENTRY_VUE_INTEGRATION_HTTP_CLIENT', false),
+        'graphqlClient' => env('SENTRY_VUE_INTEGRATION_GRAPHQL_CLIENT', false),
         'moduleMetadata' => env('SENTRY_VUE_INTEGRATION_MODULE_METADATA', false),
         'rewriteFrames' => env('SENTRY_VUE_INTEGRATION_REWRITE_FRAMES', false),
         'replay' => env('SENTRY_VUE_INTEGRATION_REPLAY', false),

resources/js/sentry.js

@@ -16,6 +16,13 @@ let integrations = Object.entries(window.config.sentry.integrations).map(([integ
     return value === true ? integrationFunction() : integrationFunction(value)
 }).filter((value) => value !== undefined)
 
+window.config.sentry.configuration.allowUrls.push(window.app.config.base_url)
+window.config.sentry.configuration.tracePropagationTargets.push(window.app.config.base_url)
+window.config.sentry.configuration.tracePropagationTargets.push(window.app.config.magento_url)
+
+window.config.sentry.configuration.allowUrls = window.config.sentry.configuration.allowUrls.filter((a) => a)
+window.config.sentry.configuration.tracePropagationTargets = window.config.sentry.configuration.tracePropagationTargets.filter((a) => a)
+
 // Set up the Sentry configuration
 let configuration = Object.assign(
     {