Skip to content

Commit

Permalink
MWPW-140523: Update existing LANA logs to capture potential client er…
Browse files Browse the repository at this point in the history 
…rors (#2402)

* Add missing LANA logs for import and fetch

* Added lana logs

* fix lint issues

* Fix review comments

* Fix eslint issues

* Fix Review comment

* Fix lint issue

* Fix review comments

* Update UT for the changes

* Fix lint
  • Loading branch information
@Deva309
Deva309 authored Jun 20, 2024
1 parent ce3764f commit 203c3e6
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 31 deletions.
15 changes: 8 additions & 7 deletions libs/blocks/global-footer/global-footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,7 @@ class Footer {
this.body = await fetchAndProcessPlainHtml({
url,
shouldDecorateLinks: false,
})
.catch((e) => lanaLog({
message: `Error fetching footer content ${url}`,
e,
tags: 'errorType=error,module=global-footer',
}));
});

if (!this.body) return;

Expand Down Expand Up @@ -153,7 +148,13 @@ class Footer {

loadIcons = async () => {
const file = await fetch(`${base}/blocks/global-footer/icons.svg`);

if (!file.ok) {
lanaLog({
message: 'Issue with loadIcons',
e: `${file.statusText} url: ${file.url}`,
tags: 'errorType=info,module=global-footer',
});
}
const content = await file.text();
const elem = toFragment`<div class="feds-footer-icons">${content}</div>`;
this.block.append(elem);
Expand Down
22 changes: 11 additions & 11 deletions libs/blocks/global-navigation/global-navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
loadIms,
decorateLinks,
loadScript,
loadStyle,
} from '../../utils/utils.js';
import {
closeAllDropdowns,
Expand All @@ -23,6 +22,7 @@ import {
loadBaseStyles,
loadBlock,
loadDecorateMenu,
rootPath,
loadStyles,
logErrorFor,
selectors,
Expand Down Expand Up @@ -409,14 +409,14 @@ class Gnav {
Search,
] = await Promise.all([
loadBlock('../features/search/gnav-search.js'),
loadStyles('features/search/gnav-search.css'),
loadStyles(rootPath('features/search/gnav-search.css')),
]);
this.Search = Search;

if (!this.useUniversalNav) {
const [ProfileDropdown] = await Promise.all([
loadBlock('../features/profile/dropdown.js'),
loadStyles('features/profile/dropdown.css'),
loadStyles(rootPath('features/profile/dropdown.css')),
]);
this.ProfileDropdown = ProfileDropdown;
}
Expand Down Expand Up @@ -465,6 +465,11 @@ class Gnav {
const profileData = await fetch(`https://${env.adobeIO}/profile`, { headers });

if (profileData.status !== 200) {
lanaLog({
message: 'GNAV: decorateProfile has failed to fetch profile data',
e: `${profileData.statusText} url: ${profileData.url}`,
tags: 'errorType=info,module=gnav',
});
return;
}

Expand Down Expand Up @@ -515,7 +520,7 @@ class Gnav {
const unavVersion = new URLSearchParams(window.location.search).get('unavVersion') || '1.1';
await Promise.all([
loadScript(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js`),
loadStyle(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.css`),
loadStyles(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.css`),
]);

const getChildren = () => {
Expand Down Expand Up @@ -638,7 +643,7 @@ class Gnav {
webappPrompt,
] = await Promise.all([
import('../../features/webapp-prompt/webapp-prompt.js'),
loadStyle(`${base}/features/webapp-prompt/webapp-prompt.css`),
loadStyles(`${base}/features/webapp-prompt/webapp-prompt.css`),
]);

webappPrompt.default({ promptPath, entName, parent: this.blocks.universalNav, getAnchorState });
Expand Down Expand Up @@ -1006,12 +1011,7 @@ export default async function init(block) {
try {
const { mep } = getConfig();
const url = await getSource();
const content = await fetchAndProcessPlainHtml({ url })
.catch((e) => lanaLog({
message: `Error fetching gnav content url: ${url}`,
e,
tags: 'errorType=error,module=gnav',
}));
const content = await fetchAndProcessPlainHtml({ url });
if (!content) return null;
const gnav = new Gnav({
content,
Expand Down
9 changes: 2 additions & 7 deletions libs/blocks/global-navigation/utilities/menu/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
getAnalyticsValue,
icons,
isDesktop,
lanaLog,
logErrorFor,
selectors,
setActiveDropdown,
Expand Down Expand Up @@ -308,12 +307,8 @@ const decorateMenu = (config) => logErrorFor(async () => {
const pathElement = config.item.querySelector('a');
if (!(pathElement instanceof HTMLElement)) return;

const content = await fetchAndProcessPlainHtml({ url: pathElement.href })
.catch((e) => lanaLog({
message: `Menu could not be fetched ${pathElement.href}`,
e,
tags: 'errorType=error,module=menu',
}));
const content = await fetchAndProcessPlainHtml({ url: pathElement.href });

if (!content) return;

const menuContent = toFragment`<div class="feds-menu-content">${content.innerHTML}</div>`;
Expand Down
38 changes: 32 additions & 6 deletions libs/blocks/global-navigation/utilities/utilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,18 +183,30 @@ export function getExperienceName() {
return '';
}

export function loadStyles(path) {
export function rootPath(path) {
const { miloLibs, codeRoot } = getConfig();
return new Promise((resolve) => {
loadStyle(`${miloLibs || codeRoot}/blocks/global-navigation/${path}`, resolve);
const url = `${miloLibs || codeRoot}/blocks/global-navigation/${path}`;
return url;
}

export function loadStyles(url) {
loadStyle(url, (e) => {
if (e === 'error') {
lanaLog({
message: 'GNAV: Error in loadStyles',
e: `error loading style: ${url}`,
tags: 'errorType=info,module=utilities',
});
}
});
}

// Base styles are shared between top navigation and footer,
// since they can be independent of each other.
// CSS imports were not used due to duplication of file include
export async function loadBaseStyles() {
await loadStyles('base.css');
const url = rootPath('base.css');
await loadStyles(url);
}

export function loadBlock(path) {
Expand All @@ -212,7 +224,7 @@ export async function loadDecorateMenu() {

const [{ decorateMenu, decorateLinkGroup }] = await Promise.all([
loadBlock('./menu/menu.js'),
loadStyles('utilities/menu/menu.css'),
loadStyles(rootPath('utilities/menu/menu.css')),
]);

resolve({
Expand Down Expand Up @@ -332,6 +344,13 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
path = mepFragment.target;
}
const res = await fetch(path.replace(/(\.html$|$)/, '.plain.html'));
if (res.status !== 200) {
lanaLog({
message: 'Error in fetchAndProcessPlainHtml',
e: `${res.statusText} url: ${res.url}`,
tags: 'errorType=info,module=utilities',
});
}
const text = await res.text();
const { body } = new DOMParser().parseFromString(text, 'text/html');
if (mepFragment?.manifestId) body.dataset.manifestId = mepFragment.manifestId;
Expand Down Expand Up @@ -360,7 +379,14 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
const blocks = body.querySelectorAll('.martech-metadata');
if (blocks.length) {
import('../../martech-metadata/martech-metadata.js')
.then(({ default: decorate }) => blocks.forEach((block) => decorate(block)));
.then(({ default: decorate }) => blocks.forEach((block) => decorate(block)))
.catch((e) => {
lanaLog({
message: 'Error in fetchAndProcessPlainHtml',
e,
tags: 'errorType=info,module=utilities',
});

Check warning on line 388 in libs/blocks/global-navigation/utilities/utilities.js

View check run for this annotation

Codecov / codecov/patch

libs/blocks/global-navigation/utilities/utilities.js#L384-L388 

Added lines #L384 - L388 were not covered by tests
});
}

body.innerHTML = await replaceText(body.innerHTML, getFedsPlaceholderConfig());
Expand Down
18 changes: 18 additions & 0 deletions test/blocks/global-footer/global-footer.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -403,5 +403,23 @@ describe('global footer', () => {
expect(window.lana.log.getCalls().find((c) => c.args[0].includes('Footer could not be instantiated')));
expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('errorType=error,module=global-footer')));
});

it('should send LANA log when icons.svg has some network issue', async () => {
window.fetch.restore();
stub(window, 'fetch').callsFake(async (url) => {
if (url.includes('/footer')) {
return mockRes({
payload: fetchedFooter(
{ regionPickerHash: '' },
),
});
}
if (url.includes('/placeholders')) return mockRes({ payload: placeholders });
if (url.includes('icons.svg')) return mockRes({ payload: null, ok: false, status: 400 });
return null;
});
await createFullGlobalFooter({ waitForDecoration: true });
expect(window.lana.log.getCalls().find((c) => c.args[0].includes('Issue with loadIcons')));
});
});
});
44 changes: 44 additions & 0 deletions test/blocks/global-navigation/global-navigation.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,21 @@ describe('global navigation', () => {
expect(window.lana.log.getCalls().find((c) => c.args[0].includes('IMS signIn method not available'))).to.exist;
window.adobeIMS = ogIms;
});

it('should send LANA log when profile call in decorateProfile fails', async () => {
const gnav = await createFullGlobalNavigation();
sinon.restore();
sinon.stub(window, 'fetch').callsFake((url) => {
if (url.includes('/profile')) return mockRes({ payload: null, ok: false, status: 400 });
return null;
});
window.adobeIMS = {
isSignedInUser: () => true,
getAccessToken: () => 'accessToken',
};
await gnav.decorateProfile();
expect(window.lana.log.getCalls().find((c) => c.args[0].includes('decorateProfile has failed to fetch profile data'))).to.exist;
});
});

describe('basic sanity tests', () => {
Expand Down Expand Up @@ -1452,4 +1467,33 @@ describe('global navigation', () => {
});
});
});

describe('decorateAppPrompt', () => {
it('should not load webapp prompt resources', async () => {
document.head.innerHTML = `<meta name="app-prompt" content="off" />
<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any" />
<script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
<script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
`;
const gnav = await createFullGlobalNavigation({});
gnav.decorateAppPrompt();
const weAppPrompt = document.head.querySelector('link[href$="/webapp-prompt.css"]');
expect(!!weAppPrompt).to.be.false;
});

it('should load webapp prompt resources', async () => {
document.head.innerHTML = `<meta name="app-prompt" content="on" />
<meta name="app-prompt-entitlement" content="firefly-web-usage" />
<meta name="app-prompt-path" content="https://dismiss-pep--milo--adobecom.hlx.page/drafts/raghavs/pep-prompt-content"/>
<link rel="icon" href="/libs/img/favicons/favicon.ico" size="any" />
<script src="https://auth.services.adobe.com/imslib/imslib.min.js" type="javascript/blocked" data-loaded="true"></script>
<script src="https://stage.adobeccstatic.com/unav/1.1/UniversalNav.js" type="javascript/blocked" data-loaded="true"></script>
`;
const gnav = await createFullGlobalNavigation({});
window.adobeIMS = { isSignedInUser: () => true };
gnav.decorateAppPrompt();
const weAppPrompt = document.head.querySelector('link[href$="/webapp-prompt.css"]');
expect(!!weAppPrompt).to.be.true;
});
});
});

0 comments on commit 203c3e6

Please sign in to comment.