1. 3

I’d like to adopt a client-side error reporting tool for our web application. Currently we only know about production errors when users complain, which sucks.

We use Datadog heavily for our server monitoring, but don’t necessarily need compatibility with that for the web client (but might be nice). I’ve never used client-side error reporting before, so I’m not really sure what features to look for. We probably don’t want to self-host, but would consider it.

Any platforms you could recommend, experiences you can share, or lessons learned?

Edited to add: We use a mix of React / ES6 with older Backbone and handlebars code.

  1.  

  2. 12

    We use a self-hosted Sentry for our front-ends (Ember and React) and also on the backend. Works perfectly with backtraces, number of user impacted, number of occurrences…

    1. 2

      Seconding Sentry. It’s one of those unambiguously good tools I would reach for every time. Would recommend hosted offering, it’s easy to use and not an issue.

      1. 1

        Another +1 for Sentry. It’s simple enough that I run an install for personal projects. Its ability to combine and dedupe similar bugs is the real killer feature.

        1. 1

          My company also uses sentry, but the hosted offering. Works well for our use case.

          1. 1

            Sentry works great. We host it ourselves and it’s been useful. But be careful to not let the number of errors creep up, because if it gets too bad you’ll just end up ignoring it :(

          2. 2

            I have previously used Raygun. It’s a cloud solution, but adding it to the front end took about 2 minutes and then it just works. Gives full stack traces, info about who is seeing the errors and how often. Worth the cost in my opinion.

            1. 1

              (Word to the wise: there is an actual ask tag on Lobsters, out of courtesy for those filtering it.)

              1. 2

                When I submitted the story I had that tag, and I got an error saying that the ask tag was redundant when “Ask” was in the title (or something to that effect).

                1. 2

                  Proof what @vosper said is true. I either didn’t know this about Lobsters or forgot it.

                2. 1

                  Rollbar treated us pretty well. Their query language was a bit wonky though.

                  1. 1

                    What did you find wonky about the query language? Was it that you couldn’t get the data you needed, or just that it was more difficult to use than you’d have liked?

                  2. 1

                    I’m currently using Rollbar in all my projects. It’s ok, but I did struggle a bit with their grouping algorithm, and their “fingerprinting” idea. In any case, it does everything I need it to do.

                    1. 1

                      Thanks, I wasn’t aware of their fingerprinting / grouping function. Was it difficult to get it working how you wanted it to?

                      1. 2

                        My first approach was to silence a particularly annoying error I kept seeing by filtering it in the JavaScript initialisation code. That didn’t work for some reason, so I ask their support channel. They came back to me with information about their custom fingerprinting, and actually took care of the implementation for me, which was super helpful of them.

                        They added this snippet under Settings > Custom Fingerprinting:

                        [
                          {
                            "condition": {
                              "all": [
                                {
                                  "eq": "TypeError", 
                                  "path": "body.trace.exception.class"
                                }, 
                                {
                                  "path": "body.trace.exception.message", 
                                  "startswith": "l.LegacyGlobal.should_do_lastpass_here is not a function. (In 'l.LegacyGlobal.should_do_lastpass_here(document)', 'l.LegacyGlobal.should_do_lastpass_here' is undefined)"
                                }
                              ]
                            }, 
                            "fingerprint": "group-item-36"
                          }
                        ]
                        
                    2. 0

                      Vaguely related is https://lobste.rs/s/kamzhf/guide_web_scraping_without_getting

                      The TL;DR is “Use Headless Chrome”.

                      1. 3

                        I’m not sure I see how headless chrome could help us to see the errors customers are experiencing when using our site? Could you please expand on that?

                        1. 0

                          I wouldn’t expect it to be an off the shelf tool for what you want, but I would expect it to be a component in such a tool which you may find off the shelf, and/or script yourself.

                          ie. You’d use it to script periodically use the site exactly in the same way your customers are (live, and while they are using it) and to report any failures.

                          1. 1

                            Ahh, I see. So, for example, we could capture a usage session and then automatically replay it to reproduce an error. It’s not quite what I’m looking for at the moment, but I like the idea of it. Maybe it could be a second stage after we’ve got basic error reporting sorted out. Thanks for the suggestion :)