Merge pull request #154 from Shopify/better-error-handling

Better error handling for profile data

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

src/devtools.ts

@@ -27,6 +27,7 @@ chrome.devtools.inspectedWindow.eval(
       }
 
       addEventListenerToButtons();
+      setupNavigationListener();
     }
   },
 );
@@ -49,10 +50,8 @@ function getInspectedWindowURL(): Promise<URL> {
 }
 
 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');
+  });
 }

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"],

src/utils/getProfileData.ts

@@ -2,16 +2,24 @@ import {SubjectAccessToken} from 'types';
 import { CoreAccessTokenResponse } from '../types/messages';
 
 export async function getProfileData(
-  url: URL): Promise<string> {
+  url: URL): Promise<any> {
 
-  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(