Sentry integration

I’m trying to integrate Sentry into my theia application using this guide, however I’m not sure where to put the initialisation code so that it is configured as early as possible in my application’s lifecycle. By the looks of it, the correct place might be main.js or server.js the browser-app/src-gen/backend, but they are generated sources.

Correct. The best thing you can do at the moment is to manually modify your build steps in the package.json and patch the modules at build time. The Theia CLI will be looking for main.js, if I remember correctly.

package.json

// rest
"scripts": {
  "build": "theia build --mode development && yarn patch", <--- you change this and call your patch script.
  "patch": "mv ./path/to/main.js ./path/to/theia-main.js && mv ./path/to/your-main.js ./path/to/main.js",
}

your-main.js:

import * as Sentry from "@sentry/node";
import * as Tracing from "@sentry/tracing";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

// Here you require the original main.js that is now theia-main.js
require('./theia-main.js');

In the end, these are jus files on the FS and you can hack with the modules. I hope you get the idea. It should work, I usually do this.

If anyone has a better idea, please let me know :slight_smile:

This worked great. Now I’d like to put Sentry in my frontend as well. Unfortunatey, the frontend files get built into bundle.js during theia build --mode development before I have a chance to patch them with the && yarn patch part. Any suggestions?

I haven’t done that part before; I do not know a working solution off the top of my head, but maybe it is possible to customize the webpack.config.js. There are two files generated for the FE: gen-webpack.config.js (is the generated one, do not touch it) and webpack.config.js is for further customization. You can try to tweak the latter one and maybe change the entry (which is path.resolve(__dirname, 'src-gen/frontend/index.js') by default). I hope this helps.