From 711ea54880f82ac364709ca5b9a562d01be44ad1 Mon Sep 17 00:00:00 2001 From: Raul Perusquia Date: Mon, 6 Jan 2025 00:21:49 +0800 Subject: [PATCH] continue checking sentry --- app/Http/Kernel.php | 2 + .../AddSentryBrowserProfilingHeader.php | 22 +++++++ resources/js/app-grp.js | 61 ++++++++++--------- 3 files changed, 56 insertions(+), 29 deletions(-) create mode 100644 app/Http/Middleware/AddSentryBrowserProfilingHeader.php diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php index d5451381d4..0ecb745bd7 100644 --- a/app/Http/Kernel.php +++ b/app/Http/Kernel.php @@ -8,6 +8,7 @@ namespace App\Http; +use App\Http\Middleware\AddSentryBrowserProfilingHeader; use App\Http\Middleware\ApiBindGroupInstance; use App\Http\Middleware\HandlePupilInertiaRequests; use App\Http\Middleware\RetinaPreparingAccount; @@ -64,6 +65,7 @@ class Kernel extends HttpKernel ValidatePostSize::class, TrimStrings::class, ConvertEmptyStringsToNull::class, + AddSentryBrowserProfilingHeader::class ]; protected $middlewareGroups = [ diff --git a/app/Http/Middleware/AddSentryBrowserProfilingHeader.php b/app/Http/Middleware/AddSentryBrowserProfilingHeader.php new file mode 100644 index 0000000000..c92c76edaf --- /dev/null +++ b/app/Http/Middleware/AddSentryBrowserProfilingHeader.php @@ -0,0 +1,22 @@ + + * Created: Sun, 05 Jan 2025 23:58:53 Malaysia Time, Kuala Lumpur, Malaysia + * Copyright (c) 2025, Raul A Perusquia Flores + */ + +namespace App\Http\Middleware; + +use Closure; +use Illuminate\Http\Request; + +class AddSentryBrowserProfilingHeader +{ + + public function handle(Request $request, Closure $next) + { + $response = $next($request); + $response->headers->set('Document-Policy', 'js-profiling'); + return $response; + } +} diff --git a/resources/js/app-grp.js b/resources/js/app-grp.js index 3cfef4a9d6..a5eacc7b32 100644 --- a/resources/js/app-grp.js +++ b/resources/js/app-grp.js @@ -2,7 +2,7 @@ import "./bootstrap"; import "../css/app.css"; import { createApp, h } from "vue"; -import { createInertiaApp , router} from "@inertiajs/vue3"; +import { createInertiaApp, router } from "@inertiajs/vue3"; import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m"; import { i18nVue } from "laravel-vue-i18n"; import Notifications from "@kyvg/vue3-notification"; @@ -17,7 +17,6 @@ import Aura from "@primevue/themes/aura"; import { definePreset } from "@primevue/themes"; import ConfirmationService from "primevue/confirmationservice"; - const appName = capitalize( window.document.getElementsByTagName("title")[0]?.innerText) || "Aiku"; @@ -40,7 +39,6 @@ const MyPreset = definePreset(Aura, { } }); - createInertiaApp( { title : (title) => `${title} - ${appName}`, @@ -59,17 +57,20 @@ createInertiaApp( dsn : import.meta.env.VITE_SENTRY_DSN, environment : import.meta.env.VITE_APP_ENV, release : import.meta.env.VITE_RELEASE, + debug : true, replaysSessionSampleRate: 0.1, replaysOnErrorSampleRate: 1.0, + profilesSampleRate : 1.0, integrations : [ new Sentry.BrowserTracing({ - // Helps to send page load and navigation OPs to Sentry for InertiaJS routingInstrumentation: inertiaRoutingInstrumentation, - enableInp: true, + enableInp: true }), - Sentry.browserProfilingIntegration(), Sentry.replayIntegration(), Sentry.httpClientIntegration(), + Sentry.browserTracingIntegration(), + Sentry.browserProfilingIntegration() + ] }); } @@ -85,8 +86,8 @@ createInertiaApp( preset : MyPreset, options: { darkModeSelector: ".my-app-dark" // dark mode of Primevue - // depends .my-add-dark in - // + // depends .my-add-dark in + // } } }). @@ -108,53 +109,55 @@ createInertiaApp( //https://github.com/getsentry/sentry-javascript/issues/11362 function inertiaRoutingInstrumentation( customStartTransaction, - startTransactionOnPageLoad = true, - startTransactionOnLocationChange = true, + startTransactionOnPageLoad = true, + startTransactionOnLocationChange = true ) { - console.info('inertiaRoutingInstrumentation Started'); + console.info("inertiaRoutingInstrumentation Started"); let activeTransaction; let name; if (startTransactionOnPageLoad) { - console.info('Start transaction on page load'); - name = '/'+route().current(); + console.info("Start transaction on page load"); + name = "/" + route().current(); activeTransaction = customStartTransaction({ name, - op: 'pageload', + op : "pageload", metadata: { - source: 'route', - }, + source: "route" + } }); } if (startTransactionOnLocationChange) { - console.info('Start transaction on location change'); - router.on('before', (_to, _from) => { + console.info("Start transaction on location change"); + + router.on("before", (_to, _from) => { if (activeTransaction) { activeTransaction.finish(); } - const newName = '/'+route().current(); - console.info('Old name: '+name+'. New name: '+newName) + const newName = "/" + route().current(); + console.info("Old name: " + name + ". New name: " + newName); if (newName !== name) { - console.info('Old name is not equal to new name!'); + console.info("Old name is not equal to new name!"); activeTransaction = customStartTransaction({ - name: newName, - op: 'navigation', + name : newName, + op : "navigation", metadata: { - source: 'route', - }, + source: "route" + } }); } }); - router.on('finish', () => { - console.info('Router on finish. Route: '+'/'+route().current()) - activeTransaction.setName('/'+route().current(), 'route'); + router.on("finish", () => { + console.info("Router on finish. Route: " + "/" + route().current()); + activeTransaction.setName("/" + route().current(), "route"); }); } - console.info('inertiaRoutingInstrumentation Finished'); + console.info("inertiaRoutingInstrumentation Finished"); } +