Change behavior by environment, and send api logging call.
This commit is contained in:
Chloe Herd
parent
bc0b2f6c6c
commit
487f380c1e
1 changed files with 108 additions and 29 deletions
|
|
@ -98,8 +98,51 @@ body {
|
||||||
}
|
}
|
||||||
return "";
|
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:
|
// =============== Check for session info:
|
||||||
const existingVuexDataJSON = window.localStorage.getItem('vuex');
|
const existingVuexDataJSON = window.localStorage.getItem('vuex');
|
||||||
const existingVuexData = existingVuexDataJSON ? JSON.parse(existingVuexDataJSON) : null;
|
const existingVuexData = existingVuexDataJSON ? JSON.parse(existingVuexDataJSON) : null;
|
||||||
|
|
@ -176,43 +219,79 @@ body {
|
||||||
} else if(existingBailoutInfo) {
|
} else if(existingBailoutInfo) {
|
||||||
// Proceed with prior data.
|
// Proceed with prior data.
|
||||||
bailoutInfo = existingBailoutInfo;
|
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 {
|
} else {
|
||||||
// If neither fresh nor prior data exists, remove diagnostic section.
|
|
||||||
const diagnosticContainer = document.getElementById('diagnostic-container');
|
const diagnosticContainer = document.getElementById('diagnostic-container');
|
||||||
diagnosticContainer.remove();
|
diagnosticContainer.remove();
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
const apiHostname = environmentInfo?.apiHostname;
|
||||||
// =============== Display diagnostic data:
|
if(apiHostname) {
|
||||||
// Create display nodes
|
try {
|
||||||
const elements = bailoutInfo.map(
|
const endpointUrl = `https://${apiHostname}/analytics/api/v1/logging/log-error`;
|
||||||
dataPoint => {
|
|
||||||
const element = document.createElement('li');
|
|
||||||
element.textContent = `${dataPoint.name}: ${dataPoint.value}`;
|
|
||||||
|
|
||||||
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(
|
const response = await fetch(request);
|
||||||
(element) => {
|
// Don't need data from response, but could get it here with:
|
||||||
fragment.append(element);
|
// const responseData = await response.json();
|
||||||
}
|
} catch(e) {
|
||||||
);
|
console.error(`=== ERROR SENDING LOGGING`);
|
||||||
|
console.error(e);
|
||||||
// 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);
|
|
||||||
}
|
}
|
||||||
} finally {
|
|
||||||
// =============== Clear User Data
|
|
||||||
// ======== To avoid reproducing the same issue due to invalid states.
|
|
||||||
window.localStorage.removeItem('vuex');
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue