Change behavior by environment, and send api logging call.

This commit is contained in:
Chloe Herd 2025-10-16 13:25:19 -04:00
parent bc0b2f6c6c
commit 487f380c1e

View file

@ -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>