How to catch all JavaScript errors and send to server?

Server logs are well managed ELK (Elastic, Logstash, and Kibana) stack. ELK is an established stack that is in the industry for quite a long time now.

In the case of browser error logs or more specifically browser’s JavaScript error logs, things are not yet standard. There is no established stack for this. In some cases, we may need the client error logs to know what’s going with the user’s browser.

We have explored the service called Sentry to collect browser logs and load them in a dashboard. We found it promising and easy to use in the JavaScript stack.

In our ReactJS based application, we have used Sentry to collect logs and log the dashboard. Our experience was very positive. Following is the implementation:

Add the dependencies

# Using npm
npm install --save @sentry/react @sentry/tracing
# Using yarn
yarn add @sentry/react @sentry/tracing

Init Sentry

import React from "react";
import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import App from "./App";

Sentry.init({
  dsn: "Get the DNS URL after creating the sentry account",
  integrations: [new Integrations.BrowserTracing()],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

ReactDOM.render(, document.getElementById("root"));