feat(editor): Setup Sentry integration (#10945)

packages/editor-ui/index.html

@@ -9,6 +9,7 @@
 			window.BASE_PATH = '/{{BASE_PATH}}/';
 			window.REST_ENDPOINT = '{{REST_ENDPOINT}}';
 		</script>
+		<script src="/{{REST_ENDPOINT}}/sentry.js"></script>
 		<script>!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag onFeatureFlags reloadFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[])</script>
 
 		<title>n8n.io - Workflow Automation</title>

packages/editor-ui/package.json

@@ -38,6 +38,7 @@
     "@n8n/codemirror-lang": "workspace:*",
     "@n8n/codemirror-lang-sql": "^1.0.2",
     "@n8n/permissions": "workspace:*",
+    "@sentry/vue": "^8.31.0",
     "@vue-flow/background": "^1.3.0",
     "@vue-flow/controls": "^1.1.1",
     "@vue-flow/core": "^1.33.5",
@@ -83,7 +84,7 @@
     "@faker-js/faker": "^8.0.2",
     "@iconify/json": "^2.2.228",
     "@pinia/testing": "^0.1.3",
-    "@sentry/vite-plugin": "^2.5.0",
+    "@sentry/vite-plugin": "^2.22.4",
     "@types/dateformat": "^3.0.0",
     "@types/file-saver": "^2.0.1",
     "@types/humanize-duration": "^3.27.1",

packages/editor-ui/src/api/events.ts

@@ -0,0 +1,6 @@
+import type { IRestApiContext } from '@/Interface';
+import { makeRestApiRequest } from '@/utils/apiUtils';
+
+export async function sessionStarted(context: IRestApiContext): Promise<void> {
+	return await makeRestApiRequest(context, 'GET', '/events/session-started');
+}

packages/editor-ui/src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
+import * as Sentry from '@sentry/vue';
 
 import '@vue-flow/core/dist/style.css';
 import '@vue-flow/core/dist/theme-default.css';
@@ -34,6 +35,11 @@ const pinia = createPinia();
 
 const app = createApp(App);
 
+if (window.sentry?.dsn) {
+	const { dsn, release, environment } = window.sentry;
+	Sentry.init({ app, dsn, release, environment });
+}
+
 app.use(TelemetryPlugin);
 app.use(PiniaVuePlugin);
 app.use(I18nPlugin);

packages/editor-ui/src/shims.d.ts

@@ -1,6 +1,7 @@
 import type { VNode, ComponentPublicInstance } from 'vue';
 import type { PartialDeep } from 'type-fest';
 import type { ExternalHooks } from '@/types/externalHooks';
+import type { FrontendSettings } from '@n8n/api-types';
 
 export {};
 
@@ -17,6 +18,7 @@ declare global {
 	interface Window {
 		BASE_PATH: string;
 		REST_ENDPOINT: string;
+		sentry?: { dsn?: string; environment: string; release: string };
 		n8nExternalHooks?: PartialDeep<ExternalHooks>;
 		preventNodeViewBeforeUnload?: boolean;
 		maxPinnedDataSize?: number;

packages/editor-ui/vite.config.mts

@@ -93,13 +93,13 @@ if (release && authToken) {
 		sentryVitePlugin({
 			org: 'n8nio',
 			project: 'instance-frontend',
-			// Specify the directory containing build artifacts
-			include: './dist',
 			// Auth tokens can be obtained from https://sentry.io/settings/account/api/auth-tokens/
 			// and needs the `project:releases` and `org:read` scopes
 			authToken,
 			telemetry: false,
-			release,
+			release: {
+				name: release,
+			},
 		}),
 	);
 }