Skip to content

Instantly share code, notes, and snippets.

@Domiii

Domiii/Timeline.md

Created August 18, 2025 17:13
Show Gist options
  • Save Domiii/8cc939e5ff1895fe62e15169282f2878 to your computer and use it in GitHub Desktop.
Save Domiii/8cc939e5ff1895fe62e15169282f2878 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Timeline.md

Playwright step started: const { signIn } = authContext;

Playwright step started at Point:Playwright: await signIn('[email protected]');

Playwright step started at Point:Playwright: await page.goto('/');

A GET network request with ID 16339.1 was made to http://localhost:5417/: <request_summary> The response had status 200 (OK). </request_summary>

A GET network request with ID 16339.2 was made to http://localhost:5417/assets/index-8ad6eb58.js: <request_summary> The response had status 200 (OK). </request_summary>

A GET network request with ID 16339.3 was made to http://localhost:5417/assets/index-0a08292f.css: <request_summary> The response had status 200 (OK). </request_summary>

A setItem local storage access was made at Point. Key sb-auth-auth-token was set to '{"access_token":"eyJraWQiOiJ0ZXN0LWtleSIsImFsZyI6IkVTMjU2In0.eyJzdWIiOiJ1c2VyLXRlc3QtdXNlci1leGFtcGxlLWNvbSIsImVtYWlsIjoidGVzdC11c2VyQGV4YW1wbGUuY29tIiwidXNlcl9tZXRhZGF0YSI6eyJmdWxsX25hbWUiOiJUZXN0IFVzZXIiLCJuYW1lIjoiVGVzdCBVc2VyIiwiZW1haWwiOiJ0ZXN0LXVzZXJAZXhhbXBsZS5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwicGhvbmVfdmVyaWZpZWQiOmZhbHNlLCJhdmF0YXJfdXJsIjoiaHR0cHM6Ly92aWEucGxhY2Vob2xkZXIuY29tLzk2IiwicGljdHVyZSI6Imh0dHBzOi8vdmlhLnBsYWNlaG9sZGVyLmNvbS85NiIsInByb3ZpZGVyX2lkIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4IiwiaXNzIjoiaHR0cHM6Ly9hdXRoLm51dC5uZXciLCJjdXN0b21fY2xhaW1zIjp7fSwic3ViIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4In0sImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6ImVtYWlsIiwicHJvdmlkZXJzIjpbImVtYWlsIl19LCJpYXQiOjE3NTUwNDE2MTYsImV4cCI6MTc1NTA0NTIxNiwiaXNzIjoiaHR0cHM6Ly9hdXRoLm51dC5uZXciLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwidXNlciI6eyJpZCI6ImY0ZTJmODBjLTYxODUtNGRkNi1iZjMxLWEwNjRmMjYwOGFlOCIsImF1ZCI6ImF1dGhlbnRpY2F0ZWQiLCJyb2xlIjoiYXV0aGVudGljYXRlZCIsImVtYWlsIjoidGVzdC11c2VyQGV4YW1wbGUuY29tIiwiZW1haWxfY29uZmlybWVkX2F0IjoiMjAyNS0wOC0xMlQyMzozMzozNi40NjVaIiwicGhvbmUiOiIiLCJjb25maXJtZWRfYXQiOiIyMDI1LTA4LTEyVDIzOjMzOjM2LjQ2NVoiLCJsYXN0X3NpZ25faW5fYXQiOiIyMDI1LTA4LTEyVDIzOjMzOjM2LjQ2NVoiLCJhcHBfbWV0YWRhdGEiOnsicHJvdmlkZXIiOiJlbWFpbCIsInByb3ZpZGVycyI6WyJlbWFpbCJdfSwidXNlcl9tZXRhZGF0YSI6eyJmdWxsX25hbWUiOiJUZXN0IFVzZXIiLCJuYW1lIjoiVGVzdCBVc2VyIiwiZW1haWwiOiJ0ZXN0LXVzZXJAZXhhbXBsZS5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwicGhvbmVfdmVyaWZpZWQiOmZhbHNlLCJhdmF0YXJfdXJsIjoiaHR0cHM6Ly92aWEucGxhY2Vob2xkZXIuY29tLzk2IiwicGljdHVyZSI6Imh0dHBzOi8vdmlhLnBsYWNlaG9sZGVyLmNvbS85NiIsInByb3ZpZGVyX2lkIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4IiwiaXNzIjoiaHR0cHM6Ly9hdXRoLm51dC5uZXciLCJjdXN0b21fY2xhaW1zIjp7fSwic3ViIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4In0sImlkZW50aXRpZXMiOlt7ImlkZW50aXR5X2lkIjoiNWI4NTM0NTItMDIyNy00NjA0LThiZjktOTQzNTMyODMxZDFhIiwiaWQiOiJlZWViODk1ZS1jYTU5LTRjZjgtOWFkMy0xMjc2YjhmOTY5MzgiLCJ1c2VyX2lkIjoiZjRlMmY4MGMtNjE4NS00ZGQ2LWJmMzEtYTA2NGYyNjA4YWU4IiwiaWRlbnRpdHlfZGF0YSI6eyJlbWFpbCI6InRlc3QtdXNlckBleGFtcGxlLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJmdWxsX25hbWUiOiJUZXN0IFVzZXIiLCJuYW1lIjoiVGVzdCBVc2VyIiwicGhvbmVfdmVyaWZpZWQiOmZhbHNlLCJhdmF0YXJfdXJsIjoiaHR0cHM6Ly92aWEucGxhY2Vob2xkZXIuY29tLzk2IiwicGljdHVyZSI6Imh0dHBzOi8vdmlhLnBsYWNlaG9sZGVyLmNvbS85NiIsInByb3ZpZGVyX2lkIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4IiwiaXNzIjoiaHR0cHM6Ly9hdXRoLm51dC5uZXciLCJjdXN0b21fY2xhaW1zIjp7fSwic3ViIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4In0sInByb3ZpZGVyIjoiZW1haWwiLCJsYXN0X3NpZ25faW5fYXQiOiIyMDI1LTA4LTEyVDIzOjMzOjM2LjQ2NVoiLCJjcmVhdGVkX2F0IjoiMjAyNS0wOC0xMlQyMzozMzozNi40NjVaIiwidXBkYXRlZF9hdCI6IjIwMjUtMDgtMTJUMjM6MzM6MzYuNDY1WiIsImVtYWlsIjoidGVzdC11c2VyQGV4YW1wbGUuY29tIn1dLCJjcmVhdGVkX2F0IjoiMjAyNS0wOC0xMlQyMzozMzozNi40NjVaIiwidXBkYXRlZF9hdCI6IjIwMjUtMDgtMTJUMjM6MzM6MzYuNDY1WiIsImlzX2Fub255bW91cyI6ZmFsc2V9fQ.B5-66X8R8MnsPTIG6T2ex_OyA1R0ERni5em122J0950Jl_mowg01CjUa6qtDGfVRivw44UD6JJkLZiBGGLDLvQ","expires_in":3600,"expires_at":1755045216,"refresh_token":"fyzut26a7kqb","token_type":"bearer","user":{"id":"f4e2f80c-6185-4dd6-bf31-a064f2608ae8","aud":"authenticated","role":"authenticated","email":"[email protected]","email_confirmed_at":"2025-08-12T23:33:36.465Z","phone":"","confirmed_at":"2025-08-12T23:33:36.465Z","last_sign_in_at":"2025-08-12T23:33:36.465Z","app_metadata":{"provider":"email","providers":["email"]},"user_metadata":{"full_name":"Test User","name":"Test User","email":"[email protected]","email_verified":true,"phone_verified":false,"avatar_url":"https://via.placeholder.com/96","picture":"https://via.placeholder.com/96","provider_id":"eeeb895e-ca59-4cf8-9ad3-1276b8f96938","iss":"https://auth.nut.new","custom_claims":{},"sub":"eeeb895e-ca59-4cf8-9ad3-1276b8f96938"},"identities":[{"identity_id":"5b853452-0227-4604-8bf9-943532831d1a","id":"eeeb895e-ca59-4cf8-9ad3-1276b8f96938","user_id":"f4e2f80c-6185-4dd6-bf31-a064f2608ae8","identity_data":{"email":"[email protected]","email_verified":true,"full_name":"Test User","name":"Test User","phone_verified":false,"avatar_url":"https://via.placeholder.com/96","picture":"https://via.placeholder.com/96","provider_id":"eeeb895e-ca59-4cf8-9ad3-1276b8f96938","iss":"https://auth.nut.new","custom_claims":{},"sub":"eeeb895e-ca59-4cf8-9ad3-1276b8f96938"},"provider":"email","last_sign_in_at":"2025-08-12T23:33:36.465Z","created_at":"2025-08-12T23:33:36.465Z","updated_at":"2025-08-12T23:33:36.465Z","email":"[email protected]"}],"created_at":"2025-08-12T23:33:36.465Z","updated_at":"2025-08-12T23:33:36.465Z","is_anonymous":false}}'.

A setItem local storage access was made at Point:2. Key authToken was set to 'eyJraWQiOiJ0ZXN0LWtleSIsImFsZyI6IkVTMjU2In0.eyJzdWIiOiJ1c2VyLXRlc3QtdXNlci1leGFtcGxlLWNvbSIsImVtYWlsIjoidGVzdC11c2VyQGV4YW1wbGUuY29tIiwidXNlcl9tZXRhZGF0YSI6eyJmdWxsX25hbWUiOiJUZXN0IFVzZXIiLCJuYW1lIjoiVGVzdCBVc2VyIiwiZW1haWwiOiJ0ZXN0LXVzZXJAZXhhbXBsZS5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwicGhvbmVfdmVyaWZpZWQiOmZhbHNlLCJhdmF0YXJfdXJsIjoiaHR0cHM6Ly92aWEucGxhY2Vob2xkZXIuY29tLzk2IiwicGljdHVyZSI6Imh0dHBzOi8vdmlhLnBsYWNlaG9sZGVyLmNvbS85NiIsInByb3ZpZGVyX2lkIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4IiwiaXNzIjoiaHR0cHM6Ly9hdXRoLm51dC5uZXciLCJjdXN0b21fY2xhaW1zIjp7fSwic3ViIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4In0sImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6ImVtYWlsIiwicHJvdmlkZXJzIjpbImVtYWlsIl19LCJpYXQiOjE3NTUwNDE2MTYsImV4cCI6MTc1NTA0NTIxNiwiaXNzIjoiaHR0cHM6Ly9hdXRoLm51dC5uZXciLCJhdWQiOiJhdXRoZW50aWNhdGVkIiwidXNlciI6eyJpZCI6ImY0ZTJmODBjLTYxODUtNGRkNi1iZjMxLWEwNjRmMjYwOGFlOCIsImF1ZCI6ImF1dGhlbnRpY2F0ZWQiLCJyb2xlIjoiYXV0aGVudGljYXRlZCIsImVtYWlsIjoidGVzdC11c2VyQGV4YW1wbGUuY29tIiwiZW1haWxfY29uZmlybWVkX2F0IjoiMjAyNS0wOC0xMlQyMzozMzozNi40NjVaIiwicGhvbmUiOiIiLCJjb25maXJtZWRfYXQiOiIyMDI1LTA4LTEyVDIzOjMzOjM2LjQ2NVoiLCJsYXN0X3NpZ25faW5fYXQiOiIyMDI1LTA4LTEyVDIzOjMzOjM2LjQ2NVoiLCJhcHBfbWV0YWRhdGEiOnsicHJvdmlkZXIiOiJlbWFpbCIsInByb3ZpZGVycyI6WyJlbWFpbCJdfSwidXNlcl9tZXRhZGF0YSI6eyJmdWxsX25hbWUiOiJUZXN0IFVzZXIiLCJuYW1lIjoiVGVzdCBVc2VyIiwiZW1haWwiOiJ0ZXN0LXVzZXJAZXhhbXBsZS5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwicGhvbmVfdmVyaWZpZWQiOmZhbHNlLCJhdmF0YXJfdXJsIjoiaHR0cHM6Ly92aWEucGxhY2Vob2xkZXIuY29tLzk2IiwicGljdHVyZSI6Imh0dHBzOi8vdmlhLnBsYWNlaG9sZGVyLmNvbS85NiIsInByb3ZpZGVyX2lkIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4IiwiaXNzIjoiaHR0cHM6Ly9hdXRoLm51dC5uZXciLCJjdXN0b21fY2xhaW1zIjp7fSwic3ViIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4In0sImlkZW50aXRpZXMiOlt7ImlkZW50aXR5X2lkIjoiNWI4NTM0NTItMDIyNy00NjA0LThiZjktOTQzNTMyODMxZDFhIiwiaWQiOiJlZWViODk1ZS1jYTU5LTRjZjgtOWFkMy0xMjc2YjhmOTY5MzgiLCJ1c2VyX2lkIjoiZjRlMmY4MGMtNjE4NS00ZGQ2LWJmMzEtYTA2NGYyNjA4YWU4IiwiaWRlbnRpdHlfZGF0YSI6eyJlbWFpbCI6InRlc3QtdXNlckBleGFtcGxlLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJmdWxsX25hbWUiOiJUZXN0IFVzZXIiLCJuYW1lIjoiVGVzdCBVc2VyIiwicGhvbmVfdmVyaWZpZWQiOmZhbHNlLCJhdmF0YXJfdXJsIjoiaHR0cHM6Ly92aWEucGxhY2Vob2xkZXIuY29tLzk2IiwicGljdHVyZSI6Imh0dHBzOi8vdmlhLnBsYWNlaG9sZGVyLmNvbS85NiIsInByb3ZpZGVyX2lkIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4IiwiaXNzIjoiaHR0cHM6Ly9hdXRoLm51dC5uZXciLCJjdXN0b21fY2xhaW1zIjp7fSwic3ViIjoiZWVlYjg5NWUtY2E1OS00Y2Y4LTlhZDMtMTI3NmI4Zjk2OTM4In0sInByb3ZpZGVyIjoiZW1haWwiLCJsYXN0X3NpZ25faW5fYXQiOiIyMDI1LTA4LTEyVDIzOjMzOjM2LjQ2NVoiLCJjcmVhdGVkX2F0IjoiMjAyNS0wOC0xMlQyMzozMzozNi40NjVaIiwidXBkYXRlZF9hdCI6IjIwMjUtMDgtMTJUMjM6MzM6MzYuNDY1WiIsImVtYWlsIjoidGVzdC11c2VyQGV4YW1wbGUuY29tIn1dLCJjcmVhdGVkX2F0IjoiMjAyNS0wOC0xMlQyMzozMzozNi40NjVaIiwidXBkYXRlZF9hdCI6IjIwMjUtMDgtMTJUMjM6MzM6MzYuNDY1WiIsImlzX2Fub255bW91cyI6ZmFsc2V9fQ.B5-66X8R8MnsPTIG6T2ex_OyA1R0ERni5em122J0950Jl_mowg01CjUa6qtDGfVRivw44UD6JJkLZiBGGLDLvQ'.

A GET network request with ID 16339.6 was made to http://localhost:5417/assets/index-8ad6eb58.js.map: <request_summary> The response had status 200 (OK). </request_summary>

A setItem local storage access was made at Point:3. Key lswt-0.136281401700687030.6090252775247709 was set to 'lswt-0.136281401700687030.6090252775247709'.

A removeItem local storage access was made at Point:4. Key lswt-0.136281401700687030.6090252775247709 was removed.

Playwright step started at Point:Playwright:2: await expect(page.getByTestId('todo-page')).toBeVisible();

React state was updated (which can cause components to render) at given Point: Here is the affected code, in AuthProvider.tsx: .``` const { session, user, loading } = useAppSelector((state) => state.auth)

useEffect(() => { // [Point:ReactEvent:7] Here is the call which updated React. dispatch(getSession())

const {

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in AuthProvider.tsx: .``` const { session, user, loading } = useAppSelector((state) => state.auth)

useEffect(() => { // [Point:ReactEvent:8] Here is the call which updated React. dispatch(getSession())

const {

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in AuthProvider.tsx:

    const {
      data: { subscription },
    } = auth.onAuthStateChange((_event: AuthChangeEvent, session: Session | null) => {
      // [Point:ReactEvent:6] Here is the call which updated React.
      dispatch(setAuthState({ session, user: session?.user ?? null }))
    })

A GET network request with ID 16339.7 was made to http://localhost:5417/assets/Home-d418957f.js: <request_summary> The response had status 200 (OK). </request_summary>

A GET network request with ID 16339.8 was made to http://localhost:5417/assets/separator-82e07344.js: <request_summary> The response had status 200 (OK). </request_summary>

A GET network request with ID 16339.9 was made to http://localhost:5417/assets/circle-check-big-f741e2f4.js: <request_summary> The response had status 200 (OK). </request_summary>

A GET network request with ID 16339.10 was made to http://localhost:5417/assets/x-c658e881.js: <request_summary> The response had status 200 (OK). </request_summary>

A GET network request with ID 16339.11 was made to http://localhost:5417/assets/Home-d418957f.js.map: <request_summary> The response had status 200 (OK). </request_summary>

A GET network request with ID 16339.12 was made to http://localhost:5417/assets/separator-82e07344.js.map: <request_summary> The response had status 200 (OK). </request_summary>

A GET network request with ID 16339.13 was made to http://localhost:5417/assets/circle-check-big-f741e2f4.js.map: <request_summary> The response had status 200 (OK). </request_summary>

A GET network request with ID 16339.14 was made to http://localhost:5417/assets/x-c658e881.js.map: <request_summary> The response had status 200 (OK). </request_summary>

Playwright step started at Point:Playwright:3: await expect(page.getByTestId('todo-form')).toBeVisible(); React components after the previous step: <react_tree> Component:App Component:Provider$1 Component:AuthProvider Component:ThemeProvider Component:TooltipProvider Component:TooltipProviderProvider Component:BrowserRouter Component:Router Component:Header Component:ThemeToggle Component:Tooltip:3 Component:Popper Component:PopperProvider Component:TooltipProvider:3 Component:TooltipTrigger Component:PopperAnchor Component:Primitive.div Component:Primitive.div.Slot Component:Primitive.div.SlotClone Component:Primitive.button Component:Primitive.button.Slot Component:Primitive.button.SlotClone Component:Button Component:Monitor Component:TooltipContent Component:TooltipPortal Component:TooltipPortalProvider Component:Presence Component:AppRoutes Component:RenderedRoute Component:ProtectedRoute Component:Spinner Component:Card Component:LoaderCircle Component:Toaster2 </react_tree>

[console.warning] (Point:18): "Selector selectTodoStats returned a different result when called with the same parameters. This can lead to unnecessary rerenders.\nSelectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization" "(COULD NOT PARSE VALUE)"

[console.warning] (Point:19): "Selector selectTodoStats returned a different result when called with the same parameters. This can lead to unnecessary rerenders.\nSelectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization" "(COULD NOT PARSE VALUE)"

[console.warning] (Point:20): "Selector selectTodoStats returned a different result when called with the same parameters. This can lead to unnecessary rerenders.\nSelectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization" "(COULD NOT PARSE VALUE)"

[console.warning] (Point:21): "Selector selectTodoStats returned a different result when called with the same parameters. This can lead to unnecessary rerenders.\nSelectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization" "(COULD NOT PARSE VALUE)"

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:9] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:9] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:9] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:9] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:9] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:9] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:9] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:9] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

A GET network request with ID 16339.15 was made to http://localhost:5417/.netlify/functions/getTodos: <request_summary> The response had status 200 (OK). </request_summary>

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:10] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:10] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:10] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:10] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoList.tsx: .```

useEffect(() => { // [Point:ReactEvent:10] Here is the call which updated React. dispatch(fetchTodos()); }, [dispatch]);

.```

A GET network request with ID 16339.16 was made to http://localhost:5417/.netlify/functions/getTodos: <request_summary> The response had status 200 (OK). </request_summary>

React state was updated (which can cause components to render) at given Point: Here is the affected code, in AuthProvider.tsx: .``` const { data: { subscription }, } = auth.onAuthStateChange((_event: AuthChangeEvent, session: Session | null) => { // [Point:ReactEvent:11] Here is the call which updated React. dispatch(setAuthState({ session, user: session?.user ?? null })) })

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in AuthProvider.tsx: .``` const { data: { subscription }, } = auth.onAuthStateChange((_event: AuthChangeEvent, session: Session | null) => { // [Point:ReactEvent:11] Here is the call which updated React. dispatch(setAuthState({ session, user: session?.user ?? null })) })

.```

Playwright step started at Point:Playwright:4: const todoTitle = 'Test todo for database persistence'; React changes since the previous step: <react_changes> The contents of Component:AppRoutes changed

Component:AppRoutes Component:RenderedRoute Component:ProtectedRoute Component:Home Component:TodoForm Component:Card:2 Component:CardContent Component:Input Component:Button:2 Component:Plus Component:TodoStats Component:Card:4 Component:CardContent:2 Component:ListTodo Component:Badge Component:CircleCheckBig Component:Badge:2 Component:Circle:2 Component:Badge:3 Component:TodoFilters Component:Card:6 Component:CardContent:3 Component:Button:3 Component:ListTodo:2 Component:Button:4 Component:Circle:3 Component:Button:5 Component:CircleCheckBig:2 Component:TodoList Component:Card:8 Component:CardHeader Component:CardTitle Component:Skeleton Component:CardContent:4 Component:ScrollArea Component:ScrollArea:2 Component:ScrollAreaProvider Component:Primitive.div:4 Component:ScrollAreaViewport Component:Primitive.div:5 Component:Skeleton:2 Component:Skeleton:3 Component:Skeleton:4 Component:Skeleton:5 Component:Skeleton:6 Component:ScrollAreaScrollbar Component:ScrollAreaScrollbar:2 Component:Presence:2 Component:ScrollAreaCorner </react_changes>

Playwright step started at Point:Playwright:4: await page.getByTestId('todo-input').fill(todoTitle); No React changes since the previous step.

Playwright step started at Point:Playwright:5: await page.getByTestId('add-todo-button').click(); React changes since the previous step: <react_changes> The contents of Component:CardTitle changed

Component:CardTitle

The contents of Component:CardContent:4 changed

Component:CardContent:4 </react_changes>

Playwright step started at Point:Playwright:5: await expect(page.getByTestId('todo-list')).toContainText(todoTitle); No React changes since the previous step.

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoForm.tsx: .``` };

const handleInputChange = (e: React.ChangeEvent) => { // [Point:ReactEvent] Here is the call which updated React. setTitle(e.target.value); // Clear validation error when user starts typing if (validationError) { .```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoForm.tsx: .``` }

// Clear any previous validation errors
// [Point:ReactEvent:2] Here is the call which updated React.
setValidationError('');

try {

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoForm.tsx: .``` setValidationError('');

try {
  // [Point:ReactEvent:12] Here is the call which updated React.
  await dispatch(createTodo({ title: validation.trimmedTitle! })).unwrap();
  setTitle('');
  toast.success('Todo added successfully!');

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoForm.tsx: .``` setValidationError('');

try {
  // [Point:ReactEvent:12] Here is the call which updated React.
  await dispatch(createTodo({ title: validation.trimmedTitle! })).unwrap();
  setTitle('');
  toast.success('Todo added successfully!');

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoForm.tsx: .``` setValidationError('');

try {
  // [Point:ReactEvent:12] Here is the call which updated React.
  await dispatch(createTodo({ title: validation.trimmedTitle! })).unwrap();
  setTitle('');
  toast.success('Todo added successfully!');

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoForm.tsx: .``` setValidationError('');

try {
  // [Point:ReactEvent:12] Here is the call which updated React.
  await dispatch(createTodo({ title: validation.trimmedTitle! })).unwrap();
  setTitle('');
  toast.success('Todo added successfully!');

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoForm.tsx: .``` setValidationError('');

try {
  // [Point:ReactEvent:12] Here is the call which updated React.
  await dispatch(createTodo({ title: validation.trimmedTitle! })).unwrap();
  setTitle('');
  toast.success('Todo added successfully!');

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoForm.tsx: .``` setValidationError('');

try {
  // [Point:ReactEvent:12] Here is the call which updated React.
  await dispatch(createTodo({ title: validation.trimmedTitle! })).unwrap();
  setTitle('');
  toast.success('Todo added successfully!');

.```

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoForm.tsx: .``` setValidationError('');

try {
  // [Point:ReactEvent:12] Here is the call which updated React.
  await dispatch(createTodo({ title: validation.trimmedTitle! })).unwrap();
  setTitle('');
  toast.success('Todo added successfully!');

.```

A POST network request with ID 16339.17 was made to http://localhost:5417/.netlify/functions/createTodo: <request_summary> The response had status 201 (Created). </request_summary>

[console.error] (Point:17): "Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?%s%s" "\n\nCheck the render method of Primitive.button.SlotClone." "\n at Credenza (http://localhost:5417/assets/Home-d418957f.js:3768:21)\n at http://localhost:5417/assets/index-8ad6eb58.js:27449:13\n at http://localhost:5417/assets/index-8ad6eb58.js:27424:13\n at http://localhost:5417/assets/index-8ad6eb58.js:27536:13\n at http://localhost:5417/assets/index-8ad6eb58.js:27449:13\n at http://localhost:5417/assets/index-8ad6eb58.js:27424:13\n at http://localhost:5417/assets/index-8ad6eb58.js:27536:13\n at http://localhost:5417/assets/index-8ad6eb58.js:29731:13\n at http://localhost:5417/assets/index-8ad6eb58.js:30361:13\n at Provider2 (http://localhost:5417/assets/index-8ad6eb58.js:27366:15)\n at Provider2 (http://localhost:5417/assets/index-8ad6eb58.js:27366:15)\n at Popper (http://localhost:5417/assets/index-8ad6eb58.js:29723:11)\n at Tooltip$1 (http://localhost:5417/assets/index-8ad6eb58.js:30267:5)\n at div\n at div\n at http://localhost:5417/assets/index-8ad6eb58.js:44850:48\n at div\n at http://localhost:5417/assets/index-8ad6eb58.js:44785:6\n at TodoItem (http://localhost:5417/assets/Home-d418957f.js:3871:21)\n at div\n at div\n at div\n at http://localhost:5417/assets/index-8ad6eb58.js:27536:13\n at http://localhost:5417/assets/Home-d418957f.js:4170:13\n at div\n at http://localhost:5417/assets/index-8ad6eb58.js:27536:13\n at Provider2 (http://localhost:5417/assets/index-8ad6eb58.js:27366:15)\n at http://localhost:5417/assets/Home-d418957f.js:4108:7\n at http://localhost:5417/assets/Home-d418957f.js:4812:47\n at div\n at http://localhost:5417/assets/index-8ad6eb58.js:44850:48\n at div\n at http://localhost:5417/assets/index-8ad6eb58.js:44785:6\n at TodoList (http://localhost:5417/assets/Home-d418957f.js:4882:20)\n at div\n at div\n at Home (http://localhost:5417/assets/Home-d418957f.js:5132:20)\n at ProtectedRoute (http://localhost:5417/assets/index-8ad6eb58.js:44907:27)\n at RenderedRoute (http://localhost:5417/assets/index-8ad6eb58.js:25804:5)\n at Suspense\n at AppRoutes (http://localhost:5417/assets/index-8ad6eb58.js:45021:19)\n at div\n at Router (http://localhost:5417/assets/index-8ad6eb58.js:25938:15)\n at BrowserRouter (http://localhost:5417/assets/index-8ad6eb58.js:26119:5)\n at Provider2 (http://localhost:5417/assets/index-8ad6eb58.js:27366:15)\n at TooltipProvider$1 (http://localhost:5417/assets/index-8ad6eb58.js:30223:5)\n at ThemeProvider (http://localhost:5417/assets/index-8ad6eb58.js:44394:26)\n at AuthProvider (http://localhost:5417/assets/index-8ad6eb58.js:44865:25)\n at Provider$1 (http://localhost:5417/assets/index-8ad6eb58.js:24777:10)\n at App"

React state was updated (which can cause components to render) at given Point: Here is the affected code, in use-mobile.tsx: . setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); }; mql.addEventListener("change", onChange); // [Point:ReactEvent:3] Here is the call which updated React. setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); return () => mql.removeEventListener("change", onChange); }, []); .

React state was updated (which can cause components to render) at given Point: Here is the affected code, in use-mobile.tsx: . setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); }; mql.addEventListener("change", onChange); // [Point:ReactEvent:4] Here is the call which updated React. setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); return () => mql.removeEventListener("change", onChange); }, []); .

React state was updated (which can cause components to render) at given Point: Here is the affected code, in TodoForm.tsx: .```

try {
  await dispatch(createTodo({ title: validation.trimmedTitle! })).unwrap();
  // [Point:ReactEvent:5] Here is the call which updated React.
  setTitle('');
  toast.success('Todo added successfully!');
} catch (error) {

.```

Playwright step started at Point:Playwright:6: const todoItem = page.getByTestId('todo-item').filter({ hasText: todoTitle }); React changes since the previous step: <react_changes> The contents of Component:CardContent:4 changed

Component:CardContent:4 Component:ScrollArea:8 Component:ScrollArea:9 Component:ScrollAreaProvider:2 Component:Primitive.div:6 Component:ScrollAreaViewport:2 Component:Primitive.div:7 Component:TodoItem Component:Card:12 Component:CardContent:5 Component:Checkbox Component:Checkbox:2 Component:CheckboxProvider Component:CheckboxProvider:2 Component:CheckboxTrigger Component:Primitive.button:4 Component:CheckboxIndicator Component:Presence:3 Component:Tooltip:9 Component:Popper:4 Component:PopperProvider:2 Component:TooltipProvider:4 Component:TooltipTrigger:2 Component:PopperAnchor:2 Component:Primitive.div:8 Component:Primitive.div.Slot:3 Component:Primitive.div.SlotClone:2 Component:Primitive.button:5 Component:Primitive.button.Slot:3 Component:Primitive.button.SlotClone:2 Component:Credenza Component:Dialog Component:DialogProvider Component:CredenzaTrigger Component:DialogTrigger Component:Primitive.button:8 Component:Primitive.button.Slot:5 Component:Primitive.button.SlotClone:3 Component:Button:6 Component:Trash2 Component:CredenzaContent Component:DialogContent Component:DialogPortal Component:DialogPortalProvider Component:Presence:4 Component:Presence:5 Component:TooltipContent:2 Component:TooltipPortal:3 Component:TooltipPortalProvider:2 Component:Presence:6 Component:ScrollAreaScrollbar:3 Component:ScrollAreaScrollbar:4 Component:Presence:7 Component:ScrollAreaCorner:2

The contents of Component:Toaster2 changed

Component:Toaster2 Component:Toast:2 </react_changes>

Playwright step started at Point:Playwright:6: await expect(todoItem).toBeVisible(); No React changes since the previous step.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment