Now you will be able to see the performance data in your Sentry project. This can help you identify slow code in production.

Conclusion

Sentry allows you to find and correct errors before users report them. You can receive real-time alerts when problems arise in production. Stack traces and browser data are displayed online in each issue, giving you an immediate starting point for resolution. The combination of Sentry with GitLab provides even tighter integration with the software development process. If you are already using GitLab for project management, adding Sentry integration allows you to manage alerts in GitLab and create GitLab issues for new Sentry errors. Peanut butter and jelly, donuts and coffee, Wendy’s Frosties and french fries — these combinations just work. We don’t ask why; we accept nature’s gift and enjoy. We hope you also accept and enjoy our gift of another great pair: Sentry and GitLab. In fact, Sentry and GitLab already go together so well that users who have installed this integration successfully resolve issues triaged in-platform 73% of the time. To give greater visibility into errors, we recently improved the GitLab integration by adding release and commit tracking as well as suspect commits. GitLab continued this effort in their newest release (11.7) by integrating Sentry directly into GitLab projects. The combination of both integrations provides a clear path to addressing errors contextually while remaining within your existing workflow. Streamline and shorten your workflow Let’s forget about days when error alerts sent you into a panicked spiral, toggling from tool to tool to see exactly what went wrong and where. Instead, let the combined power of Sentry and GitLab alleviate your alert-induced anxiety, while also streamlining your triaging process and shortening your time to issue resolution. Sounds nice, right? If you use both Sentry and GitLab, you can manage and create GitLab issues directly in the Sentry UI. Create a GitLab Issue in Sentry by adding the GitLab Project, Issue title, and Issue description. Link an existing GitLab Issue in a single step. (Okay, two steps, if you consider toggling to the Link tab. Actually, three steps, if you consider opening this modal as a step. Anyway, linking existing GitLab Issues is easy.) Find and fix bugs faster Our integration update added release and commit tracking, including an enhanced release overview page that highlights new and resolved issues, files changed, and authors. You can resolve issues via commit messages or pull requests, see suggested assignees for issues, and receive detailed deploy emails. With suspect commits, you’ll see the commit that likely introduced an error as well as the developer who is best equipped to work on it. Keep in mind that this feature is available for Sentry users on “Teams” plans and above. View errors in GitLab Projects GitLab is also contributing to visibility and efficiency efforts with their recent update. If you use both GitLab and Sentry, you can now see errors tracked by Sentry directly within your GitLab projects. Linking Sentry to GitLab is as simple as entering your Sentry API URL and Auth Token. Again, why toggle between tools when you can have everything you need in a single interface? By now you’re surely craving chicken and waffles, or milk and cookies, or maybe even shrimp and grits (or whatever your favorite combination happens to be today), and that’s fine because you’ve reached the end of this blog post. After your well-earned snack, we highly recommend that you check out the documentation for our GitLab integration as well at GitLab’s Sentry integration. Sentry is an error-tracking platform that lets you monitor issues in your production deployments. It supports most popular programming languages and frameworks. GitLab is a Git-based DevOps platform to manage the entire software development lifecycle. GitLab can integrate with Sentry to display captured errors. In this article, we’ll use the two services to stay ahead of issues in a React application.

Getting Set up

GitLab and Sentry both have self-hosted and SaaS options. The steps in this guide apply to both variants. We’ll assume that you’ve already got a React project ready to use in your GitLab instance. Log in to Sentry and click the “Create Project” button in the top-right corner. Click “React” under the “Choose a platform” heading. This lets Sentry tailor example code snippets to your project. Choose when to receive alerts using the options beneath “Set your default alert settings.” Select “Alert me on every new issue” to get an email each time an error is logged. The “When there are more than” option filters out noise created by duplicate events in a given time window. Give your project a name in the “Project name” field. Click “Create Project” to finish your setup.

Adding Sentry to Your Codebase

Now, you need to integrate Sentry with your React code. Add the Sentry library to your project’s dependencies using npm:

npm install @sentry/react

You’ll need to initialize Sentry as soon as possible in your app’s JavaScript. This gives Sentry visibility into errors that occur early in the React lifecycle. Add Sentry’s bootstrap script before your first ReactDOM.render() call. This is typically in index.js:

import App from "./App.js"; import React from "react"; import ReactDOM from "react-dom"; import * as Sentry from "@sentry/react";  Sentry.init({ dsn: "my-dsn" });  ReactDOM.render(<App />, document.getElementById("react"));

Replace my-dsn with the DSN that Sentry displays on your project creation screen. The DSN uniquely identifies your project so that the service can attribute events correctly.

Capturing Errors

Sentry will automatically capture and report unhandled JavaScript errors. Although it can’t prevent the crash, it lets you know that something’s gone wrong before the user report arrives. Here’s an example App.js:

import React from "react";  export default () => { const data = null; return data.map((val, key) => { <h2 key={key}>{val}</h2>; }); };

This code is broken—data is set to null, so the map property will be undefined. We try to call data.map() regardless so that the app will crash. You should see an issue show up in Sentry. Sentry issues include as much data about the error as possible. You can see the page URL as well as information about the user’s device. Sentry will automatically combine duplicate issues together. This helps you see whether an event was a one-off or a regular occurrence that’s impacting multiple users. Sentry automatically fetches JavaScript source maps when they’re available. If you’re using create-react-app, source maps are automatically generated by npm run build. Make sure that you copy them to your web server so that Sentry can find them. You’ll see pretty stack traces from the original source code instead of the obfuscated stack produced by the minified build output. You can mark Sentry errors as Resolved or Ignored once they’ve been dealt with. You’ll find these buttons below the issue’s title and on the Issues overview page. Use Resolved once you’re confident that an issue has been fixed. Ignored is for cases where you don’t intend to address the root cause. In React sites, this might be the case for errors caused by old browser versions.

Error Boundaries

React error boundaries let you render a fallback UI when an error is thrown within a component. Sentry provides its own error boundary wrapper. This renders a fallback UI and logs the caught error to Sentry.

import * as Sentry from "sentry";  export default () => { const data = null; return ( <Sentry.ErrorBoundary fallback={<h2>Something went wrong.</h2>}> { data.map((val, key) => { <h2 key={key}>{val}</h2>; }); } </Sentry.ErrorBoundary> ); };

Now, you can display a warning to users when an error occurs. You’ll still receive the error report in your Sentry project.

Adding GitLab Integration

There are two sides to integrating GitLab and Sentry. First, GitLab projects have an “Error Tracking” feature that displays your Sentry error list. You can mark errors as Resolved or Ignored from within GitLab. The second part involves connecting Sentry to GitLab. This lets Sentry automatically create GitLab issues when a new error is logged. Let’s look at GitLab’s Error Tracking screen first. You’ll need to create a Sentry API key. Click your username in the top left of your Sentry UI, and then the API Keys in the menu. Click “Create New Token” in the top-right corner. Add the following token scopes:

• alerts:read
• alerts:write
• event:admin
• event:read
• event:write
• project:read

This allows GitLab to read and update your Sentry errors. Next, head to your GitLab project. Click Settings in the side menu, and then Operations. Expand the “Error tracking” section. Paste your Sentry authentication token into the “Auth Token” field and press “Connect.” If you’re using a self-hosted Sentry instance, you’ll also need to adjust the “Sentry API URI” field to match your server’s URI. The “Project” dropdown will populate with a list of your Sentry projects. Select the correct project and press “Save changes.” You’re now ready to use Error Tracking in GitLab. Click Operations > Error Tracking in the left sidebar. You’ll see your Sentry error list. It’s filtered to Unresolved issues by default. This can be changed using the dropdowns in the top-right corner. Click an error to see its detailed stack trace without leaving GitLab. There are buttons to ignore, resolve, and convert to a GitLab issue. Once you’ve opened a GitLab issue, you can assign that item to a team member so that the bug gets resolved. Now, you can add the second integration component—a link from Sentry back to GitLab. Click Settings in your Sentry sidebar, and then Integrations. Find GitLab in the list and click the purple “Add Installation” button in the top-right corner. Click “Next” to see the setup information. Back on GitLab, click your user icon in the top-right corner, followed by “Preferences.” Click “Applications” in the left side menu and add a new application. Use the details shown by Sentry in the installation setup pop-up. GitLab will display an Application ID and Secret Key. Return to the Sentry pop-up and enter these values. Add your GitLab server URL (gitlab.com for GitLab SaaS) and enter the relative URL path to your GitLab group (e.g. my-group). The integration doesn’t work with personal projects. Click the purple Submit button to create the integration. Sentry will now be able to display GitLab information next to your errors. This includes the commit that introduced the error, and stack traces that link back to GitLab files. Sentry users on paid plans can associate GitLab and Sentry issues with each other.

Disabling Sentry in Development

You won’t necessarily want to use Sentry when running your app locally in development. Don’t call Sentry.init() if you want to run with Sentry disabled. You can check for the presence of a local environment variable and disable Sentry if it’s set.

if (process.env.NODE_ENV === "production") { Sentry.init({ dsn: "my-dsn" }); }

NODE_ENV is set automatically by create-react-app. Production builds hardcode the variable to production. You can use this to selectively enable Sentry.

Enabling Performance Profiling

Sentry can also profile your app’s browser performance. Although this isn’t the main focus of this article, you can set up tracing with a few extra lines in your Sentry library initialization:

npm install @sentry/tracing

import {Integrations} from "@sentry/tracing";  Sentry.init({ dsn: "my-dsn", integrations: [new Integrations.BrowserTracing()], tracesSampleRate: 1.0 });

Now, you’ll be able to see performance data in your Sentry project. This can help you identify slow-running code in production.

Conclusion

Sentry lets you find and fix errors before users report them. You can get real-time alerts as problems arise in production. Stack traces and browser data are displayed inline in each issue, giving you an immediate starting point for resolution. Combining Sentry with GitLab provides even tighter integration with the software development process. If you’re already using GitLab for project management, adding the Sentry integration lets you manage alerts within GitLab and create GitLab issues for new Sentry errors. READ NEXT

• › AMD’s New RX 7000 GPUs Are Really Good and Really Cheap
• › How to Sign Out of Google on All Your Devices
• › How to Use Microsoft Excel Templates for Event Planning
• › Astronomers Discover Closest Black Hole to Earth (Which is Still Far)
• › How to Remove Followers on Instagram
• › Get Ready to See Popup Tips on Your Windows 11 Taskbar

• How to whiten your teeth with banana peel
• How to make coca cola icees at home
• How to use wire strippers
• How to disinfect gardening tools
• How to bypass web restrictions