Improve error logging

[blittle]

Tasks

Preview Give feedback

1. When an gql error occurs in dev mode, provide logs with nice links to graphiql
2. Define an official strategy for logging errors in production

[frandiox]

We are now adding [h2:<type>:<scope>] prefix to Hydrogen messages, where "type" is info | warn | error and "scope" is the closes public function that shows the message (e.g. storefront.query). We then replace messages with this pattern in H2 CLI with banners in development.
For Storefront API / GraphQL error messages, we create the error with a "cause" like new Error('...', {cause: {graphql: {query: '...', variables: '...'}}). This is also shown in the banners to create a link to the local GraphiQL to debug the query.

cc @snehashah-shopify Not sure if it's something we want to tackle now but this might be useful for improving logs in Oxygen as well.

[frandiox]

@blittle I'm wondering if we should show every error (even those without the h2 pattern) in an error banner. This way the stack trace can be enhanced like in the previous image (it shows the line of the code and trims the paths so they are clickable).