Ember
Learn how to set up Sentry in your Ember application and capture your first errors.
You need:
Run the command for your preferred package manager to add the Sentry SDK to your application:
ember install @sentry/ember
Choose the features you want to configure, and this guide will show you how:
Configuration should happen as early as possible in your application's lifecycle. Add the following to your app/app.js file:
app.jsimport Application from "@ember/application";
import Resolver from "ember-resolver";
import loadInitializers from "ember-load-initializers";
import config from "./config/environment";
import * as Sentry from "@sentry/ember";
Sentry.init({
dsn: "___PUBLIC_DSN___",
// Adds request headers and IP for users, for more info visit:
// https://docs.sentry.io/platforms/javascript/guides/ember/configuration/options/#sendDefaultPii
sendDefaultPii: true,
// ___PRODUCT_OPTION_START___ session-replay
Sentry.replayIntegration(),
// ___PRODUCT_OPTION_START___ user-feedback
Sentry.feedbackIntegration({
// Additional SDK configuration goes in here, for example:
colorScheme: "system",
}),
// ___PRODUCT_OPTION_END___ user-feedback
// ___PRODUCT_OPTION_END___ session-replay
// ___PRODUCT_OPTION_START___ logs
// Enable logs to be sent to Sentry
enableLogs: true,
// ___PRODUCT_OPTION_END___ logs
// ___PRODUCT_OPTION_START___ performance
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
// Learn more at
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
tracesSampleRate: 1.0,
// ___PRODUCT_OPTION_END___ performance
// ___PRODUCT_OPTION_START___ session-replay
// Capture Replay for 10% of all sessions,
// plus for 100% of sessions with an error
// Learn more at
// https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
// ___PRODUCT_OPTION_END___ session-replay
});
export default class App extends Application {
modulePrefix = config.modulePrefix;
podModulePrefix = config.podModulePrefix;
Resolver = Resolver;
}
The stack traces in your Sentry errors probably won't look like your actual code without unminifying them. To fix this, upload your source maps to Sentry. The easiest way to do this is by using the Sentry Wizard:
npx @sentry/wizard@latest -i sourcemaps
You can prevent ad blockers from blocking Sentry events using tunneling. Use the tunnel option to add an API endpoint in your application that forwards Sentry events to Sentry servers.
To enable tunneling, update Sentry.init with the following option:
Sentry.init({
dsn: "___PUBLIC_DSN___",
tunnel: "/tunnel",
});
This will send all events to the tunnel endpoint. However, the events need to be parsed and redirected to Sentry, so you'll need to do additional configuration on the server. You can find a detailed explanation on how to do this on our Troubleshooting page.
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your templates, which will trigger an error that Sentry will capture when you click it:
application.hbs
<button type="button" >
Test Sentry Error
</button>
Next, add the corresponding action to your controller or component:
application.jsimport Controller from "@ember/controller";
import { action } from "@ember/object";
export default class ApplicationController extends Controller {
@action
throwTestError() {
throw new Error("Sentry Test Error");
}
}
Open the page in a browser and click the button to trigger a frontend error.
Important
Errors triggered from within your browser's developer tools (like the browser console) are sandboxed, so they will not trigger Sentry's error monitoring.
To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes to execute your code:
application.jsimport Controller from "@ember/controller";
import { action } from "@ember/object";
import * as Sentry from "@sentry/ember";
export default class ApplicationController extends Controller {
@action
throwTestError() {
Sentry.startSpan({ op: "test", name: "Example Span" }, () => {
setTimeout(() => {
throw new Error("Sentry Test Error");
}, 99);
});
}
}
Open the page in a browser and click the button to trigger a frontend error and a trace.
Now, head over to your project on Sentry.io to view the collected data (it takes a couple of moments for the data to appear).
At this point, you should have integrated Sentry into your Ember application and should already be sending data to your Sentry project.
Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:
- Learn how to manually capture errors
- Continue to customize your configuration
- Get familiar with Sentry's product features like tracing, insights, and alerts
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").