diff --git a/package-lock.json b/package-lock.json index 23bcfa7..bd323ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "portfolio", - "version": "1.10", + "version": "1.11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "portfolio", - "version": "1.10", + "version": "1.11", "dependencies": { "@angular/animations": "^16.2.4", "@angular/common": "^16.2.4", diff --git a/package.json b/package.json index 8d1d62a..1ccc125 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "portfolio", - "version": "1.10", + "version": "1.11", "scripts": { "ng": "ng", "start": "ng serve", diff --git a/src/app/modules/shared/components/color-theme-toggler/color-theme-toggler.component.html b/src/app/modules/shared/components/color-theme-toggler/color-theme-toggler.component.html index 0d07004..df071f9 100644 --- a/src/app/modules/shared/components/color-theme-toggler/color-theme-toggler.component.html +++ b/src/app/modules/shared/components/color-theme-toggler/color-theme-toggler.component.html @@ -1,12 +1,12 @@ - + diff --git a/src/app/modules/shared/components/footer/footer.component.html b/src/app/modules/shared/components/footer/footer.component.html index bd2e9ae..4010aea 100644 --- a/src/app/modules/shared/components/footer/footer.component.html +++ b/src/app/modules/shared/components/footer/footer.component.html @@ -9,25 +9,25 @@
You are currently viewing the development build, which may be + >You are currently viewing the development build, which may be unfinished or buggy.
-
+
This portfolio is a work in progress. Come back later to see what + >This portfolio is a work in progress. Come back later to see what changes!
@@ -37,21 +37,19 @@
-
+
- - +
diff --git a/src/app/modules/shared/components/header/header.component.html b/src/app/modules/shared/components/header/header.component.html index 88c01a7..d983a81 100644 --- a/src/app/modules/shared/components/header/header.component.html +++ b/src/app/modules/shared/components/header/header.component.html @@ -1,5 +1,5 @@ - + - + diff --git a/src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.html b/src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.html deleted file mode 100644 index a0c33b0..0000000 --- a/src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.html +++ /dev/null @@ -1,29 +0,0 @@ - -
-
- - -
- {{optStateMessage}} -
- - - - - - diff --git a/src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.spec.ts b/src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.spec.ts deleted file mode 100644 index 201345e..0000000 --- a/src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MatomoOptOutComponent } from './matomo-opt-out.component'; - -describe('MatomoOptOutComponent', () => { - let component: MatomoOptOutComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ MatomoOptOutComponent ], - }) - .compileComponents(); - - fixture = TestBed.createComponent(MatomoOptOutComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.ts b/src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.ts deleted file mode 100644 index 07103a6..0000000 --- a/src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ToastService } from 'src/app/services/toast.service'; -import { CookiesService } from '../../../../services/cookies.service'; -import moment from 'moment'; - -type TOnOff = 'on' | 'off'; - -interface IOptOutState { - label: string; - value: TOnOff; -} - -@Component({ - selector: 'jm-matomo-opt-out', - templateUrl: './matomo-opt-out.component.html', - styleUrls: ['./matomo-opt-out.component.scss'], -}) -export class MatomoOptOutComponent implements OnInit { - popupOpen = false; - - loading = false; - - optedOut = false; - - private _on: IOptOutState = { label: 'Enabled', value: 'on' }; - - selected: IOptOutState = this._on; - - private _off: IOptOutState = { label: 'Disabled', value: 'off' }; - - stateOptions: IOptOutState[] = [this._on, this._off]; - - constructor( - private _tsts: ToastService, - private _cks: CookiesService, - ) {} - - get optStateMessage(): string { - if (this.optedOut) { - return 'You are currently opted out of usage metrics tracking. I will not receive or store any of your usage data.'; - } - return 'You are currently sharing usage data with me. I will use this data to make this site more intuitive and featured!'; - } - - handleChange(state: TOnOff) { - if (state === 'off') { - this._cks.trackerOptOut = moment(moment.now()); - } else { - this._cks.trackerOptOut = null; - } - - this.refreshState(); - } - - ngOnInit(): void { - this.refreshState(); - } - - private async refreshState() { - try { - this.loading = true; - this.optedOut = this._cks.isUserOptedOutOfTracking(); - this.selected = this.optedOut ? this._off : this._on; - } catch (err: any) { - console.error(err); - this._tsts.error({ detail: err.message }); - } finally { - this.loading = false; - } - } -} diff --git a/src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.html b/src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.html new file mode 100644 index 0000000..9fa9328 --- /dev/null +++ b/src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.html @@ -0,0 +1,32 @@ + +
+
+ + +
+ +
+ + + + + + diff --git a/src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.scss b/src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.scss similarity index 72% rename from src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.scss rename to src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.scss index ef0af67..36efc3e 100644 --- a/src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.scss +++ b/src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.scss @@ -1,18 +1,16 @@ -::ng-deep .opt-out-container { +::ng-deep .opt-in-container { width: 100%; display: flex; flex-flow: column nowrap; - .opt-state-message {} - - @media screen and (min-width:601px) { + @media screen and (min-width: 601px) { .opt-btn-row { flex-flow: row nowrap; } } - @media screen and (max-width:600px) { + @media screen and (max-width: 600px) { .opt-btn-row { flex-flow: column nowrap; } @@ -26,5 +24,4 @@ align-items: center; width: 100%; } - } diff --git a/src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.spec.ts b/src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.spec.ts new file mode 100644 index 0000000..ad63f9e --- /dev/null +++ b/src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TrackingOptInComponent } from './tracking-opt-in.component'; + +describe('TrackingOptInComponent', () => { + let component: TrackingOptInComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TrackingOptInComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(TrackingOptInComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.ts b/src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.ts new file mode 100644 index 0000000..643ac86 --- /dev/null +++ b/src/app/modules/shared/components/tracking-opt-in/tracking-opt-in.component.ts @@ -0,0 +1,77 @@ +import { Component, OnInit } from '@angular/core'; +import { ToastService } from 'src/app/services/toast.service'; +import moment from 'moment'; +import { TrackingService } from '../../../../services/tracking.service'; + +type TOnOff = 'on' | 'off'; + +interface IOptInState { + label: string; + value: TOnOff; + message: string; +} + +@Component({ + selector: 'jm-tracking-opt-in', + templateUrl: './tracking-opt-in.component.html', + styleUrls: ['./tracking-opt-in.component.scss'], +}) +export class TrackingOptInComponent implements OnInit { + popupOpen = false; + + loading = false; + + optedIn = false; + + private _on: IOptInState = { + label: 'Enabled', + value: 'on', + message: + 'You are currently sharing usage data with me. I will use this data to make this site more intuitive and featured.
You may turn this off at any time in this dialogue menu.', + }; + + private _off: IOptInState = { + label: 'Disabled', + value: 'off', + message: + 'You are currently opted out of usage metrics tracking. I will not receive or store any of your usage data.', + }; + + selected: IOptInState = this._off; + + stateOptions: IOptInState[] = [this._on, this._off]; + + constructor( + private _tsts: ToastService, + private _trks: TrackingService, + ) {} + + handleChange(state: TOnOff) { + if (state === 'off') { + this._trks.trackerOptInDate = moment(moment.now()); + } else { + this._trks.trackerOptInDate = null; + } + + this._trks.trackerOptInDate = state === 'on' ? moment(moment.now()) : null; + + this.refreshState(); + } + + ngOnInit(): void { + this.refreshState(); + } + + private refreshState() { + try { + this.loading = true; + this.optedIn = this._trks.isUserOptedIntoTracking(); + this.selected = this.optedIn ? this._on : this._off; + } catch (err: any) { + console.error(err); + this._tsts.error({ detail: err.message }); + } finally { + this.loading = false; + } + } +} diff --git a/src/app/modules/shared/shared.module.ts b/src/app/modules/shared/shared.module.ts index e9697e2..53cb4c1 100644 --- a/src/app/modules/shared/shared.module.ts +++ b/src/app/modules/shared/shared.module.ts @@ -15,7 +15,7 @@ import { TooltipModule } from 'primeng/tooltip'; import { FooterComponent } from './components/footer/footer.component'; import { SocialIconsComponent } from './components/social-icons/social-icons.component'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; -import { MatomoOptOutComponent } from './components/matomo-opt-out/matomo-opt-out.component'; +import { TrackingOptInComponent } from './components/tracking-opt-in/tracking-opt-in.component'; import { SelectButtonModule } from 'primeng/selectbutton'; import { AttributionComponent } from './components/attribution/attribution.component'; import { TableModule } from 'primeng/table'; @@ -23,6 +23,7 @@ import { MaintenanceMessageComponent } from './components/maintenance-message/ma import { HumanizedDurationPipe } from './pipes/moment/humanized-duration.pipe'; import { MomentToDatePipe } from './pipes/moment/date-conversion.pipe'; import { PluralPipe } from './pipes/plural.pipe'; + @NgModule({ declarations: [ LoadingSpinnerComponent, @@ -32,7 +33,7 @@ import { PluralPipe } from './pipes/plural.pipe'; FooterComponent, SocialIconsComponent, PageNotFoundComponent, - MatomoOptOutComponent, + TrackingOptInComponent, AttributionComponent, MaintenanceMessageComponent, HumanizedDurationPipe, @@ -58,7 +59,7 @@ import { PluralPipe } from './pipes/plural.pipe'; CommonModule, FormsModule, ReactiveFormsModule, - MatomoOptOutComponent, + TrackingOptInComponent, ToastModule, TooltipModule, LoadingSpinnerComponent, diff --git a/src/app/services/browser-storage.service.ts b/src/app/services/browser-storage.service.ts new file mode 100644 index 0000000..2a6367d --- /dev/null +++ b/src/app/services/browser-storage.service.ts @@ -0,0 +1,102 @@ +import { Injectable } from '@angular/core'; +import Cookies, { CookieAttributes } from 'js-cookie'; +import { environment } from '../../environments/environment'; + +type StorageKey = 'USER_METRICS_OPTED_IN_AT' | 'COLOR_THEME'; + +const enum StorageDisposition { + LOCALSTORAGE, + COOKIE, +} + +type StorageDispositionMap = { + [k in StorageKey]: StorageDisposition; +}; + +@Injectable({ providedIn: 'root' }) +export class BrowserStorageService { + private readonly _STORAGE_DISPOSITIONS: StorageDispositionMap = { + USER_METRICS_OPTED_IN_AT: StorageDisposition.LOCALSTORAGE, + COLOR_THEME: StorageDisposition.LOCALSTORAGE, + }; + + private readonly _KEY_PREFIX = 'JMUZINA'.trim(); + + private readonly _KEY_PREFIX_LOWER = this._KEY_PREFIX.toLowerCase(); + + private readonly _COOKIKE_ATTRIBUTES: CookieAttributes = { + secure: !environment.local, + sameSite: 'strict', + }; + + get(key: StorageKey): string | null { + if (!this.validKey(key)) return null; + + const translatedKey = this.transformKeyToPrefixForm(key); + + const rawVal: string | undefined | null = this.usesLocalStorage(key) ? localStorage.getItem(translatedKey) : Cookies.get(translatedKey); + + if (!rawVal?.length) return null; + + return rawVal; + } + + set(key: StorageKey, value: string | undefined | null): void { + if (!this.validKey(key) || !this.validKeyValue(value)) + return this.remove(key); + + + if (typeof value === 'string') { + const translatedKey = this.transformKeyToPrefixForm(key); + if (this.usesLocalStorage(key)) { + localStorage.setItem(translatedKey, value); + } else { + Cookies.set(translatedKey, value, this._COOKIKE_ATTRIBUTES); + } + } + } + + remove(key: StorageKey): void { + if (!key?.length) return; + const translatedKey = this.transformKeyToPrefixForm(key); + // Unexpected key given, remove it from all browser storage sites + if (!this.validKey(key)) { + localStorage.removeItem(key); + localStorage.removeItem(translatedKey); + Cookies.remove(key); + Cookies.remove(translatedKey, this._COOKIKE_ATTRIBUTES); + } else { + if (this.usesLocalStorage(key)) localStorage.removeItem(translatedKey); + else Cookies.remove(translatedKey); + } + } + + private usesLocalStorage(key: StorageKey) { + return this._STORAGE_DISPOSITIONS[key] === StorageDisposition.LOCALSTORAGE; + } + + private validKeyValue(value: string | undefined | null): boolean { + return !!value?.length && !value.toLowerCase()?.trim().includes(this._KEY_PREFIX.toLowerCase()?.trim()); + } + + private validKey(key: string): boolean { + return this.validKeyValue(key) && key in this._STORAGE_DISPOSITIONS; + } + + private transformKeyToPrefixForm(key: string): string { + return [this._KEY_PREFIX, key].join('_'); + } + + /** + * Removes the key prefix from a localstorage key name + * @param key Key to remove the prefix from + * @returns `key` with `_KEY_PREFIX` removed from it + * @private + */ + private transformKeyFromPrefixedForm(key: string): string { + return key + .split('_') + .filter(token => token?.trim()?.toLowerCase() !== this._KEY_PREFIX_LOWER) + .join(''); + } +} diff --git a/src/app/services/cookies.service.ts b/src/app/services/cookies.service.ts deleted file mode 100644 index afec2ed..0000000 --- a/src/app/services/cookies.service.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { Injectable } from '@angular/core'; -import Cookies from 'js-cookie'; -import moment from 'moment'; -import { environment } from '../../environments/environment'; - -export type StorageKey = 'JMUZINA_USER_METRICS_DISABLED_AT'; - -@Injectable({ providedIn: 'root' }) -export class CookiesService { - readonly STORAGE_KEY_AND_TYPE: { [k in StorageKey]: boolean } = { - JMUZINA_USER_METRICS_DISABLED_AT: true, - }; - - get trackerOptOut(): moment.Moment | undefined { - const cookieVal = this.get('JMUZINA_USER_METRICS_DISABLED_AT', true); - if (!cookieVal?.length) return; - - const optOutDate = moment(cookieVal); - if (!optOutDate.isValid()) return; - - return optOutDate; - } - - set trackerOptOut(date: moment.Moment | undefined | null) { - this.set('JMUZINA_USER_METRICS_DISABLED_AT', date?.toISOString(), true); - window.location.reload(); - } - - isUserOptedOutOfTracking(): boolean { - const optOutDate = this.trackerOptOut; - if (!optOutDate) return false; - return ( - optOutDate.isValid() && optOutDate.unix() <= moment(moment.now()).unix() - ); - } - - get(key: StorageKey, useLocalStorage = false): string | undefined | null { - if (!this.validKey(key)) return; - - if (useLocalStorage) return localStorage.getItem(key); - - return Cookies.get(key); - } - - set( - key: StorageKey, - value: string | undefined | null, - useLocalStorage = false, - ): void { - if (!this.validKey(key) || !this.validKeyValue(value)) - return this.remove(key, useLocalStorage); - - if (typeof value === 'string') { - if (useLocalStorage) { - localStorage.setItem(key, value); - } else { - Cookies.set(key, value, { - secure: !environment.local, - sameSite: 'strict', - }); - } - } - } - - remove(key: StorageKey, useLocalStorage = false): void { - if (!key) return; - if (useLocalStorage) localStorage.removeItem(key); - else Cookies.remove(key); - } - - private validKeyValue(value: string | undefined | null): boolean { - return !!value?.length; - } - - private validKey(key: string): boolean { - return this.validKeyValue(key) && key in this.STORAGE_KEY_AND_TYPE; - } -} diff --git a/src/app/services/theme.service.ts b/src/app/services/theme.service.ts index 33bafd2..732a0bd 100644 --- a/src/app/services/theme.service.ts +++ b/src/app/services/theme.service.ts @@ -2,8 +2,7 @@ import { Inject, Injectable } from '@angular/core'; import { DOCUMENT } from '@angular/common'; import { GenericService } from './generic.service'; import { IColorTheme } from '../interfaces/ColorTheme'; - -const COLOR_THEME_COOKIE_KEY = 'jmuzina-portfolio-color-theme'; +import { BrowserStorageService } from './browser-storage.service'; @Injectable({ providedIn: 'root', @@ -23,6 +22,13 @@ export class ThemeService extends GenericService { icon: 'pi pi-moon', }; + constructor( + @Inject(DOCUMENT) private document: Document, + private _bss: BrowserStorageService, + ) { + super(); + } + get themes(): IColorTheme[] { return [this.lightTheme, this.darkTheme]; } @@ -45,14 +51,10 @@ export class ThemeService extends GenericService { supportingLink.href = `${theme.supportingCode}.css`; - localStorage.setItem(COLOR_THEME_COOKIE_KEY, theme.code); + this._bss.set('COLOR_THEME', theme.code); this._activeTheme = theme; } - private themeLink(id = 'app-theme-secondary'): HTMLLinkElement { - return this.document.getElementById(id) as HTMLLinkElement; - } - get darkMode(): boolean { return this._activeTheme && this._activeTheme.code === this.darkTheme.code; } @@ -65,13 +67,22 @@ export class ThemeService extends GenericService { else this.activeTheme = this.darkTheme; } + override initialize(): Promise { + this.loadInitialColorTheme(); + return super.initialize(); + } + + private themeLink(id = 'app-theme-secondary'): HTMLLinkElement { + return this.document.getElementById(id) as HTMLLinkElement; + } + private loadInitialColorTheme(): void { if (this._activeTheme) throw new Error( 'Cannot load color theme from cookie after it has already been loaded.', ); - const cookieVal = localStorage.getItem(COLOR_THEME_COOKIE_KEY); + const cookieVal = this._bss.get('COLOR_THEME'); const themeToSet: IColorTheme = this.themes.find((theme: IColorTheme) => theme.code === cookieVal) || @@ -81,13 +92,4 @@ export class ThemeService extends GenericService { this.activeTheme = themeToSet; } - - override initialize(): Promise { - this.loadInitialColorTheme(); - return super.initialize(); - } - - constructor(@Inject(DOCUMENT) private document: Document) { - super(); - } } diff --git a/src/app/services/tracking.service.ts b/src/app/services/tracking.service.ts new file mode 100644 index 0000000..8bc0d7c --- /dev/null +++ b/src/app/services/tracking.service.ts @@ -0,0 +1,30 @@ +import { Injectable } from '@angular/core'; +import moment from 'moment/moment'; +import { BrowserStorageService } from './browser-storage.service'; + +@Injectable({ providedIn: 'root' }) +export class TrackingService { + constructor(private _bss: BrowserStorageService) {} + + get trackerOptInDate(): moment.Moment | undefined { + const cookieVal = this._bss.get('USER_METRICS_OPTED_IN_AT'); + + const optInDate = moment(cookieVal); + if (!optInDate.isValid()) return; + + return optInDate; + } + + set trackerOptInDate(date: moment.Moment | undefined | null) { + this._bss.set('USER_METRICS_OPTED_IN_AT', date?.toISOString()); + window.location.reload(); + } + + isUserOptedIntoTracking(): boolean { + const optInDate = this.trackerOptInDate; + if (!optInDate) return false; + return ( + optInDate.isValid() && optInDate.unix() <= moment(moment.now()).unix() + ); + } +} diff --git a/src/environments/environment.production.ts b/src/environments/environment.production.ts index 4261337..27cdc5a 100644 --- a/src/environments/environment.production.ts +++ b/src/environments/environment.production.ts @@ -3,7 +3,6 @@ export const environment = { development: false, local: false, appTitle: 'Julie Muzina', - matomoSiteID: '1', ignoreMaintenance: false, appUrl: 'https://jmuzina.io', graphQLEndpoint: 'https://api.jmuzina.io/v1/graphql', diff --git a/src/environments/environment.ts b/src/environments/environment.ts index dda13fb..a42320f 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -3,7 +3,6 @@ export const environment = { development: true, local: true, appTitle: 'Julie Muzina (LOCAL DEV)', - matomoSiteID: null, ignoreMaintenance: true, appUrl: 'http://localhost:4200', graphQLEndpoint: 'http://localhost:8080/v1/graphql', diff --git a/src/main.ts b/src/main.ts index 17d9945..013b3cc 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,29 +4,30 @@ import * as Sentry from '@sentry/angular-ivy'; import { environment } from './environments/environment'; import { enableProdMode } from '@angular/core'; -const matomoOptOutCookie = localStorage.getItem( - 'JMUZINA_USER_METRICS_DISABLED_AT', +// Unfortunately this has to be run before Angular has started, so we can't inject the BrowserStorageService. +const trackingOptInDateRaw = localStorage.getItem( + 'JMUZINA_USER_METRICS_OPTED_IN_AT', ); -const mtmConsentRemoved = - matomoOptOutCookie && typeof matomoOptOutCookie == 'string' - ? new Date(matomoOptOutCookie) +const consentGrantedAt = + trackingOptInDateRaw && typeof trackingOptInDateRaw == 'string' + ? new Date(trackingOptInDateRaw) : undefined; -const dataTrackingRevoked = - mtmConsentRemoved && mtmConsentRemoved.getTime() <= new Date().getTime(); -const trackDetailedSentryData = !dataTrackingRevoked; + +const dataTrackingConsented = + consentGrantedAt && consentGrantedAt.getTime() <= new Date().getTime(); const sentryOpts: Sentry.BrowserOptions = { dsn: 'https://54337f937505bc23282de73adeb7d72f@o4505848151212032.ingest.sentry.io/4505848152719360', environment: environment.production ? 'Production' : 'Development', enabled: true, - enableTracing: trackDetailedSentryData, + enableTracing: dataTrackingConsented, integrations: [ new Sentry.BrowserTracing({ tracePropagationTargets: ['localhost', /^https:\/\/(dev.)?jmuzina\.io\//], routingInstrumentation: Sentry.routingInstrumentation, }), ], - autoSessionTracking: trackDetailedSentryData, + autoSessionTracking: dataTrackingConsented, // Performance Monitoring tracesSampleRate: 1.0 * (environment.development || environment.local ? 0.5 : 1), // Capture 100% of the transactions, reduce in production! @@ -36,16 +37,19 @@ const sentryOpts: Sentry.BrowserOptions = { replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. }; -if (!trackDetailedSentryData) { +if (!dataTrackingConsented) { sentryOpts.tracesSampleRate = 0; sentryOpts.replaysSessionSampleRate = 0; sentryOpts.replaysOnErrorSampleRate = 0; sentryOpts.profilesSampleRate = 0; console.info( - 'User has opted out of data collection. Sentry replays are disabled.', + 'User not opted into data collection. Sentry replays are disabled.', ); } else { (sentryOpts.integrations as any[]).push(new Sentry.Replay()); + console.info( + `User opted into data collection at ${consentGrantedAt?.toISOString()}. Sentry replays are enabled.`, + ); } if (environment.production) enableProdMode();