Merge pull request #2421 from navikt/error-boundary

Error boundary for UxSignals

Author: bdahle

package-lock.json

@@ -80,6 +80,7 @@
         "pino-pretty": "12.1.0",
         "react": "19.1.0",
         "react-dom": "19.1.0",
+        "react-error-boundary": "6.0.0",
         "redis": "4.7.0"
     }
 }

package.json

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
 import { getCurrentConsent } from '@navikt/nav-dekoratoren-moduler';
+import { ErrorBoundary } from 'react-error-boundary';
+import { logger } from '@/shared/logger';
 import { EditorHelp } from 'components/_editor-only/editorHelp/EditorHelp';
 
 import style from './UxSignalsWidget.module.scss';
@@ -19,7 +21,7 @@ type Consent = {
 const uxSignalsScriptUrl = 'https://widget.uxsignals.com/embed.js';
 let scriptAddTimeout: ReturnType<typeof setTimeout>;
 
-export const UxSignalsWidget = ({ embedCode }: UxSignalsWidgetProps) => {
+const UxSignalsWidgetComponent = ({ embedCode }: UxSignalsWidgetProps) => {
     // If the cookie banner is visible, the user has not taken any action yet.
     // Wait and see if the user takes action before adding the script if consent is given..
     const checkConsentOrWait = (tries: number = 0) => {
@@ -73,3 +75,14 @@ export const UxSignalsWidget = ({ embedCode }: UxSignalsWidgetProps) => {
         </aside>
     );
 };
+
+export const UxSignalsWidget = ({ embedCode }: UxSignalsWidgetProps) => (
+    <ErrorBoundary
+        fallback={null}
+        onError={(error) => {
+            logger.info(`Failed to load UX Signals script - ${error}`);
+        }}
+    >
+        <UxSignalsWidgetComponent embedCode={embedCode} />
+    </ErrorBoundary>
+);