Capture Your First Error

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

Step 1: Capture your first event

  1. Launch the demo app by opening the localhost link in your browser.

  2. Open the browser's "Console" to verify that an error has occurred.

    Import and Configure SDK

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

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

    Import and Configure SDK

    Notice that:

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

    • The error appears in the browser console

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

      Import and Configure SDK

Step 2: Handle the error

  1. Go to your email and open the notification from Sentry.

    Import and Configure SDK

  2. Click "View on Sentry" to view the full details and context of this error in your Sentry account.

    Import and Configure SDK

    Note that Sentry aggregates similar errors (events) into one issue.

  3. In your account, scroll down to the "Exception" stack trace.

    Error Stack-trace

    • Notice that the stack trace is minified. JavaScript is typically minified to reduce to the size of the source code.
    • Sentry can unminify the code back to its readable form and display source (code) context lines in each stack frame, which is covered in the next section.


Enable Readable Stack Traces in Your Errors

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