diff --git a/src/vs/gitpod/browser/workbench/workbench-dev.html b/src/vs/gitpod/browser/workbench/workbench-dev.html
index 58651bc6c63d9..e5f2ea962cd23 100644
--- a/src/vs/gitpod/browser/workbench/workbench-dev.html
+++ b/src/vs/gitpod/browser/workbench/workbench-dev.html
@@ -2,6 +2,104 @@
 <!DOCTYPE html>
 <html>
 	<head>
+		<script>
+			function getMetricsUrl() {
+				const gitpodHost = "{{GITPOD_HOST}}";
+				if (!gitpodHost) {
+					return '';
+				}
+				return `https://ide.${gitpodHost}/metrics-api`;
+			}
+			const workspaceId = 'fake-workspace-id'
+			const ideMetricsUrl = getMetricsUrl()
+			async function gitpodMetricsAddCounter(metricsName, labels, value) {
+				try {
+					if (!ideMetricsUrl) {
+						return false;
+					}
+					const url = `${ideMetricsUrl}/metrics/counter/add/${metricsName}`;
+					const params = { value, labels };
+					const response = await fetch(url, {
+						method: 'POST',
+						body: JSON.stringify(params),
+						credentials: 'omit',
+					});
+					if (!response.ok) {
+						const data = await response.json(); // { code: number; message: string; }
+						console.error(`Cannot report metrics with addCounter: ${response.status} ${response.statusText}`, data);
+						return false;
+					}
+					return true;
+				} catch (err) {
+					console.error('Cannot report metrics with addCounter, error:', err);
+					return false;
+				}
+			}
+
+			async function gitpodMetricsReportError(error, properties) {
+				try {
+					if (!ideMetricsUrl) {
+						return false;
+					}
+					const p = Object.assign({}, properties)
+					p.error_name = error.name
+					p.error_message = error.message
+					const url = `${ideMetricsUrl}/reportError`;
+					// TODO: Add quality as a params
+					const params = {
+						errorStack: error.stack ?? String(error),
+						component: "vscode-workbench",
+						version: "{{VERSION}}",
+						workspaceId: workspaceId,
+						properties: p,
+					};
+					const response = await fetch(url, {
+						method: 'POST',
+						body: JSON.stringify(params),
+						credentials: 'omit',
+					});
+					if (!response.ok) {
+						const data = await response.json();
+						console.error(`Cannot report error: ${response.status} ${response.statusText}`, data);
+						return false;
+					}
+					return true;
+				} catch (err) {
+					console.error("Cannot report error, error:", err);
+					return false;
+				}
+			}
+
+			// sum(rate(gitpod_vscode_web_load_total{status='failed'}[2m]))/sum(rate(gitpod_vscode_web_load_total{status='loading'}[2m]))
+			const gitpodVSCodeWebLoadTotal = 'gitpod_vscode_web_load_total';
+			gitpodMetricsAddCounter(gitpodVSCodeWebLoadTotal, { status: 'loading' });
+			let hasVscodeWebLoadFailed = false;
+			const onVsCodeWorkbenchError = (event) => {
+				if (!hasVscodeWebLoadFailed) {
+					gitpodMetricsAddCounter(gitpodVSCodeWebLoadTotal, { status: 'failed' });
+					hasVscodeWebLoadFailed = true;
+				}
+
+				if (typeof event?.target?.getAttribute !== 'function') {
+					gitpodMetricsAddCounter('gitpod_supervisor_frontend_error_total');
+					return;
+				}
+				const labels = {};
+
+				// We take a look at what is the resource that was attempted to load;
+				const resourceSource = event.target.getAttribute('src') || event.target.getAttribute('href');
+
+				// If the event has a `target`, it means that it wasn't a script error
+				if (resourceSource) {
+					labels['resource'] = 'vscode-web-workbench';
+					labels['error'] = 'LoadError';
+					gitpodMetricsReportError(new Error("LoadError"), { resource: labels['resource'], url: resourceSource })
+				} else {
+					labels['error'] = 'Unknown';
+				}
+				gitpodMetricsAddCounter('gitpod_supervisor_frontend_error_total', labels);
+			};
+		</script>
 		<script>
 			performance.mark('code/didStartRenderer')
 		</script>
@@ -34,8 +132,8 @@
 	</body>
 
 	<!-- Startup (do not modify order of script tags!) -->
-	<script src="{{WORKBENCH_WEB_BASE_URL}}/out/vs/loader.js"></script>
-	<script src="{{WORKBENCH_WEB_BASE_URL}}/out/vs/webPackagePaths.js"></script>
+	<script src="{{WORKBENCH_WEB_BASE_URL}}/out/vs/loader.js" onerror="onVsCodeWorkbenchError(event)" crossorigin="anonymous"></script>
+	<script src="{{WORKBENCH_WEB_BASE_URL}}/out/vs/webPackagePaths.js" onerror="onVsCodeWorkbenchError(event)" crossorigin="anonymous"></script>
 	<script>
 		const baseUrl = new URL('{{WORKBENCH_WEB_BASE_URL}}', window.location.origin).toString();
 		Object.keys(self.webPackagePaths).map(function (key, index) {
@@ -65,6 +163,6 @@
 		performance.mark('code/willLoadWorkbenchMain');
 	</script>
 	<script>
-		require(['vs/gitpod/browser/workbench/workbench'], function() {});
+		require(['vs/gitpod/browser/workbench/workbench'], () => {});
 	</script>
 </html>
diff --git a/src/vs/gitpod/browser/workbench/workbench.html b/src/vs/gitpod/browser/workbench/workbench.html
index 075e75149ba4d..ba4e8c59d0853 100644
--- a/src/vs/gitpod/browser/workbench/workbench.html
+++ b/src/vs/gitpod/browser/workbench/workbench.html
@@ -3,33 +3,37 @@
 <html>
 	<head>
 		<script>
-			async function gitpodMetricsAddCounter(metricsName, labels, value) {
-				function getMetricsUrl() {
-					const baseWorkspaceIDRegex = '(([a-f][0-9a-f]{7}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})|([0-9a-z]{2,16}-[0-9a-z]{2,16}-[0-9a-z]{8,11}))';
-					// this pattern matches URL prefixes of workspaces
-					const workspaceUrlPrefixRegex = RegExp(`^([0-9]{4,6}-)?${baseWorkspaceIDRegex}\\.`);
-					const url = new URL(window.location.href);
-					url.search = '';
-					url.hash = '';
-					url.pathname = '';
-					if (url.host.match(workspaceUrlPrefixRegex)) {
-						url.host = url.host.split('.').splice(2).join('.');
-					} else {
-						return;
-					}
-					const hostSegments = url.host.split('.');
-					if (hostSegments[0] !== 'ide') {
-						url.host = 'ide.' + url.host;
-					}
-					url.pathname = '/metrics-api';
-					return url.toString();
+			let workspaceId = null;
+			let ideMetricsUrl = null;
+			(() => {
+				const baseWorkspaceIDRegex = '(([a-f][0-9a-f]{7}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})|([0-9a-z]{2,16}-[0-9a-z]{2,16}-[0-9a-z]{8,11}))';
+				// this pattern matches URL prefixes of workspaces
+				const workspaceUrlPrefixRegex = RegExp(`^([0-9]{4,6}-)?${baseWorkspaceIDRegex}\\.`);
+				const url = new URL(window.location.href);
+				url.search = '';
+				url.hash = '';
+				url.pathname = '';
+				const result = url.host.match(workspaceUrlPrefixRegex);
+				if (result) {
+					workspaceId = result[4]
+					url.host = url.host.split('.').splice(2).join('.');
+				} else {
+					return;
+				}
+				const hostSegments = url.host.split('.');
+				if (hostSegments[0] !== 'ide') {
+					url.host = 'ide.' + url.host;
 				}
+				url.pathname = '/metrics-api';
+				ideMetricsUrl = url.toString()
+			})();
+
+			async function gitpodMetricsAddCounter(metricsName, labels, value) {
 				try {
-					const metricsUrl = getMetricsUrl();
-					if (!metricsUrl) {
+					if (!ideMetricsUrl) {
 						return false;
 					}
-					const url = `${metricsUrl}/metrics/counter/add/${metricsName}`;
+					const url = `${ideMetricsUrl}/metrics/counter/add/${metricsName}`;
 					const params = { value, labels };
 					const response = await fetch(url, {
 						method: 'POST',
@@ -48,7 +52,50 @@
 				}
 			}
 
+			async function gitpodMetricsReportError(error, properties) {
+				try {
+					if (!ideMetricsUrl) {
+						return false;
+					}
+					const p = Object.assign({}, properties)
+					p.error_name = error.name
+					p.error_message = error.message
+					const url = `${ideMetricsUrl}/reportError`;
+					// TODO: Add quality as a params
+					const params = {
+						errorStack: error.stack ?? String(error),
+						component: "vscode-workbench",
+						version: "{{VERSION}}",
+						workspaceId: workspaceId,
+						properties: p,
+					};
+					const response = await fetch(url, {
+						method: 'POST',
+						body: JSON.stringify(params),
+						credentials: 'omit',
+					});
+					if (!response.ok) {
+						const data = await response.json();
+						console.error(`Cannot report error: ${response.status} ${response.statusText}`, data);
+						return false;
+					}
+					return true;
+				} catch (err) {
+					console.error("Cannot report error, error:", err);
+					return false;
+				}
+			}
+
+			// sum(rate(gitpod_vscode_web_load_total{status='failed'}[2m]))/sum(rate(gitpod_vscode_web_load_total{status='loading'}[2m]))
+			const gitpodVSCodeWebLoadTotal = 'gitpod_vscode_web_load_total';
+			gitpodMetricsAddCounter(gitpodVSCodeWebLoadTotal, { status: 'loading' });
+			let hasVscodeWebLoadFailed = false;
 			const onVsCodeWorkbenchError = (event) => {
+				if (!hasVscodeWebLoadFailed) {
+					gitpodMetricsAddCounter(gitpodVSCodeWebLoadTotal, { status: 'failed' });
+					hasVscodeWebLoadFailed = true;
+				}
+
 				if (typeof event?.target?.getAttribute !== 'function') {
 					gitpodMetricsAddCounter('gitpod_supervisor_frontend_error_total');
 					return;
@@ -62,12 +109,16 @@
 				if (resourceSource) {
 					labels['resource'] = 'vscode-web-workbench';
 					labels['error'] = 'LoadError';
+					gitpodMetricsReportError(new Error("LoadError"), { resource: labels['resource'], url: resourceSource })
 				} else {
 					labels['error'] = 'Unknown';
 				}
 				gitpodMetricsAddCounter('gitpod_supervisor_frontend_error_total', labels);
-			};
 
+				// TODO collect errors, we can capture resourceSource, error if possible with stack, message, name, and window URL
+			};
+		</script>
+		<script>
 			performance.mark('code/didStartRenderer');
 		</script>
 		<meta charset="utf-8" />
@@ -101,9 +152,9 @@
 	</body>
 
 	<!-- Startup (do not modify order of script tags!) -->
-	<script type="text/javascript" src="/_supervisor/frontend/main.js" onerror="onVsCodeWorkbenchError(event)" charset="utf-8"></script>
-	<script src="./static/out/vs/loader.js" onerror="onVsCodeWorkbenchError(event)" ></script>
-	<script src="./static/out/vs/webPackagePaths.js" onerror="onVsCodeWorkbenchError(event)" ></script>
+	<script type="text/javascript" src="/_supervisor/frontend/main.js" onerror="onVsCodeWorkbenchError(event)" charset="utf-8" crossorigin="anonymous"></script>
+	<script src="./static/out/vs/loader.js" onerror="onVsCodeWorkbenchError(event)" crossorigin="anonymous"></script>
+	<script src="./static/out/vs/webPackagePaths.js" onerror="onVsCodeWorkbenchError(event)" crossorigin="anonymous"></script>
 	<script>
 		Object.keys(self.webPackagePaths).map(function (key, index) {
 			self.webPackagePaths[key] = `${window.location.origin}/static/node_modules/${key}/${self.webPackagePaths[key]}`;
@@ -127,7 +178,7 @@
 	<script>
 		performance.mark('code/willLoadWorkbenchMain');
 	</script>
-	<script src="./static/out/vs/workbench/workbench.web.main.nls.js" onerror="onVsCodeWorkbenchError(event)"></script>
-	<script src="./static/out/vs/workbench/workbench.web.main.js" onerror="onVsCodeWorkbenchError(event)"></script>
-	<script src="./static/out/vs/gitpod/browser/workbench/workbench.js" onerror="onVsCodeWorkbenchError(event)"></script>
+	<script src="./static/out/vs/workbench/workbench.web.main.nls.js" onerror="onVsCodeWorkbenchError(event)" crossorigin="anonymous"></script>
+	<script src="./static/out/vs/workbench/workbench.web.main.js" onerror="onVsCodeWorkbenchError(event)" crossorigin="anonymous"></script>
+	<script src="./static/out/vs/gitpod/browser/workbench/workbench.js" onerror="onVsCodeWorkbenchError(event)" crossorigin="anonymous"></script>
 </html>
diff --git a/src/vs/gitpod/common/insightsHelper.ts b/src/vs/gitpod/common/insightsHelper.ts
index 235a4bc0fd868..31980071f6b35 100644
--- a/src/vs/gitpod/common/insightsHelper.ts
+++ b/src/vs/gitpod/common/insightsHelper.ts
@@ -28,6 +28,8 @@ export enum SenderKind {
 	Node = 2
 }
 
+// TODO map 'UnhandledError' to our error and report it both only for window and remote-server
+
 export function mapMetrics(source: 'window' | 'remote-server', eventName: string, data: any): IDEMetric[] | undefined {
 	const maybeMetrics = doMapMetrics(source, eventName, data);
 	return maybeMetrics instanceof Array ? maybeMetrics : typeof maybeMetrics === 'object' ? [maybeMetrics] : undefined;
diff --git a/src/vs/server/node/webClientServer.ts b/src/vs/server/node/webClientServer.ts
index 45e466e0bfc80..7d64fd8ad3bdc 100644
--- a/src/vs/server/node/webClientServer.ts
+++ b/src/vs/server/node/webClientServer.ts
@@ -323,6 +323,8 @@ export class WebClientServer {
 
 		const nlsBaseUrl = this._productService.extensionsGallery?.nlsBaseUrl;
 		const values: { [key: string]: string } = {
+			VERSION: this._productService.version,
+			GITPOD_HOST: this._productService.gitpodPreview?.host || '',
 			WORKBENCH_WEB_CONFIGURATION: asJSON(workbenchWebConfiguration),
 			WORKBENCH_AUTH_SESSION: authSessionInfo ? asJSON(authSessionInfo) : '',
 			WORKBENCH_WEB_BASE_URL: this._staticRoute,
@@ -353,9 +355,11 @@ export class WebClientServer {
 			'manifest-src \'self\';'
 		].join(' ');
 
+		const allowAllCSP = `default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';`;
+
 		const headers: http.OutgoingHttpHeaders = {
 			'Content-Type': 'text/html',
-			'Content-Security-Policy': cspDirectives
+			'Content-Security-Policy': this._environmentService.isBuilt ? cspDirectives : allowAllCSP
 		};
 		if (this._connectionToken.type !== ServerConnectionTokenType.None) {
 			// At this point we know the client has a valid cookie
