Verbose Logging Issues — Hard to debug.

[mkromann]

Issue summary

(1) The logging tends to get cluttered due to long routes. As a result, the logs are difficult to read, especially with the long query parameters.

(2) The footer seems unnecessary. It could be presented at the start like the Prisma instructions. Also the shortcuts are quickly learned, and they do not need to be surfaced all the time.

(3) Native Remix logging formatting is lost due the custom nature (color override etc) of this log.

• @shopify/shopify-app-remix version: "2.0.0"
• Node version: "19.9.0"
• Operating system: macOS 13.5.1 (22G90)

Example log:

21:38:49 │ remix │ GET /auth/session-key?embedded=1&hmac=a12d3f456b789c012d345f67890e1f23a45b6c789d01e2f34g5h6i
789j0k1l2m&host=ZWRtaW4uc2hvcGlmZS5jb20vc3RvcmUvcmVtaXgtYXBw&locale=en-US&session=d1e2f3g4h5i6j7k8l9m0n1o2p3q
4r5s6t7u8v9w0x1y2z3a4b5c&shop=random-store.myshopify.com&timestamp=1234567890&remix-reload=https%3A%2F%2Fexample-
domain.trycloudflare.com%2Fapp%2Fproducts%2F1234567890%2Fimages%3Fembedded%3D1%26hmac%3Da12d3f456b789c012d345f678
90e1f23a45b6c789d01e2f34g5h6i789j0k1l2m%26host%3DZWRtaW4uc2hvcGlmZS5jb20vc3RvcmUvcmVtaXgtYXBw%26locale
%3Den-US%26session%3Dd1e2f3g4h5i6j7k8l9m0n1o2p3q4r5s6t7u8v9w0x1y2z3a4b5c%26shop%3Drandom-store.myshopify.com
%26timestamp%3D1234567890 200 - - 0.999 ms
21:38:49 │ remix │ GET /auth/session-key?embedded=1&hmac=b21e4f567c890a123f456g789h01i2j3k4l5m6n7o8p9q0r1s2t
3u4v5w6x7y8z9&host=ZWRtaW4uc2hvcGlmZS5jb20vc3RvcmUvcmVtaXgtYXBw&locale=en-US&session=d1e2f3g4h5i6j7k8l9m0n1o2p3q
4r5s6t7u8v9w0x1y2z3a4b5c&shop=random-store.myshopify.com&timestamp=9876543210&remix-reload=https%3A%2F%2Fexample-
domain.trycloudflare.com%2Fapp%2Fproducts%2F0987654321%2Fimages%3Fembedded%3D1%26hmac%3Db21e4f567c890a123f456g789
h01i2j3k4l5m6n7o8p9q0r1s2t3u4v5w6x7y8z9%26host%3DZWRtaW4uc2hvcGlmZS5jb20vc3RvcmUvcmVtaXgtYXBw%26locale
%3Den-US%26session%3Dd1e2f3g4h5i6j7k8l9m0n1o2p3q4r5s6t7u8v9w0x1y2z3a4b5c%26shop%3Drandom-store.myshopify.com
%26timestamp%3D9876543210 200 - - 1.000 ms
21:38:49 │ remix │ ✅ Successful query: { metaitemDefinitionByClass: … }
21:38:49 │ remix │ ✅ Successful query: { item: … }
21:38:49 │ remix │ GET /app/items/1234567890/pics?embedded=1&hmac=a12d3f456b789c012d345f67890e1f23a45b6c7
89d01e2f34g5h6i789j0k1l2m&host=ZWRtaW4uc2hvcGlmZS5jb20vc3RvcmUvcmVtaXgtYXBw&locale=en-US&session=d1e2f3g4h5i6j7k8l
9m0n1o2p3q4r5s6t7u8v9w0x1y2z3a4b5c&shop=random-store.myshopify.com&timestamp=1234567890 302 - - 4.567 ms
21:38:50 │ remix │ GET /app/items/0987654321/pics?embedded=1&hmac=b21e4f567c890a123f456g789h01i2j3k4l5m6n7o
8p9q0r1s2t3u4v5w6x7y8z9&host=ZWRtaW4uc2hvcGlmZS5jb20vc3RvcmUvcmVtaXgtYXBw&locale=en-US&session=d1e2f3g4h5i6j7k8l9m0
n1o2p3q4r5s6t7u8v9w0x1y2z3a4b5c&shop=random-store.myshopify.com&timestamp=9876543210 302 - - 5.678 ms
21:38:51 │ remix │ ✅ Successful query: { variantItemByClass: … }
21:38:51 │ remix │ GET /app/items/1234567890/attributes?embedded=1&hmac=a12d3f456b789c012d345f67890e1f23a45b
6c789d01e2f34g5h6i789j0k1l2m&host=ZWRtaW4uc2hvcGlmZS5jb20vc3RvcmUvcmVtaXgtYXBw&locale=en-US&session=d1e2f3g4h5i6j7k8l
9m0n1o2p3q4r5s6t7u8v9w0x1y2z3a4b5c&shop=random-store.myshopify.com&timestamp=1234567890 200 - - 6.789 ms
21:38:52 │ remix │ ✅ Successful query: { variant: … }
21:38:52 │ remix │ GET /app/items/0987654321/details?embedded=1&hmac=b21e4f567c890a123f456g789h01i2j3k4l5m6n7o
8p9q0r1s2t3u4v5w6x7y8z9&host=ZWRtaW4uc2hvcGlmZS5jb20vc3RvcmUvcmVtaXgtYXBw&locale=en-US&session=d1e2f3g4h5i6j7k8l9m0
n1o2p3q4r5s6t7u8v9w0x1y2z3a4b5c&shop=random-store.myshopify.com&timestamp=9876543210 200 - - 7.890 ms
21:38:53 │ remix │ GET /app/products/random-url-alias 200 - - 8.901 ms

Expected behavior

The logs should be clear, concise, and easy to read. Potentially, consider providing an option for condensed or summarized logging for long routes or allowing better formatting options. Maybe a way to opt-out (maybe it already exist?).

Actual behavior

The logs are too verbose, especially when dealing with long query parameters, making it challenging to quickly understand or debug.

Steps to reproduce the problem

1. Set up a Remix app with the @shopify/shopify-app-remix package.
2. Implement routes with lengthy query parameters.
3. Monitor the logs during requests.

[nullndr]

The long logging you see is handled neither by the shopify package nor by remix, but is actually handled by the http server. RAS uses morgan by default, and you can't configure it.

You will be able to handle this switching to a custom express server.

However, I completely agree on the color issue.