Console Logs Not Showing and Product Title Not Displaying in Admin Action Extension

Retired Boards Appdev Extensions
1

Hi, everyone!

I’m building an admin action extension using React for my Shopify app, and I’m currently facing some issues. I’m following the official documentation for creating admin action blocks. Here’s what I’ve done so far:

  1. Command Used to Generate the Extension: I used the following command to generate the admin action extension with React:

    shopify app generate extension --template admin_action --name issue-tracker-action --flavor react

  2. Generated Code in ActionExtension.jsx: The file ActionExtension.jsx was generated during the extension creation process, and it contains the following code:

    import { useEffect, useState } from "react";
import {
  reactExtension,
  useApi,
  AdminAction,
  BlockStack,
  Button,
  Text,
} from "@shopify/ui-extensions-react/admin";

// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
const TARGET = "admin.product-details.action.render";

export default reactExtension(TARGET, () => <App />);

function App() {
  // The useApi hook provides access to several useful APIs like i18n, close, and data.
  const { i18n, close, data } = useApi(TARGET);
  console.log("data=", { data });
  const [productTitle, setProductTitle] = useState("");
  // Use direct API calls to fetch data from Shopify.
  // See https://shopify.dev/docs/api/admin-graphql for more information about Shopify's GraphQL API
  useEffect(() => {
    (async function getProductInfo() {
      const getProductQuery = {
        query: `query Product($id: ID!) {
          product(id: $id) {
            title
          }
        }`,
        variables: { id: data.selected[0].id },
      };

      const res = await fetch("shopify:admin/api/graphql.json", {
        method: "POST",
        body: JSON.stringify(getProductQuery),
      });

      if (!res.ok) {
        console.error("Network error");
      }

      const productData = await res.json();
      setProductTitle(productData.data.product.title);
    })();
  }, [data.selected]);
  return (
    // The AdminAction component provides an API for setting the title and actions of the Action extension wrapper.
    <AdminAction
      primaryAction={
        <Button
          onPress={() => {
            console.log("saving");
            close();
          }}
        >
          Done
        </Button>
      }
      secondaryAction={
        <Button
          onPress={() => {
            console.log("closing");
            close();
          }}
        >
          Close
        </Button>
      }
    >
      <BlockStack>
        {/* Set the translation values for each supported language in the locales directory */}
        <Text fontWeight="bold">{i18n.translate("welcome", { TARGET })}</Text>
        <Text>Current product: {productTitle}</Text>
      </BlockStack>
    </AdminAction>
  );
}

  3. Issues I’m Experiencing:

    • No Console Logs: I’m not seeing any output from the console.log statements in the browser console. Neither the log for console.log(“data=”, { data }); nor the button click logs (console.log(“saving”) or console.log(“closing”)) are appearing.
    • Empty Product Title: The text Current product: is displaying as expected, but the product title is empty.

  4. Questions:

    • What could be causing the console logs not to appear? Are there any specific debugging steps or tools I should use to capture these logs?
    • Why is the productTitle state not being set correctly, resulting in an empty display for the current product? Is there something wrong with my use of the useApi hook or the GraphQL fetch request?
    • Are there any common mistakes or configurations that might lead to these issues when working with admin action extensions?

Any guidance, suggestions, or examples would be greatly appreciated! Thank you!

2

The issue with productTitle was due to needing to add the scope write_products.

I would still really appreciate any advice on using console.log in app extensions.

3

I found also the way to see the console.logs from extension. I had to choose logs from iframe. like here - https://stackoverflow.com/questions/3275816/debugging-iframes-with-chrome-developer-tools