From 487f380c1e4556da7e28fc15681d0c90bd8890a8 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 16 Oct 2025 13:25:19 -0400
Subject: [PATCH] Change behavior by environment, and send api logging call.

---
 public/static/error/index.html | 137 ++++++++++++++++++++++++++-------
 1 file changed, 108 insertions(+), 29 deletions(-)

diff --git a/public/static/error/index.html b/public/static/error/index.html
index 8ea99c6ed..451c6301e 100644
--- a/public/static/error/index.html
+++ b/public/static/error/index.html
@@ -98,8 +98,51 @@ body {
                 }
                 return "";
             }
+            
+            function getCurrentEnvironmentData() {
+                const environmentData = [
+                    {
+                        name: 'Localhost',
+                        hostName: 'localhost',
+                        apiHostname: 'digitalapi.dev.safelite.io',
+                        debug: true,
+                    },
+                    {
+                        name: 'Dev',
+                        hostName: 'www-dev2.safelite.com',
+                        apiHostname: 'digitalapi.dev.safelite.io',
+                        debug: true,
+                    },
+                    {
+                        name: 'Test',
+                        hostName: 'www-test2.safelite.com',
+                        apiHostname: 'digitalapi.test.safelite.io',
+                        debug: true,
+                    },
+                    {
+                        name: 'QA',
+                        hostName: 'www-qa2.safelite.com',
+                        apiHostname: 'digitalapi.qa.safelite.io',
+                        debug: false,
+                    },
+                    {
+                        name: 'Prod',
+                        hostName: 'www.safelite.com',
+                        apiHostname: 'digitalapi.safelite.io',
+                        debug: false,
+                    },
+                ];
 
-            window.onload = () => {
+                const hostName = window.location.hostname;
+
+                const match = environmentData.find(
+                    data => (data.hostName === hostName)
+                );
+
+                return match;
+            }
+
+            window.onload = async () => {
                 // =============== Check for session info:
                 const existingVuexDataJSON = window.localStorage.getItem('vuex');
                 const existingVuexData = existingVuexDataJSON ? JSON.parse(existingVuexDataJSON) : null;
@@ -176,43 +219,79 @@ body {
                 } else if(existingBailoutInfo) {
                     // Proceed with prior data.
                     bailoutInfo = existingBailoutInfo;
+                }
+                
+                const environmentInfo = getCurrentEnvironmentData();
+                const shouldShowDebugInfo = environmentInfo?.debug;
+
+                if(bailoutInfo && shouldShowDebugInfo) {
+                    try {
+                        // =============== Display diagnostic data:
+                        // Create display nodes
+                        const elements = bailoutInfo.map(
+                            dataPoint => {
+                                const element = document.createElement('li');
+                                element.textContent = `${dataPoint.name}: ${dataPoint.value}`;
+
+                                return element;
+                            }
+                        );
+
+                        const fragment = new DocumentFragment();
+
+                        elements.forEach(
+                            (element) => {
+                                fragment.append(element);
+                            }
+                        );
+
+                        // Attach nodes to DOM and render
+                        const attachNode = document.getElementById('bailout-info-container');
+                        if(attachNode) {
+                            const ul = attachNode.appendChild(document.createElement('ul'));
+                            ul.append(fragment);
+                        }
+                    } catch(e) {
+                        console.error(`=== ERROR DISPLAYING INFO`);
+                        console.error(e);
+
+                        const diagnosticContainer = document.getElementById('diagnostic-container');
+                        diagnosticContainer.remove();
+                    }
                 } else {
-                    // If neither fresh nor prior data exists, remove diagnostic section.
                     const diagnosticContainer = document.getElementById('diagnostic-container');
                     diagnosticContainer.remove();
-                    return;
                 }
 
-                try {
-                    // =============== Display diagnostic data:
-                    // Create display nodes
-                    const elements = bailoutInfo.map(
-                        dataPoint => {
-                            const element = document.createElement('li');
-                            element.textContent = `${dataPoint.name}: ${dataPoint.value}`;
+                const apiHostname = environmentInfo?.apiHostname;
+                if(apiHostname) {
+                    try {
+                        const endpointUrl = `https://${apiHostname}/analytics/api/v1/logging/log-error`;
 
-                            return element;
-                        }
-                    );
+                        const infoString = bailoutInfo.map(
+                            (entry) => `${entry.name}: ${entry.value}`
+                        ).reduce(
+                            (prev, next) => `${prev}\n${next}`
+                        );
+                        const entryString = `User encountered bailout page.\n${new Date()}\n${infoString}`;
 
-                    const fragment = new DocumentFragment();
+                        const request = new Request(endpointUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify({
+                                entry: entryString,
+                            }),
+                        });
 
-                    elements.forEach(
-                        (element) => {
-                            fragment.append(element);
-                        }
-                    );
-
-                    // Attach nodes to DOM and render
-                    const attachNode = document.getElementById('bailout-info-container');
-                    if(attachNode) {
-                        const ul = attachNode.appendChild(document.createElement('ul'));
-                        ul.append(fragment);
+                        const response = await fetch(request);
+                        // Don't need data from response, but could get it here with:
+                        // const responseData = await response.json();
+                    } catch(e) {
+                        console.error(`=== ERROR SENDING LOGGING`);
+                        console.error(e);
                     }
-                } finally {
-                    // =============== Clear User Data
-                    // ======== To avoid reproducing the same issue due to invalid states.
-                    window.localStorage.removeItem('vuex');
                 }
             };
         </script>