Capture Your First Error

Now that the sample app is up and running on your local environment integrated with the Sentry SDK, you're ready to generate the first error.

To start using Sentry's error monitoring feature, you need some errors first. Let's add in an obvious error that will be easy to see in Sentry.

If you're using your own source code, skip this step. Instead, select your platform and follow its Verify step inside the Getting Started guide to introduce an error.

  1. Open src/components/App.js and uncomment line 97.

    src/components/App.js
    Copied
    this.myCodeIsPerfect();
    

    The function myCodeIsPerfect() isn't defined, so this will throw an error.

  2. Save the file.

  3. Refresh your browser and open the browser developer console.

    The app is running in develop mode, so the change to your app should work after a refresh. You shouldn't see any errors in the console yet.

  4. Click on any of the "Buy!"" buttons to add products to your shopping cart.

  5. Click the "Checkout" button on the right panel to generate an error.

    Notice that:

    • An error message "Something went wrong" displays in the app.

    • The error appears in the browser console.

      Import and Configure SDK

    • An alert is sent to your email address configured on Sentry notifying you about an error that occurred in your app.

      Alert Email

Now that you've triggered an error, let's see what it looks like in Sentry.

  1. Open the Issues page in Sentry.io. Make sure your project is selected in the projects dropdown.

  2. Select the error from the issues list to to view the full details and context of this error.

    Note that Sentry aggregates similar errors (events) into one Issue. If you trigger this error multiple times, you won't see more issues appear. Instead, you'll see the number of events for that issue increase.

  3. On the Issue Details page, scroll down to the stack trace.

    Notice that the stack trace is minified. JavaScript is typically minified to reduce to the size of the source code. This means you can't see the actual lines of code from your app in the stack trace.

    With a little configuration, Sentry can unminify your code back to its readable form and display your source code in each stack frame. You'll set this up in the next section.

The animated gif below walks through how to view error details in Sentry.

At this point, you've verified that Sentry is monitoring errors for your app. So you know there's an issue, but where do you go to fix it? In the next section, you'll learn how to Enable Readable Stack Traces in Your Errors so Sentry can show you exactly which line in which file is causing the issue.

Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").