Proactive monitoring with Angular and Datadog

Being proactive is essential for any application whether that concerns the API, the web or mobile application. You can capture errors as they happen, with zero involvement from application users. Then of course you can work to fix the error, contact end users or whatever might seem appropriate on each case.

As part of this article we examine how we can setup proactive monitoring using Angular 12 and Datadog, by following two different approaches. The implementation should be similar for React and Vue and of course this can be adjusted to use Sentry or any other Datadog alternative.

Datadog is mostly popular as a cloud and infrastructure monitoring but it can be also used as a centralized logging platform. Personally I find that you get better application insights when you combine infrastructure and application logs into one platform.

Before getting started, you will need to install @datadog/browser-logs.

npm i @datadog/browser-logs

Using forwardErrorsToLogs

The easier way to get started is to initialize Datadog with forwardErrorsToLogs enabled for production, or any non-dev environment. With this approach you will be forwarding error logs to datadog, on top of outputting the errors in console.

As you can tell this approach is not Angular specific. Nevertheless here is how this can be done in any Angular project.

However, there is a main downside with this approach — there is no control over to what happens behind the scenes. For example, it is not possible to forward a warning message, or include extra details in context or even scrub sensitive data.

Also to make that work, the datadog library overwrites console.error which might have side effects if any other package does the same.

Using Logger service

Another approach is to wrap Datadog into a Logger service which we can inject later on via Dependency Injection. There are a few benefits with the approach. Firstly, we can now forward any type of messages, not only errors. Secondly, the Datadog dependency is well hidden from the rest of the application. Last, but not least, we can provide a default implementation when Datadog configuration is not available.

The same service can be used in a custom error handler that intercepts error handling to capture errors and forward them to Datadog. Note that the default implementation of ErrorHandler prints error messages to the console.

With the above in place, you should be able to forward custom error messages to Datadog. As mentioned before, the Logger service can be extended to include environment and other context details that are helpful when troubleshooting.

Conclusion

As part of this article we covered two ways of integrating your Angular project with Datadog. Doing so it will allow you to view errors as they happen in Datadog. Combine that with infrastructure/API logs and automated notifications or metrics and you should a basic but yet robust system for proactive monitoring.

Make sure to follow me on dev.to, Medium or Twitter to read more about Angular and other dev topics