Not compatable with React frontend logging (using next js)

[sheenarbw]

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 definately 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.

[Julien-R44]

I'm not at all familiar with React or Next.js, so it might be a bit complicated for me to help you

Could you provide a reproduction repo please? That would help me see things more clearly. And also the config you use for pino and also pino-loki

[sheenarbw]

Hey :) Wow you are fast at responding. Thanks!

I think I have figured it out. I don't think it's a React-specific problem, it seems to actually just be a web-client problem.

If I try to make use of the loki apis directly from the front end I get CORS errors. So I think that pino-loki is getting CORS errors and failing silently.

I have 2 different things I want to try now:

1. build a little proxy endpoint into my next backend
2. Use an Nginx proxy to add the right headers

[Julien-R44]

Let me know if you find a solution! I built this library with only backend in mind, however I know pino can be used on the frontend but I've never used it in this context. So we may need some adjustements to make pino-loki works with webapps

I'll try to find the time this weekend to test it on a web app

[Julien-R44]

Closing since not really actionnable

Feel free to re-open with more details if needed !