From c424e25d57712984248350afebd719052b26fa99 Mon Sep 17 00:00:00 2001 From: Marijn Doeve Date: Sun, 5 Jul 2026 21:46:07 +0200 Subject: [PATCH] feat: add Sentry User Feedback widget to backoffice (#178) Install @sentry/browser via AssetMapper and initialize the feedback integration on all backoffice pages. The CDN loader script is moved to an overridable block so backoffice pages use the npm SDK without double-initialising Sentry. Sentry is initialised only when a DSN is configured (SENTRY_DSN env var). When a user is logged in their email is pre-filled in the feedback form via Sentry.setUser(); both name and email remain optional so anonymous submissions are supported by simply leaving those fields empty. --- assets/backoffice.js | 23 +++++++++++++++++++++++ config/packages/twig.yaml | 2 ++ importmap.php | 7 +++++++ templates/backoffice/base.html.twig | 5 +++++ templates/base.html.twig | 3 +++ 5 files changed, 40 insertions(+) diff --git a/assets/backoffice.js b/assets/backoffice.js index 7758b59..6aa04ac 100644 --- a/assets/backoffice.js +++ b/assets/backoffice.js @@ -3,3 +3,26 @@ import 'bootstrap-icons/font/bootstrap-icons.min.css'; import './styles/backoffice.scss'; import './stimulus.js'; import './bootstrap.js'; +import * as Sentry from '@sentry/browser'; + +const dsn = document.querySelector('meta[name="sentry-dsn"]')?.content ?? ''; +const userEmail = document.querySelector('meta[name="user-email"]')?.content ?? ''; + +if (dsn) { + Sentry.init({ + dsn, + integrations: [ + Sentry.feedbackIntegration({ + colorScheme: 'system', + showName: true, + showEmail: true, + isNameRequired: false, + isEmailRequired: false, + }), + ], + }); + + if (userEmail) { + Sentry.setUser({ email: userEmail }); + } +} diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml index eb82507..9ce76ab 100644 --- a/config/packages/twig.yaml +++ b/config/packages/twig.yaml @@ -1,6 +1,8 @@ twig: file_name_pattern: '*.twig' form_themes: [ 'bootstrap_5_layout.html.twig' ] + globals: + sentry_dsn: '%env(SENTRY_DSN)%' when@test: twig: diff --git a/importmap.php b/importmap.php index 10bb9c9..596aa37 100644 --- a/importmap.php +++ b/importmap.php @@ -34,4 +34,11 @@ return [ '@hotwired/stimulus' => ['version' => '3.2.2'], '@hotwired/turbo' => ['version' => '8.0.23'], 'bootstrap-icons/font/bootstrap-icons.min.css' => ['version' => '1.13.1', 'type' => 'css'], + '@sentry/browser' => ['version' => '10.63.0'], + '@sentry/feedback' => ['version' => '10.63.0'], + '@sentry/core/browser' => ['version' => '10.63.0'], + '@sentry/browser-utils' => ['version' => '10.63.0'], + '@sentry/replay' => ['version' => '10.63.0'], + '@sentry/replay-canvas' => ['version' => '10.63.0'], + '@sentry/core' => ['version' => '10.63.0'], ]; diff --git a/templates/backoffice/base.html.twig b/templates/backoffice/base.html.twig index 5aeeaa2..ea75932 100644 --- a/templates/backoffice/base.html.twig +++ b/templates/backoffice/base.html.twig @@ -1,5 +1,10 @@ {% extends 'base.html.twig' %} {% block importmap %}{{ importmap('backoffice') }}{% endblock %} +{% block sentry_loader %}{% endblock %} +{% block head_extra %} + + +{% endblock %} {% block title %}Tijd voor de test | {% endblock %} {% block nav %}{{ include('backoffice/nav.html.twig') }}{% endblock %} diff --git a/templates/base.html.twig b/templates/base.html.twig index 33f4c8d..cbb04d9 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -3,14 +3,17 @@ + {% block sentry_loader %} + {% endblock %} {% block title %}Tijd voor de test{% endblock title %} {% block importmap %}{% endblock %} + {% block head_extra %}{% endblock %} {% block nav %}