Error Tracking

Sentry - error tracking solution that helps devs monitor and fix crashes in Hub.

Sentry for different Hub versions

All the information on this guide refers to the React apps. To add Sentry to a Hub v1 apps, refer to the login with Hub v1 guide

Installation#

Verify setup by installing the Sentry SDK as a dependency using npm

npm install @sentry/react

License and Permissions#

Request credentials to create Sentry Project and get DSN to complete configuration

To get credentials contact ITSupport helpdesk@iqmetrix.freshservice.com

Dev should have access to Sentry dashboard and have permissions to create a Project.

Sentry Project#

After dev is invited to Sentry, go to Projects > Create Project

Create Project

Copy the newly created Project Data Source Name (DSN) for further use, which contains: protocol, public key server address, and project identifier: {dsn: "https://(key)@sentry.io/(project_identifier)'}

Sentry Releases#

Releases in Sentry allow you to track commits, issues, and debug with greater ease (among other great features). This feature is opt-in and will require minimal setup. In order to use this feature, you must:

Initialize Sentry with your release name of {package.json name}@{package.json version} e.g. hubendlessaisle@2.33.2. See below
Add the Sentry project name into your azure-piplines.yml that matches with the DSN you initialize Sentry with.

The pipeline will automatically create the Release in Sentry, upload source maps and associate commits to that release. Your application code will associate any logging and error tracking with that release for greater visibility on any issues.

Initializing Sentry in React Hub app#

Init Sentry browser

import * as Sentry from '@sentry/react';
import packageJson from "../package.json";

// Simple setup
Sentry.init({dsn: <key>@sentry.io/<project_identifier>});

// Setup with Sentry Releases
Sentry.init({
  dsn: <key>@sentry.io/<project_identifier>,
  release: `${packageJson.name}@${packageJson.version}`
});

We use @iqmetrix/get-environment in our front-end code, a function that gets the environment at run-time.

Init Sentry

import getEnvironment from "@iqmetrix/get-environment";

getEnvironment().then(function (env) {
  Sentry.configureScope((scope) =>
    scope.addEventProcessor(
      (event) =>
        new Promise((resolve) =>
          resolve({
            ...event,
            environment: env,
          })
        )
    )
  );
});

Environment Variables

Wrap the <App /> with Error Boundaries component, with fallback being whatever component you want to show the user when an unexpected error occurs.

import { Result } from "@iqmetrix/antd";
import React from "react";
import * as Sentry from "@sentry/react";

export const ErrorBoundary: React.FC = (props) => {
  return (
    <Sentry.ErrorBoundary
      fallback={(error: Error) => {
        // Whatever error page you want goes here
        <Result response={error.message} />;
      }}
    >
      {props.children}
    </Sentry.ErrorBoundary>
  );
};

Trigger your first event from your development environment by raising an exception somewhere within your application

<button onClick={() =>{throw new Error("The world broke")})}>Break the world</button>

Test

Additional information can be found here

Configuration#

SDKs are configurable in many ways.

denyUrls#

By adding denyUrls to the Sentry config we can define urls (a list of strings or regex patterns) that we don't want to track. By default, all errors will be sent. For example we don't necessarily want to track errors happening on localhost.

const DENY_LIST_URLS: string[] = ["localhost"];

Sentry.init({
  environment: process.env.NODE_ENV,
  dsn: process.env.REACT_APP_SENTRY_DSN,
  denyUrls: DENY_LIST_URLS,
});

Sentry for different Hub versions

Installation#

License and Permissions#

Sentry Project#

Sentry Releases#

Initializing Sentry in React Hub app#

Configuration#

denyUrls#

Reference#