Skip to content

Commit ec07170

Browse files
isaacsclaude
isaacs
and
claude
committed
test(e2e): fix flaky hydrogen send-to-sentry tests
The hydrogen-react-router-7 and remix-hydrogen root loaders queried the public mock.shop Storefront API for header and footer menus. When mock.shop returns a GraphQL "internal error", the awaited header query throws, so every page returns a 500. Tests that click a button then time out after 30s. No UI reads this data, so remove the queries and their unused fragments. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
1 parent eade1ae commit ec07170

4 files changed

Lines changed: 4 additions & 291 deletions

File tree

‎dev-packages/e2e-tests/test-applications/hydrogen-react-router-7/app/lib/fragments.ts‎

Lines changed: 0 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -102,73 +102,3 @@ export const CART_QUERY_FRAGMENT = `#graphql
102102
}
103103
}
104104
` as const;
105-
106-
const MENU_FRAGMENT = `#graphql
107-
fragment MenuItem on MenuItem {
108-
id
109-
resourceId
110-
tags
111-
title
112-
type
113-
url
114-
}
115-
fragment ChildMenuItem on MenuItem {
116-
...MenuItem
117-
}
118-
fragment ParentMenuItem on MenuItem {
119-
...MenuItem
120-
items {
121-
...ChildMenuItem
122-
}
123-
}
124-
fragment Menu on Menu {
125-
id
126-
items {
127-
...ParentMenuItem
128-
}
129-
}
130-
` as const;
131-
132-
export const HEADER_QUERY = `#graphql
133-
fragment Shop on Shop {
134-
id
135-
name
136-
description
137-
primaryDomain {
138-
url
139-
}
140-
brand {
141-
logo {
142-
image {
143-
url
144-
}
145-
}
146-
}
147-
}
148-
query Header(
149-
$country: CountryCode
150-
$headerMenuHandle: String!
151-
$language: LanguageCode
152-
) @inContext(language: $language, country: $country) {
153-
shop {
154-
...Shop
155-
}
156-
menu(handle: $headerMenuHandle) {
157-
...Menu
158-
}
159-
}
160-
${MENU_FRAGMENT}
161-
` as const;
162-
163-
export const FOOTER_QUERY = `#graphql
164-
query Footer(
165-
$country: CountryCode
166-
$footerMenuHandle: String!
167-
$language: LanguageCode
168-
) @inContext(language: $language, country: $country) {
169-
menu(handle: $footerMenuHandle) {
170-
...Menu
171-
}
172-
}
173-
${MENU_FRAGMENT}
174-
` as const;

‎dev-packages/e2e-tests/test-applications/hydrogen-react-router-7/app/root.tsx‎

Lines changed: 3 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
Scripts,
99
ScrollRestoration,
1010
} from 'react-router';
11-
import { FOOTER_QUERY, HEADER_QUERY } from '~/lib/fragments';
1211

1312
import { useNonce } from '@shopify/hydrogen';
1413

@@ -56,17 +55,11 @@ export function links() {
5655
}
5756

5857
export async function loader(args: LoaderFunctionArgs) {
59-
// Start fetching non-critical data without blocking time to first byte
60-
const deferredData = loadDeferredData(args);
61-
62-
// Await the critical data required to render initial state of the page
63-
const criticalData = await loadCriticalData(args);
64-
65-
const { env } = args.context;
58+
const { env, customerAccount, cart } = args.context;
6659

6760
return {
68-
...deferredData,
69-
...criticalData,
61+
cart: cart.get(),
62+
isLoggedIn: customerAccount.isLoggedIn(),
7063
ENV: {
7164
sentryTrace: env.SENTRY_TRACE,
7265
sentryBaggage: env.SENTRY_BAGGAGE,
@@ -83,54 +76,6 @@ export async function loader(args: LoaderFunctionArgs) {
8376
};
8477
}
8578

86-
/**
87-
* Load data necessary for rendering content above the fold. This is the critical data
88-
* needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
89-
*/
90-
async function loadCriticalData({ context }: LoaderFunctionArgs) {
91-
const { storefront } = context;
92-
93-
const [header] = await Promise.all([
94-
storefront.query(HEADER_QUERY, {
95-
cache: storefront.CacheLong(),
96-
variables: {
97-
headerMenuHandle: 'main-menu', // Adjust to your header menu handle
98-
},
99-
}),
100-
// Add other queries here, so that they are loaded in parallel
101-
]);
102-
103-
return { header };
104-
}
105-
106-
/**
107-
* Load data for rendering content below the fold. This data is deferred and will be
108-
* fetched after the initial page load. If it's unavailable, the page should still 200.
109-
* Make sure to not throw any errors here, as it will cause the page to 500.
110-
*/
111-
function loadDeferredData({ context }: LoaderFunctionArgs) {
112-
const { storefront, customerAccount, cart } = context;
113-
114-
// defer the footer query (below the fold)
115-
const footer = storefront
116-
.query(FOOTER_QUERY, {
117-
cache: storefront.CacheLong(),
118-
variables: {
119-
footerMenuHandle: 'footer', // Adjust to your footer menu handle
120-
},
121-
})
122-
.catch((error: any) => {
123-
// Log query errors, but don't throw them so the page can still render
124-
console.error(error);
125-
return null;
126-
});
127-
return {
128-
cart: cart.get(),
129-
isLoggedIn: customerAccount.isLoggedIn(),
130-
footer,
131-
};
132-
}
133-
13479
export function Layout({ children }: { children?: React.ReactNode }) {
13580
const nonce = useNonce();
13681

‎dev-packages/e2e-tests/test-applications/remix-hydrogen/app/lib/fragments.ts‎

Lines changed: 0 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -102,73 +102,3 @@ export const CART_QUERY_FRAGMENT = `#graphql
102102
}
103103
}
104104
` as const;
105-
106-
const MENU_FRAGMENT = `#graphql
107-
fragment MenuItem on MenuItem {
108-
id
109-
resourceId
110-
tags
111-
title
112-
type
113-
url
114-
}
115-
fragment ChildMenuItem on MenuItem {
116-
...MenuItem
117-
}
118-
fragment ParentMenuItem on MenuItem {
119-
...MenuItem
120-
items {
121-
...ChildMenuItem
122-
}
123-
}
124-
fragment Menu on Menu {
125-
id
126-
items {
127-
...ParentMenuItem
128-
}
129-
}
130-
` as const;
131-
132-
export const HEADER_QUERY = `#graphql
133-
fragment Shop on Shop {
134-
id
135-
name
136-
description
137-
primaryDomain {
138-
url
139-
}
140-
brand {
141-
logo {
142-
image {
143-
url
144-
}
145-
}
146-
}
147-
}
148-
query Header(
149-
$country: CountryCode
150-
$headerMenuHandle: String!
151-
$language: LanguageCode
152-
) @inContext(language: $language, country: $country) {
153-
shop {
154-
...Shop
155-
}
156-
menu(handle: $headerMenuHandle) {
157-
...Menu
158-
}
159-
}
160-
${MENU_FRAGMENT}
161-
` as const;
162-
163-
export const FOOTER_QUERY = `#graphql
164-
query Footer(
165-
$country: CountryCode
166-
$footerMenuHandle: String!
167-
$language: LanguageCode
168-
) @inContext(language: $language, country: $country) {
169-
menu(handle: $footerMenuHandle) {
170-
...Menu
171-
}
172-
}
173-
${MENU_FRAGMENT}
174-
` as const;

‎dev-packages/e2e-tests/test-applications/remix-hydrogen/app/root.tsx‎

Lines changed: 1 addition & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,7 @@ export function links() {
4848
}
4949

5050
export async function loader({ context }: { context: LoaderFunctionArgs['context'] }) {
51-
const { storefront, session, cart } = context as {
52-
storefront: {
53-
query: (query: string, options: any) => Promise<any>;
54-
CacheLong: () => any;
55-
};
51+
const { session, cart } = context as {
5652
session: HydrogenSession;
5753
cart: unknown;
5854
env: unknown;
@@ -68,27 +64,9 @@ export async function loader({ context }: { context: LoaderFunctionArgs['context
6864
// defer the cart query by not awaiting it
6965
const cartPromise = typedCart.get();
7066

71-
// defer the footer query (below the fold)
72-
const footerPromise = storefront.query(FOOTER_QUERY, {
73-
cache: storefront.CacheLong(),
74-
variables: {
75-
footerMenuHandle: 'footer', // Adjust to your footer menu handle
76-
},
77-
});
78-
79-
// await the header query (above the fold)
80-
const headerPromise = storefront.query(HEADER_QUERY, {
81-
cache: storefront.CacheLong(),
82-
variables: {
83-
headerMenuHandle: 'main-menu', // Adjust to your header menu handle
84-
},
85-
});
86-
8767
return defer(
8868
{
8969
cart: cartPromise,
90-
footer: footerPromise,
91-
header: await headerPromise,
9270
isLoggedIn,
9371
publicStoreDomain,
9472
},
@@ -225,73 +203,3 @@ async function validateCustomerAccessToken(session: HydrogenSession, customerAcc
225203

226204
return { isLoggedIn, headers };
227205
}
228-
229-
const MENU_FRAGMENT = `#graphql
230-
fragment MenuItem on MenuItem {
231-
id
232-
resourceId
233-
tags
234-
title
235-
type
236-
url
237-
}
238-
fragment ChildMenuItem on MenuItem {
239-
...MenuItem
240-
}
241-
fragment ParentMenuItem on MenuItem {
242-
...MenuItem
243-
items {
244-
...ChildMenuItem
245-
}
246-
}
247-
fragment Menu on Menu {
248-
id
249-
items {
250-
...ParentMenuItem
251-
}
252-
}
253-
` as const;
254-
255-
const HEADER_QUERY = `#graphql
256-
fragment Shop on Shop {
257-
id
258-
name
259-
description
260-
primaryDomain {
261-
url
262-
}
263-
brand {
264-
logo {
265-
image {
266-
url
267-
}
268-
}
269-
}
270-
}
271-
query Header(
272-
$country: CountryCode
273-
$headerMenuHandle: String!
274-
$language: LanguageCode
275-
) @inContext(language: $language, country: $country) {
276-
shop {
277-
...Shop
278-
}
279-
menu(handle: $headerMenuHandle) {
280-
...Menu
281-
}
282-
}
283-
${MENU_FRAGMENT}
284-
` as const;
285-
286-
const FOOTER_QUERY = `#graphql
287-
query Footer(
288-
$country: CountryCode
289-
$footerMenuHandle: String!
290-
$language: LanguageCode
291-
) @inContext(language: $language, country: $country) {
292-
menu(handle: $footerMenuHandle) {
293-
...Menu
294-
}
295-
}
296-
${MENU_FRAGMENT}
297-
` as const;

0 commit comments

Comments
 (0)