Please provide a tutorial to help integrate Sentry to debug front-end exceptions.

[ChuanqiTan]

Please provide a tutorial, which can be written in the official blog, to help integrate Sentry to debug frontend exceptions.

• Which feature do you want to improve? (and what problem does it have) Frontend exception debug

• What is the benefit of the enhancement? Sentry is very important in the frontend exception debugging. Without the support of Sentry, we cannot quickly resolve the exceptions encountered by the frontend.

Detail:

Because frontend_exception_handler will handle all frontend exception, but we MUST go back to the Frontend to report the exception to Sentry. How can I catch frontend exception by Sentry SDK?

1. I tried to use return rx.run_script(...) in frontend_exception_handler to let the frontend report the exception. However, this did not work. I suspect that the frontend exception handler does not allow js code to be executed through the return value.

2. I also tried to disable reflex's frontend exception handling in rx.App(frontend_exception_handler=None) and let Sentry take over. But an error occurred: ValueError: Provided custom frontend exception handler NoneType is not a function.

So, how can I integrate Sentry into Reflex? Such front-end debugging tools are too important for us. And we must report exception to Sentry in frontend.

Thank you very much for help!

[linear[bot]]

ENG-7295 Please provide a tutorial to help integrate Sentry to debug front-end exceptions.

[maximvlah]

@ChuanqiTan I recommend setting the frontend exception handler to:

def frontend_handler(exception: Exception) -> None:
  return

The frontend exception handler is supposed to funnel the frontend exceptions to the backend of the user needs it. In your case, sentry will send the logs directly to the server, so you can just mute it.

And then wrap sentry in a component https://reflex.dev/docs/wrapping-react/library-and-tags/

Which then you should add to the app:

app = rx.App(
  app_wraps= {(-1, "Sentry"): sentry_component()},
  frontend_exception_handler=frontend_handler
)

If you want to also setup sentry on backend, you should also initiate it in the app entrypoint and then capture exceptions in the backend exception handler. https://docs.sentry.io/platforms/python/

[benedikt-bartscher]

A better way would be to implement https://github.com/reflex-dev/reflex/issues/3776. Otherwise, errors are probably still forwarded to the backend, which is not efficient.

[maximvlah]

@benedikt-bartscher https://github.com/reflex-dev/reflex/pull/5703