All Articles

Monitoring a Sitecore JSS website with Sentry

  • Sentry is a developer-first error tracking and performance monitoring platform that helps developers see what matters, solve quicker, and continuously learn about their applications.
  • It offers SDKs for 108 platforms including JavaScript(Browser/Node.js), React, .NET, Java, and Next.js.
  • is open-source. Refer
  • Offers integration with popular platforms like Slack, Teams, etc. for monitoring.

Integrating Sitecore JSS with Sentry

Sentry does not have a specific integration for Sitecore JSS. However, we can integrate a Sitecore JSS application with the front-end technology we choose, which could be Angular/React/.NET Core/Next.js etc. In this example, I will be integrating a Sitecore JSS with Next.js solution with Sentry.


  • The SDK can be installed by the installation wizard which can be run by the below CLI command: npx @sentry/wizard@latest -i nextjs
  • The wizard will prompt you to log in to Sentry.
  • It will install the SDK and create the config files needed for you.
  • It will also add an example page to raise an error.
  • This setup will automatically catch the errors in your application.

For adding custom information to the logs, that are specific to Sitecore can be made as below:

  • Import Sentry from @sentry/nextjs.

    import * as Sentry from "@sentry/nextjs";
  • Add the below lines to your [[…path]].tsx file, exactly before you return the component defintion.

Sentry.setContext("jss-sitecore-page", {
  isEditing: isEditing,
  renderingType: layoutData?.sitecore?.context?.renderingType,
  dataBaseName: layoutData?.sitecore?.route?.databaseName,
  site: layoutData?.sitecore?.context?.site,
  language: layoutData?.sitecore?.context?.language,
  path: layoutData?.sitecore?.route?.name,
// Add the above lines before the return statement
return (
  <ComponentPropsContext value={componentProps}>
      componentFactory={isEditing ? editingComponentFactory : componentFactory}
          Sitecore Pages supports component rendering to avoid refreshing the entire page during component editing.
          If you are using Experience Editor only, this logic can be removed, Layout can be left.
      {isComponentRendering ? (
        <EditingComponentPlaceholder rendering={layoutData.sitecore.route} />
      ) : (
        <Layout layoutData={layoutData} />
  • In your middleware, or in this example the normal-mode plugin. Add a try/catch block in the exec method. And, add the below lines:

    try {
      const path = extractPath(context.params);
      const sitecoreContext = props?.layoutData?.sitecore?.context;
        category: "site_name",
        message: sitecoreContext?.site?.name,
      Sentry.configureScope((scope) => {
        scope.setTag("page_mode", "normal");
        scope.setTag("site", sitecoreContext?.site?.name);
        scope.setTag("language", sitecoreContext?.language);
        scope.setExtra("item_path", path);
        scope.setExtra("item_id", props?.layoutData?.sitecore?.route?.itemId);
      // Rest of your code here
    } catch (err) {
      Sentry.configureScope((scope) => {
        scope.setTag("page_mode", "normal");
        scope.setTag("site", props?.layoutData?.sitecore?.context?.site?.name);
        scope.setTag("language", props?.layoutData?.sitecore?.context?.language);
        scope.setExtra("item_path", extractPath(context?.params));
        scope.setExtra("item_id", props?.layoutData?.sitecore?.route?.itemId);
      return props;

I have also pushed the source code to my github repository: Sitecore.JSS.NextJs.Sentry

Sentry vs Azure Application Insights



Published Nov 26, 2023

Sitecore MVP Technology 2024-23. Web Developer with rich experience in Sitecore and ASP.NET MVC.