collective / volto-sentry

Sentry integration for Volto
0 stars 0 forks source link

SSR errors not getting to sentry #7

Open instification opened 1 year ago

instification commented 1 year ago

I have managed to get sentry configured and it will upload releases and send browser exceptions to sentry, but backend/nodejs exceptions don't seem to be getting through.

I tried to validate this behaviour by creating a fresh volto addon using yo and installing the volto-sentry addon.

I created a simple component that looks like this:

import React, { Component } from 'react';

class SentryTestComponent extends Component {

  render() {

    if (__SERVER__) {
      const badbevar = someundefinedbevar;
    }

    return (
     <p>This is the test component</p>
    );
  }
}

export default SentryTestComponent;

I am definitely getting exceptions in the console but nothing is going to sentry:

API server (API_PATH) is set to: http://localhost:8081/nsw-demo
Proxying API requests from http://localhost:8081/++api++ to http://localhost:8081/nsw-demo
🎭 Volto started at 0.0.0.0:3000 🚀
ReferenceError: someundefinedbevar is not defined
    at ie.render (/Users/jon/Projects/deploy/plone6au/buildout_plone6/frontend/sentry-test/build/server.js:1:149628)
    at d (/Users/jon/Projects/deploy/plone6au/buildout_plone6/frontend/sentry-test/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:35:231)
    at bb (/Users/jon/Projects/deploy/plone6au/buildout_plone6/frontend/sentry-test/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/Users/jon/Projects/deploy/plone6au/buildout_plone6/frontend/sentry-test/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/Users/jon/Projects/deploy/plone6au/buildout_plone6/frontend/sentry-test/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at exports.renderToString (/Users/jon/Projects/deploy/plone6au/buildout_plone6/frontend/sentry-test/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at /Users/jon/Projects/deploy/plone6au/buildout_plone6/frontend/sentry-test/build/server.js:1:153762
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

This is while running a built server in production mode.

Is there something I'm missing? Or is sentry integration not working with SSR requests? Does anyone else have working backend exceptions coming through to sentry?

I tried looking at the crash reporter code and putting some console logs in here: https://github.com/collective/volto-sentry/blob/main/src/crashReporter.js#L14 but nothing gets printed error, so it would seem like it is not catching backend exceptions.

tiberiuichim commented 1 year ago

@instification

I wonder if this is significant, it seems that it's loading sentry/browser for both client and server:

const SentryNode = loadable.lib(() =>
  import(/* webpackChunkName: "s_entry-browser" */ '@sentry/browser'),
)
instification commented 1 year ago

I thought that might be the case. You can't build @sentry/node with webpack, you get errors as described here: https://github.com/getsentry/sentry-javascript/issues/5787

I can get it to build nicely with:

let SentryNode = undefined;
if (__SERVER__) {
  SentryNode = loadable.lib(() =>
    import(/* webpackChunkName: "s_entry-node" */ '@sentry/node'),
  );
}

But still makes no difference.

instification commented 1 year ago

I made a branch with some changes to try and debug the issue.

Notably putting a console log message in the try/except block: https://github.com/collective/volto-sentry/blob/eeddff74a46cf1890db801193b817c355a07a343/src/crashReporter.js#L15-L24

However, I don't see the output in the console. So it seems like it's not even getting there to begin with.

instification commented 1 year ago

Some discussion about the problem here: https://stackoverflow.com/questions/68891683/sentry-with-ssr

tiberiuichim commented 1 year ago

interesting. Keep digging! I don't have any answer or clue for this issue, sorry about that.

soura07 commented 1 year ago

import React, { Component } from 'react';

class SentryTestComponent extends Component { render() { if (typeof window === 'undefined') { // Check for server-side rendering const badbevar = 'some value'; // Define a variable for server-side rendering // Perform server-side specific operations here }

return (
  <p>This is the test component</p>
);

} }

export default SentryTestComponent;