Hydrogen V2 API call returning 500 only on production

[almaraz333]

Hello, I am currently working on a project that involves allowing users to submit their email address and sign up for email subscriptions. While this functionality works as expected on my local version of the site, I have been encountering a 500 error from the server when the site is deployed.

I have reviewed the code and am uncertain as to what the issue may be. My suspicion is that there may be a missing header or other configuration issue that I am overlooking.

I was wondering if anyone would be able to offer some insight into this matter or point me in the right direction for resolving this issue. I would be grateful for any assistance or advice you may be able to provide.

Thank you for your time and consideration. Here is the relevant code for reference:

//routes/api/email-sub.ts
import {ActionArgs} from '@shopify/remix-oxygen';

export async function action({request, context}: ActionArgs) {
  const {email} = (await request.json()) as {email: string};

  const variables = {
    input: {
      email,
      acceptsMarketing: true,
    },
  };

  const query = `
    mutation customerCreate($input: CustomerInput!) {
      customerCreate(input: $input) {
        customer {
          email
        }
      }
    }
  `;

  const data = await fetch(
    'https://XXX.myshopify.com/admin/api/2023-01/graphql.json',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Access-Token': context.env.PRIVATE_STOREFRONT_API_TOKEN,
      },
      body: JSON.stringify({query, variables}),
    },
  );

  const res = (await data.json()) as any;

  if (res.data.customerCreate.customer) {
    return {email, status: 'Subscribed!', type: 'success'};
  }
  return {email, status: 'Email Already Subscribed', type: 'fail'};
}

I submit a form from the input component using this (shortened) handle submit function:

// components/EmailSub.tsx
  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const data = await fetch('/api/email-sub', {
      method: 'POST',
      body: JSON.stringify({email}),
    });

    const {type, status} = (await data.json()) as {
      type: string;
      status: string;
    };

[frehner]

Can you give the detailed error message you're seeing? It's hard to debug without that.

Additionally, I don't know if this will fix things, but I want to point out that, in Remix, it's "best practice" to use the <Form> component so that your forms act like native HTML forms.

A high-level example:
https://remix.run/docs/en/1.15.0/tutorials/blog#actions

An in-depth example:
https://remix.run/docs/en/1.15.0/guides/data-writes#data-writes

<Form> docs:
https://remix.run/docs/en/1.15.0/components/form

[frehner]

I can't see that website, sadly.

The error you just got indicates that there's not an issue with Hydrogen, but an issue with your bugsnag setup.

[almaraz333]

Darn. I'm not familiar with Bugsnag, that's not a package I installed. From the package lock it looks like it's a dependency for @shopify/cli-kit

[almaraz333]

That said, error #3 is the response from the api route, and since it just returns "Unexpected Server Error" I guess it makes sense the front end can't parse that as JSON.

[almaraz333]

I found the issue. 'X-Shopify-Access-Token': context.env.PRIVATE_STOREFRONT_API_TOKEN, does not pick up the variable correctly when deployed, but does locally. Do you happen to know what the correct way to load env vars in server is with Hydrogen?

[frehner]

https://shopify.dev/docs/custom-storefronts/oxygen/storefronts/environment-variables

[ryanleichty]

This is using the admin API, correct? Does it send a confirmation email when someone subscribes? I know this was an issue discussed before, so I'm trying to find out if a solution was found

[almaraz333]

I don't believe so, at least not on the store I'm working on. It's possibly a setting on the dash.

[wilsondefreitas-dev]

any solution for it? facing same error

[sergio-nezhigay]

I also need a solution. Temporarily commented Analytics.Provider and data.consent for it removed error