Change behavior by environment, and send api logging call.
This commit is contained in:
parent
bc0b2f6c6c
commit
487f380c1e
1 changed files with 108 additions and 29 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue