App reviews, troubleshooting, and recommendations
Currently working on a shopify app which uses script tags to add a section on the thank you page (order status page).
It loads the image and text perfectly fine on the thank you page but 5 minutes later I get a CORB error which stops my code from being displayed on the thank you page.
This is the basic structure of my js file which does the main handling of the script tag.
console.log('this is coming from script tag api!')
const header = $('div.section__content').parent('.section');
var myContent = function($) {
//content box contains some basic styling with divs and an image which I haven't included
const contentBox = $( ....).css(....)
header.prepend(contentbox)
}
Interesting, are you able to share your browser network log and the exact error?
Script Tags are a predominant mechanism to load scripts on the thank you page, so I'm curious as to what's happening.
It's a tricky one to show currently - as when I add the script tag it works for about an hour and then when I come back it's no longer there and shows the CORB error. This is the landing page: https://www.littos.co.nz/11812208736/orders/4d2b6faa0b63a59c3e1d95908528fd40
I will try record the error once it happens again, for the moment I've removed the script tag and added it back in.
Do you think it could be due to a mime type? I've currently got it on my code as script.type = "text/javascript"
If it was the mime type, it would not have worked at all.
Looking at the order confirmation link, all looks fine. So yeah when you are able to capture more info, please do share.
Here's some more info!
Ok, so this is weird, and I think I know the problem now
<script type="text/javascript" async="" src="https://arcane-spire-11260.herokuapp.com/thanks-script.js?shop=littosnz.myshopify.com"></script>
This is what is included as a script tag. If I paste that src link in an incognito window, it redirects me to
/auth?shop=littosnz.myshopify.com
which further redirects me to
https://littosnz.myshopify.com/admin/oauth/authorize?client_id=5cfb517c172af6c170f4c4fac3c09996&scope=write_script_tags&redirect_uri=https%3A%2F%2Farcane-spire-11260.herokuapp.com%2Fauth%2Fcallback&state=210481837313155&grant_options%5B%5D=per-user
which seems like the app install URL
and since I don't have an active Shopify session, I get redirect to the Store login page, no wonder you get a block on these 302s
You probably don't always get this block because sometimes when you are testing, you are in the same session as your store admin
So, you need to check your auth routine in the app and change it so that it doesn't do that when an unauthenticated user opens that link
Hey Bunty,
Thanks for the fast replies and pointers.
Where do we find the auth routine in the app. Is this a codebase change or a Shopify partner setting change?
https://arcane-spire-11260.herokuapp.com/thanks-script.js?shop=littosnz.myshopify.com
Fundamentally, if you add something to a script tag, it should be publicly accessible. I believe it is your app that's adding it, so it is your code base that needs to be looked into.
I can not access this publicly, and it returns a JS and I no longer see a 302 or the block, have you fixed it?
This is built as a custom app and has gone live on one site. It seems like I am already doing it correctly, is there anything I'm missing here?
@EugeneCXY I' not sure what that screenshot represents, is that a code to add a script tag to the store? I don't think that is a problem
Problem is in this URL
https://arcane-spire-11260.herokuapp.com/thanks-script.js?shop=littosnz.myshopify.com
If you open it in an incognito window, sometimes it redirects, and sometimes it renders a JavaScript. Whatever is happening in the GET request of that endpoint is the problem
Could it be the session? I am using shopify App cli out of the box.
I am not too sure why it keeps redirecting me to log in with the shopify shop.
Here is the server file.
import "@babel/polyfill";
import dotenv from "dotenv";
import "isomorphic-fetch";
import createShopifyAuth, { verifyRequest } from "@shopify/koa-shopify-auth";
import Shopify, { ApiVersion } from "@shopify/shopify-api";
import Koa from "koa";
import next from "next";
import Router from "koa-router";
dotenv.config();
const port = parseInt(process.env.PORT, 10) || 8081;
const dev = process.env.NODE_ENV !== "production";
const app = next({
dev,
});
const handle = app.getRequestHandler();
Shopify.Context.initialize({
API_KEY: process.env.SHOPIFY_API_KEY,
API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
SCOPES: process.env.SCOPES.split(","),
HOST_NAME: process.env.HOST.replace(/https:\/\//, ""),
API_VERSION: ApiVersion.October20,
IS_EMBEDDED_APP: true,
// This should be replaced with your preferred storage strategy
SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),
});
// Storing the currently active shops in memory will force them to re-login when your server restarts. You should
// persist this object in your app.
const ACTIVE_SHOPIFY_SHOPS = {};
app.prepare().then(async () => {
const server = new Koa();
const router = new Router();
server.keys = [Shopify.Context.API_SECRET_KEY];
server.use(
createShopifyAuth({
async afterAuth(ctx) {
// Access token and shop available in ctx.state.shopify
const { shop, accessToken, scope } = ctx.state.shopify;
const host = ctx.query.host;
ACTIVE_SHOPIFY_SHOPS[shop] = scope;
const response = await Shopify.Webhooks.Registry.register({
shop,
accessToken,
path: "/webhooks",
topic: "APP_UNINSTALLED",
webhookHandler: async (topic, shop, body) =>
delete ACTIVE_SHOPIFY_SHOPS[shop],
});
if (!response.success) {
console.log(
`Failed to register APP_UNINSTALLED webhook: ${response.result}`
);
}
// Redirect to app with shop parameter upon auth
ctx.redirect(`/?shop=${shop}&host=${host}`);
},
})
);
const handleRequest = async (ctx) => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
};
router.post("/webhooks", async (ctx) => {
try {
await Shopify.Webhooks.Registry.process(ctx.req, ctx.res);
console.log(`Webhook processed, returned status code 200`);
} catch (error) {
console.log(`Failed to process webhook: ${error}`);
}
});
router.post(
"/graphql",
verifyRequest({ returnHeader: true }),
async (ctx, next) => {
await Shopify.Utils.graphqlProxy(ctx.req, ctx.res);
}
);
router.get("(/_next/static/.*)", handleRequest); // Static content is clear
router.get("/_next/webpack-hmr", handleRequest); // Webpack content is clear
router.get("(.*)", async (ctx) => {
const shop = ctx.query.shop;
// This shop hasn't been seen yet, go through OAuth to create a session
if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
ctx.redirect(`/auth?shop=${shop}`);
} else {
await handleRequest(ctx);
}
});
server.use(router.allowedMethods());
server.use(router.routes());
server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
});
});
Did you find any solution for this? I am also facing the same issue.
Upload your script tag to a website domain and call it there. If you use Heroku, it times out
Hi, but in development, using ngrok, how did you get over this problem?
You shouldnt be getting this error if you are using ngrok. This error only occurs when heroku sleeps and if your script is served on heroku. If you're ngrok is running then it shouldn't occur
Hello! I've solved my previous problem, but now I understand which one was yours.
May I ask if you have tried to subscribe to heroku's "Hobby" plan so that it doesn't go to sleep after 30 minutes?
In this way the scriptTag should stay online
let me know
thanks
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024