How to integrate Hydrogen with error tracking frameworks? (like Sentry or Rollbar)

[iliapir2]

Hello Hydrogen team!
Thank you for all your work, recently we launched first production storefront using hydrogen (https://sheertex.com/brae/)

I want to catch all unhandled exceptions in production.
Can you help me to find a correct place in the code to inject error handling libraries/frameworks like Sentry or Rollbar?
I tried to wrap the whole app with but then it fails to hydrate.

Do you have any suggestions on where I should place it?

[davidhousedev]

Im not sure how you'd monitor server activity, but you can probably get Sentry's error boundary running post-hydration by using a custom client entry point! See: https://shopify.dev/custom-storefronts/hydrogen/data-sources/configure-default-entry-points

Curious to see what others have to say here, I hadn't thought about error boundaries for server components.

[iliapir2]

Thank you for the prompt reply! Will check if it works for me

[buren]

Worked for me 👍

This is mysrc/entry-client.jsx 👇

import * as Sentry from '@sentry/react';
import {BrowserTracing} from '@sentry/tracing';
import renderHydrogen from '@shopify/hydrogen/entry-client';

const ClientWrapper = (props) => props.children;

Sentry.init({
  dsn: "<YOUR_SENTRY_DSN_GOES_HERE>",
  integrations: [new BrowserTracing()],
  tracesSampleRate: 0.2,
});

export default renderHydrogen(ClientWrapper);

and then in index.html, replace (documentation)

<script type="module" src="/@shopify/hydrogen/entry-client"></script>

with

<script type="module" src="/src/entry-client"></script>

Thank you @davidhousedev 🙌

UPDATE: Updated broken documentation link, thank you @awongh.

[awongh]

This worked for me.

FYI the URL for docs on entry points has changed: https://shopify.dev/custom-storefronts/hydrogen/data-sources/configure-default-entry-points

[davidhousedev]

Thanks @awongh ! I updated my comment to use your link

[blittle]

@iliapir2 you could define a custom logger that forwards to sentry or rollbar: https://shopify.dev/api/hydrogen/utilities/log#swap-logger-implementation

[davidhousedev]

Would this swap the logger implementation 1:1, or is it possible to have multiple loggers running at once?

[blittle]

You could call multiple loggers inside a custom implementation.

[iliapir2]

@blittle can you please show a code snippet on how to call default logger in my custom implementation?

[blittle]

@iliapir2 it depends on the platform you are deploying to. If deploying to a node-js platform, then you could use a winston, pino, or something custom entirely:

const logger = require('pino')()

import {setLogger} from '@shopify/hydrogen';
setLogger({
  trace(request, message) {
    logger.trace(request, message);
  },
  debug(request, ...args) {
    logger.debug(request, message);
  },
  warn(request, ...args) {
    logger.warn(request, message);
  },
  error(request, ...args) {
    logger.error(request, message);
  },
  fatal(request, ...args) {
    logger.fatal(request, message);
  },
});