Add support for sentry 'extra' contexts to reportError (#13654)

* Add support for sentry contexts to reportError

* use 'extra' context field

* use setExtras

* consistent naming in sentryLoader for stub

* add extras to queue of errors

Author: Jakeii

dotcom-rendering/src/client/sentryLoader/loadSentry.ts

@@ -6,11 +6,13 @@ import type { ReportError } from '../../types/sentry';
 type ReportErrorError = Parameters<ReportError>[0];
 type ReportErrorFeature = Parameters<ReportError>[1];
 type ReportErrorTags = Parameters<ReportError>[2];
+type ReportErrorExtras = Parameters<ReportError>[3];
 
 type ErrorQueue = Array<{
 	error: ReportErrorError;
 	feature: ReportErrorFeature;
 	tags?: ReportErrorTags;
+	extras?: ReportErrorExtras;
 }>;
 
 const loadSentryCreator = () => {
@@ -29,6 +31,7 @@ const loadSentryCreator = () => {
 		error: ReportErrorError | undefined,
 		feature: ReportErrorFeature = 'unknown',
 		tags?: ReportErrorTags,
+		extras?: ReportErrorExtras,
 	) => {
 		const { endPerformanceMeasure } = startPerformanceMeasure(
 			'dotcom',
@@ -38,7 +41,7 @@ const loadSentryCreator = () => {
 		/**
 		 * Queue this error for later
 		 */
-		if (error) errorQueue.push({ error, feature, tags });
+		if (error) errorQueue.push({ error, feature, tags, extras });
 
 		/**
 		 * Only initialise once
@@ -87,6 +90,7 @@ const loadSentryCreator = () => {
 					queuedError.error,
 					queuedError.feature,
 					queuedError.tags,
+					queuedError.extras,
 				);
 			}
 		}
@@ -117,8 +121,13 @@ const loadSentryOnError = (): void => {
 		window.onunhandledrejection = (
 			event: undefined | { reason?: unknown },
 		) => event?.reason instanceof Error && loadSentry(event.reason);
-		window.guardian.modules.sentry.reportError = (error, feature, tags) => {
-			loadSentry(error, feature, tags).catch((e) =>
+		window.guardian.modules.sentry.reportError = (
+			error,
+			feature,
+			tags,
+			extras,
+		) => {
+			loadSentry(error, feature, tags, extras).catch((e) =>
 				// eslint-disable-next-line no-console -- fallback to console.error
 				console.error(`loadSentryOnError error: ${String(e)}`),
 			);

dotcom-rendering/src/client/sentryLoader/sentry.ts

@@ -56,14 +56,19 @@ if (
 	Sentry.setTag('dcr.bundle', dcrJavascriptBundle('Variant'));
 }
 
-export const reportError: ReportError = (error, feature, tags) => {
+export const reportError: ReportError = (error, feature, tags, extras) => {
 	Sentry.withScope(() => {
 		Sentry.setTag('feature', feature);
 		if (tags) {
 			for (const [key, value] of Object.entries(tags)) {
 				Sentry.setTag(key, value);
 			}
 		}
+
+		if (extras) {
+			Sentry.setExtras(extras);
+		}
+
 		Sentry.captureException(error);
 	});
 };

dotcom-rendering/src/client/sentryLoader/sentryLoader.ts

@@ -34,9 +34,14 @@ const isSentryEnabled = ({
 
 /** When stubbed errors are only sent to the console */
 const stubSentry = (): void => {
-	window.guardian.modules.sentry.reportError = (error, feature, tags) => {
+	window.guardian.modules.sentry.reportError = (
+		error,
+		feature,
+		tags,
+		extras,
+	) => {
 		// eslint-disable-next-line no-console -- fallback to console.error
-		console.error(error, feature, tags);
+		console.error(error, feature, tags, extras);
 	};
 };
 

dotcom-rendering/src/types/sentry.ts

@@ -1,7 +1,6 @@
 export type ReportError = (
 	error: Error,
 	feature: string,
-	tags?: {
-		[key: string]: string;
-	},
+	tags?: Record<string, string>,
+	extras?: Record<string, unknown>,
 ) => void;