pino-loki doesn't work if used in useEffect or error boundary components in nextjs

Question

I want to use Loki for frontend log collection.

I have a page that looks like this:

export default function TestLogging() {
  logger.debug("client-side debug");
  logger.info("client-side info");
  logger.warn("client-side warn");
  logger.error("client-side error");
  
  useEffect(() => {
    logger.debug("useEffect debug");
    logger.info("useEffect info");
    logger.warn("useEffect warn");
    logger.error("useEffect error");
  }, []);

  return <div>TestLogging</div>;
}

export async function getServerSideProps({ req }) {  
  // for those unfamiliar with Nextjs, this runs on the server before the component gets rendered
  logger.info("server-side info");
  logger.warn("server-side warn");
  logger.error("server-side error");
  return { props: {} };
}

The "client-side" and "server-side" logs get to Loki just fine. The "useEffect" logs dont.

If I look at my console in my browser then I can see logs for the client side logs and the useEffect logs, so those lines are definitely executing.

Here's another problem, I think it is related:

I have an ErrorBoundary component that looks very standard:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    logger.info({ error, errorInfo }, "componentDidCatch info");
    logger.error({ error, errorInfo }, "componentDidCatch error");
  }

  render() {
    if (this.state.hasError) {
      logger.info("Error Fallback here");
      return <ErrorBoundaryFallback />;
    }

    // Return children components in case of no error
    logger.info("This is the only log that works");  #########

    return this.props.children;
  }
}

Nothing gets logged to Loki when there is an error. It only logs if there are no errors at all.

My logging configuration looks like this (nothing unusual):

const LokiTransport = {
  target: "pino-loki",
  options: {
    batching: false,
    interval: 5,
    silenceErrors: false,
    host: `${LOKI_HOST_URL}:3100`,
  },
};

const logger = pino({
  level: "debug",
  formatters: {
    bindings: (bindings) => {
      return {
        pid: bindings.pid,
        host: bindings.hostname,
        git_commit: GIT_COMMIT_SHA,
        app: "frontend-mini-challenge",
      };
    },
  },
  transport: {
    targets: [LokiTransport],
  },
});

Is there a good way to get my Next app to reliably log to Loki?

Some context:

I am using Loki here because I am using Loki everywhere else in the project I am using so it would be nice to keep everything together. All my logs are being monitored through Grafana which is why Loki seems like the best bet.

pino-loki doesn't work if used in useEffect or error boundary components in nextjs

0 Answers0