From 448d8f3430778f8b45e6b1da638d1c57c1f75e03 Mon Sep 17 00:00:00 2001 From: Mathieu Perreault Date: Wed, 22 Jan 2025 13:51:12 -0500 Subject: [PATCH] Better error handling --- CHANGELOG.md | 59 ++++++++++++++++++++++++------------- src/devtools.ts | 20 +++++++++---- src/manifest.json | 2 +- src/utils/getProfileData.ts | 24 ++++++++++----- 4 files changed, 69 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e54912..d154f4e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,63 +1,80 @@ # Change Log +## v3.0.1 (Jan. 22, 2025) + +- [#154](https://github.com/Shopify/shopify-theme-inspector/pull/154) Better error handling when the store can't be profiled + ## v3.0.0 (Jan. 17, 2025) -* [#153](https://github.com/Shopify/shopify-theme-inspector/pull/153) Add support for Manifest v3 and Speedscope + +- [#153](https://github.com/Shopify/shopify-theme-inspector/pull/153) Add support for Manifest v3 and Speedscope ## v2.0.7 (June 6, 2024) -* [#149](https://github.com/Shopify/shopify-theme-inspector/pull/149) Ignore empty partials coming from dynamic sources + +- [#149](https://github.com/Shopify/shopify-theme-inspector/pull/149) Ignore empty partials coming from dynamic sources ## v2.0.6 (June 6, 2024) -* [#143](https://github.com/Shopify/shopify-theme-inspector/pull/143) Fix redirects for snippets + +- [#143](https://github.com/Shopify/shopify-theme-inspector/pull/143) Fix redirects for snippets ## v2.0.5 (Apr. 1, 2024) -* [#136](https://github.com/Shopify/shopify-theme-inspector/pull/136) Fix profiling for stores with custom domains + +- [#136](https://github.com/Shopify/shopify-theme-inspector/pull/136) Fix profiling for stores with custom domains ## v2.0.4 (Aug. 16, 2021) -* Package dependency updates + +- Package dependency updates ## v2.0.3 (Apr. 29, 2021) -* [#93](https://github.com/Shopify/shopify-theme-inspector/pull/93) Fix extension due to broken minification + +- [#93](https://github.com/Shopify/shopify-theme-inspector/pull/93) Fix extension due to broken minification ## v2.0.2 (Apr. 26, 2021) -* [#87](https://github.com/Shopify/shopify-theme-inspector/pull/87) Security update packages + +- [#87](https://github.com/Shopify/shopify-theme-inspector/pull/87) Security update packages ## v2.0.1 (Jan 26, 2021) -* [#83](https://github.com/Shopify/shopify-theme-inspector/pull/83) Fix profiling error due to incorrect detection of render backend + +- [#83](https://github.com/Shopify/shopify-theme-inspector/pull/83) Fix profiling error due to incorrect detection of render backend ## v2.0.0 (Jan 4, 2021) -* [#77](https://github.com/Shopify/shopify-theme-inspector/pull/77) Update data format with change update + +- [#77](https://github.com/Shopify/shopify-theme-inspector/pull/77) Update data format with change update ## v1.1.0 (Oct 2, 2020) -* [#63](https://github.com/Shopify/shopify-theme-inspector/pull/63) Add storefront-renderer support + +- [#63](https://github.com/Shopify/shopify-theme-inspector/pull/63) Add storefront-renderer support ## v1.0.7 (June 4, 2020) -* [#54](https://github.com/Shopify/shopify-theme-inspector/pull/54) Add shopify employee scope + +- [#54](https://github.com/Shopify/shopify-theme-inspector/pull/54) Add shopify employee scope ## v1.0.6 (May 27, 2020) -* [#53](https://github.com/Shopify/shopify-theme-inspector/pull/53) Add collaborator scope + +- [#53](https://github.com/Shopify/shopify-theme-inspector/pull/53) Add collaborator scope ## v1.0.5 (May 27, 2020) -* [#49](https://github.com/Shopify/shopify-theme-inspector/pull/49) Local development url detect -* [#52](https://github.com/Shopify/shopify-theme-inspector/pull/52) Allow search path profiling + +- [#49](https://github.com/Shopify/shopify-theme-inspector/pull/49) Local development url detect +- [#52](https://github.com/Shopify/shopify-theme-inspector/pull/52) Allow search path profiling ## v1.0.4 (Feb 11, 2020) -* [#46](https://github.com/Shopify/shopify-theme-inspector/pull/46) Allow searching keyword in the flamegraph -* [#47](https://github.com/Shopify/shopify-theme-inspector/pull/47) Detect Shopify stores without script inject +- [#46](https://github.com/Shopify/shopify-theme-inspector/pull/46) Allow searching keyword in the flamegraph +- [#47](https://github.com/Shopify/shopify-theme-inspector/pull/47) Detect Shopify stores without script inject ## v1.0.3 (Feb 1, 2020) -* [#40](https://github.com/Shopify/shopify-theme-inspector/pull/40) Set minFrameSize to 5 +- [#40](https://github.com/Shopify/shopify-theme-inspector/pull/40) Set minFrameSize to 5 ## v1.0.2 (Jan 27, 2020) -* [#39](https://github.com/Shopify/shopify-theme-inspector/pull/39) Fix profiling path +- [#39](https://github.com/Shopify/shopify-theme-inspector/pull/39) Fix profiling path ## v1.0.1 (Jan 27, 2020) -* [#37](https://github.com/Shopify/shopify-theme-inspector/pull/37) Fix custom domain redirect -* [#38](https://github.com/Shopify/shopify-theme-inspector/pull/38) Address security concern +- [#37](https://github.com/Shopify/shopify-theme-inspector/pull/37) Fix custom domain redirect +- [#38](https://github.com/Shopify/shopify-theme-inspector/pull/38) Address security concern ## v1.0.0 (Jan. 14, 2020) -* First release of the extension +- First release of the extension diff --git a/src/devtools.ts b/src/devtools.ts index de1a486..678a200 100644 --- a/src/devtools.ts +++ b/src/devtools.ts @@ -27,6 +27,7 @@ chrome.devtools.inspectedWindow.eval( } addEventListenerToButtons(); + setupNavigationListener(); } }, ); @@ -49,10 +50,8 @@ function getInspectedWindowURL(): Promise { } async function refreshPanel() { - let node = document.querySelector(selectors.initialMessage) - while (node && node.firstChild) { - node.removeChild(node.firstChild); - } + document.querySelector(selectors.initialMessage)!.classList.add('hide'); + document.querySelector(selectors.speedscopeWrapper)!.classList.add('hide'); document .querySelector(selectors.speedscopeWrapper)! .classList.add('loading-fade'); @@ -67,7 +66,7 @@ async function refreshPanel() { const speedscopeIframe = document.getElementById('speedscope-iframe') as HTMLIFrameElement; speedscopeIframe.contentWindow?.postMessage({ type: 'loadProfile', - profileData: profileData + profileData: JSON.stringify(profileData) }, '*'); document @@ -76,7 +75,6 @@ async function refreshPanel() { } catch (error) { console.error(error); - document.querySelector(selectors.speedscopeWrapper)!.classList.add('hide'); document .querySelector(selectors.notProfilableMessage)! .classList.remove('hide'); @@ -86,4 +84,14 @@ async function refreshPanel() { document .querySelector(selectors.speedscopeWrapper)! .classList.remove('loading-fade'); +} + +function setupNavigationListener() { + chrome.devtools.network.onNavigated.addListener(() => { + // Reset panel to initial state + document.querySelector(selectors.speedscopeWrapper)!.classList.add('hide'); + document.querySelector(selectors.loadingAnimation)!.classList.add('hide'); + document.querySelector(selectors.notProfilableMessage)!.classList.add('hide'); + document.querySelector(selectors.initialMessage)!.classList.remove('hide'); + }); } \ No newline at end of file diff --git a/src/manifest.json b/src/manifest.json index c888d31..a7d7a22 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,6 +1,6 @@ { "name": "Shopify Theme Inspector for Chrome", - "version": "3.0.0", + "version": "3.0.1", "description": "Profile and debug Liquid templates on your Shopify store", "devtools_page": "devtools.html", "permissions": ["storage", "identity", "activeTab"], diff --git a/src/utils/getProfileData.ts b/src/utils/getProfileData.ts index 98747ec..721e093 100644 --- a/src/utils/getProfileData.ts +++ b/src/utils/getProfileData.ts @@ -2,16 +2,24 @@ import {SubjectAccessToken} from 'types'; import { CoreAccessTokenResponse } from '../types/messages'; export async function getProfileData( - url: URL): Promise { + url: URL): Promise { - const fetchOptions = { - headers: { - Accept: 'application/vnd.speedscope+json', - Authorization: `Bearer ${await requestAccessToken(url).then(({accessToken}) => accessToken)}`, - }, - }; + try { + const fetchOptions = { + headers: { + Accept: 'application/vnd.speedscope+json', + Authorization: `Bearer ${await requestAccessToken(url).then(({accessToken}) => accessToken)}`, + }, + }; - return fetch(url.href, fetchOptions).then(response => response.text()); + const response = await fetch(url.href, fetchOptions); + if (!response.ok) { + throw new Error('Not profilable'); + } + return response.json(); + } catch (error) { + throw new Error('Not profilable'); + } } function requestAccessToken(