fix(core): When an error occurs during SSR due to using the browser APIs, show an explanation

.changeset/strong-rules-rescue.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix(core): prevent server-side usage of browser APIs

packages/qwik/src/core/shared/qrl/qrl-class.ts

@@ -1,4 +1,4 @@
-import { isDev } from '@qwik.dev/core/build';
+import { isDev, isServer } from '@qwik.dev/core/build';
 import { assertDefined } from '../error/assert';
 import { QError, qError } from '../error/error';
 import { getPlatform, isServerPlatform } from '../platform/platform';
@@ -113,6 +113,19 @@ export const createQRL = <TYPE>(
       context.$event$ ||= this as Event;
       try {
         return invoke.call(this, context, symbolRef as any, ...(args as any));
+      } catch (e) {
+        if (isDev) {
+          if (isServer) {
+            if (
+              e instanceof ReferenceError &&
+              ['window', 'document'].some((v) => e.message.includes(v))
+            ) {
+              e.message =
+                'It seems like you forgot to add "if (isBrowser) {...}" here: ' + e.message;
+              throw e;
+            }
+          }
+        }
       } finally {
         context.$qrl$ = prevQrl;
         context.$event$ = prevEvent;

packages/qwik/src/core/tests/use-task.spec.tsx

@@ -3,6 +3,7 @@ import {
   Fragment,
   Fragment as Signal,
   component$,
+  isServer,
   useSignal,
   useStore,
   useTask$,
@@ -810,4 +811,21 @@ describe.each([
     const { vNode } = await render(<Cmp />, { debug });
     expect(vNode).toMatchVDOM(<Component>1 2 3 4 7 8 9</Component>);
   });
+
+  it.only('catch the ', async () => {
+    const Cmp = component$(() => {
+      useTask$(() => {
+        if (isServer) {
+          document.body.innerHTML = '';
+        }
+      });
+
+      return <div>1</div>;
+    });
+    try {
+      await render(<Cmp />, { debug });
+    } catch (e: unknown) {
+      expect((e as Error).message.includes('Code(Q51)')).toBeTruthy;
+    }
+  });
 });