What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Remix template console.log not working

Remix template console.log not working

HelpDigital
Shopify Partner
8 0 2

Hi

 

I'm a Remix newbie, trying to modify a copy of the remix template code to achieve what I need. I'm trying to use form values in my Mutation  / function code.

However, the console.log feature won't output when the rest of the function runs - which makes debugging and learning what is happening really difficult.

 

Can someone explain why the console log doesn't work when used within in this function? (it doesn't work on the default template app._index.jsx either)

and ideally, give me a pointer as to how I can use a form (text input field) value in my graphql code. 

My action function and mutation works as expected with hardcoded values. 

 

Thanks.

 

 

 export const action = async ({ request }) => {
   const { admin } = await authenticate.admin(request);
   const formData = await request.formData();
   console.log("Action is called"); // WHY DOESN'T THIS LOG ANYTHING TO THE CONSOLE???
   const response = await admin.graphql(
     `#graphql
    mutation draftOrderUpdate($id: ID!, $input: DraftOrderInput!) {
      draftOrderUpdate(id: $id, input: $input) {
        draftOrder {
          id
          customAttributes {
            key
            value
          }
        }
        userErrors {
          field
          message
        }
      }
    }`,
    
    {
      variables: {
      id: `gid://shopify/DraftOrder/905513205805`,
      input:{
         customAttributes: {
           key: "Gift message",
           value: "test" // I'M TRYING TO MAKE THIS VALUE DYNAMIC FROM A FORM INPUT ???
        }
      }
    } 
    }
        );
    
        const responseJson = await response.json();
  
    return json({
      draftOrder: responseJson.data.draftOrderUpdate.draftOrder
     });
  }

 

 

Replies 10 (10)

Liam
Community Manager
3108 344 895

Hi HelpDigital,

 

In Remix, functions like action run on the server-side and not in the browser. This means that console.log statements inside these functions will log to the server console, not the browser console. If you're running your server locally, you should be able to see the logged output in the terminal where you started your server.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

HelpDigital
Shopify Partner
8 0 2

Thanks Liam, 

 

They don't show in the command line console either -  I can see the Post requests and console.log output from other functions, but just not the ones in loader or action functions.  Is there any other way to output values passed in via the form?

 

Thanks,

Leo

CuriousDevelop
Shopify Partner
1 0 0

Hi HelpDigital

I have a similar problem, that i cant find anywhere (browser or terminal in vs code) where console.log displays.
My code is the following

 const [isDeleting, setIsDeleting] = useState(false);
  const deleteQRCode = useCallback(async () => {
    reset();
    /* The isDeleting state disables the download button and the delete QR code button to show the merchant that an action is in progress */
    setIsDeleting(true);

   
    console.log("its starting");

i simply added a console.log statement to deleteQRCode function.
Did you find a solution?

Konnivenz
Shopify Partner
6 0 0

Hi @Liam,

 

Unfortunately, I have the same problem. Latest Cli and latest template version and unfortunately no logs in the console. I have also set the logger to debug. Nothing happens.

 

 

const shopify = shopifyApp({
  logger: {
    level: LogSeverity.Debug,
    httpRequests: true, 
  }, ...

 

 Server is running locally with npm run dev 

Charles_Roberts
Shopify Partner
49 0 17

The problem is that in most cases the server is opened during:

 

 

npm run dev

 

 

By VSCode, and so we cannot see the console clearly.

The VSCode terminal is pretty flaky and contains lots of other messages, so its very hard to see where the console.log messages, are?

 

When I tried to hit:

 

http://localhost:50702/

 

It did not show any of my console.log messages in:

 

 

action() or loader() methods

 

 

Konnivenz
Shopify Partner
6 0 0

I tried an other project from a YouTuber https://github.com/stefanoHTB/remix-youtube-tutorial. Because I thought I had done something wrong. But I think something about the new packages or cli no longer fits. The older packages in this projects work. And I can output everything via console.log.

 

Edit: Mistake from my side. Loader is working. Action was not called. 

 

techticarti1
Shopify Partner
5 0 0

Hii @HelpDigital , I am having same issue, so did you found any solution for it?. If so then please let me know.

ronnycoding
Shopify Partner
6 0 1

you should be able to set you logger through the shopify app initialization

 

const shopify = shopifyApp({
...mySettings,
logger: {
    level: process.env.VERCEL_ENV ? LogSeverity.Info : LogSeverity.Debug,
    log: (level, message) => {
      // Log to your logging service
    },
    timestamps: true,
    httpRequests: true,
  },
})

// export logger
export const logger = shopify.logger

//and import the logger

logger.log(LogSeverity.Debug, { topic, shop, payload });

 

ronnycoding
Shopify Partner
6 0 1

actually I'm wrong, about exporting the logger, this is not exported from shopifyApp

ronnycoding
Shopify Partner
6 0 1

inspired for what I said before this is a change you can do in a fork of this shopify-app-remix where I exposed the shopify logger and use it as I want to

 

logger.log(LogSeverity.Info, "App test log -------->");

 



Screenshot 2024-02-24 at 10.54.47.png
if you want to use it, you can install

add the following script to your package.json
```

"link-package": "[ -d ./node_modules/@ronnyf89/shopify-app-remix ] && ln -sf ../@ronnyf89/shopify-app-remix ./node_modules/@shopify/shopify-app-remix",
```

and then run pnpm add 
@ronnyf89/shopify-app-remix