Support for Analog

[Lms24]

Hi everyone,

this discussion serves as a first measure for us to gauge interest in Sentry support for Analog.js. If you want to see Sentry supporting Analog (in some capacity), please upvote this discussion.

Analog support can come in various stages, as for example:

1. We start with collecting ideas and code snippets how to use current SDKs (@sentry/angular, @sentry/node) in an Analog application in this discussion
2. We create a guide how to use Analog with current SDKs in our docs
3. We create a dedicated SDK for Analog

Importantly, this discussion does not guarantee that we'll do any of these things. It's merely a starting point and a way for us and the community to exchange ideas.

Please also feel free to share your experience how you are using Sentry in Analog applications and what challenges you encountered. Thanks!

[Lms24]

Some early pointers from my experience with a small Analog starter app:

Feel free to check out my repository: https://github.com/Lms24/sentry-analog-test-app

Client-side

Using @sentry/angular, including the browserTracingIntegration based on the Angular router works decently well. Initialized the SDK in main.ts and app.config.ts. Basically, I just followed our Angular docs.

Server-side

Created an instrumentation.mj file with a typical Sentry.init call and started Analog via

node --import ./instrument.server.mjs ./dist/analog/server/index.mjs

Source Maps

Using @sentry/vite-plugin to upload source maps works but there are several gotchas to enabling source map generation.
Client side, enable sourcemaps in angular.json:

     {
       "projects": {
          "my-app": {
            "architect": {
              "build": {
                "configurations": {
                   "production": {
                     "sourcemap": true,
                  }
                }
              }
            }
         }
       }
     } 

Server side, enable source maps in vite.config.ts:

export default defineConfig(({ mode }) => ({
  build: {
    sourcemap: true, // <-- should also work with 'hidden'
  },
  plugins: [
    analog({
      nitro: {
        rollupConfig: {
          output: {
            sourcemapExcludeSources: false, // <-- this is important
          },
        },
      },
    }),
  ],
}));

For reasons beyond my understanding, Nitro sets sourcemapExcludeSources to true by default, so it's important this is reset explicitly.

Known issue: Server-side errors not captured by Sentry

With the setup above, Nitro still swallows many server-side errors that our Node SDK can't catch by default. We solved this in our Nuxt and SolidStart SDKs by adding a Nitro plugin automatically. For Analog, you'll need to do this manually. I haven't tested this yet but you need to register a plugin in your nitro config in Vite:

  plugins: [
    analog({
      nitro: {
        plugins: ['plugins/sentryErrors.ts'],
      },
    }),
  ],

then add the plugin to Add the plugin in src/server/plugins/sentryErrors.ts

then add code to the plugin, similar to our the example in our Nuxt SDK (you likely don't need all of this code but it's a good starting point. Feel free to share your results)

Known issue: Some errors aren't source-mapped

We've received reports around some errors not being source mapped correctly, even with all the source maps options enabled as shown above. At this time, we believe this is a Nitro or Analog issue and, in turn, something we cannot fix unfortunately. Please open an issue in the Analog repository if you want to see this fixed.