fix(vite): source mapping locations

Mappings were wrong for a few reasons:
- Missing source map generation in one babel transform
- setting `compact: false` causes vite to generate incorrect mappings
- stack traces need to be mapped by vite

Author: marvinhagemeister

packages/fresh/src/app.ts

@@ -154,6 +154,12 @@ export let setBuildCache: <State>(
   cache: BuildCache<State>,
   mode: "development" | "production",
 ) => void;
+export let setErrorInterceptor: <State>(
+  app: App<State>,
+  fn: (err: unknown) => void,
+) => void;
+
+const NOOP = () => {};
 
 /**
  * Create an application instance that passes the incoming `Request`
@@ -162,6 +168,7 @@ export let setBuildCache: <State>(
 export class App<State> {
   #getBuildCache: () => BuildCache<State> | null = () => null;
   #commands: Command<State>[] = [];
+  #onError: (err: unknown) => void = NOOP;
 
   static {
     getBuildCache = (app) => app.#getBuildCache();
@@ -170,6 +177,9 @@ export class App<State> {
       app.config.mode = mode;
       app.#getBuildCache = () => cache;
     };
+    setErrorInterceptor = (app, fn) => {
+      app.#onError = fn;
+    };
   }
 
   /**
@@ -432,7 +442,7 @@ export class App<State> {
       try {
         if (handlers.length === 0) return await next();
 
-        const result = await runMiddlewares(handlers, ctx);
+        const result = await runMiddlewares(handlers, ctx, this.#onError);
         if (!(result instanceof Response)) {
           throw new Error(
             `Expected a "Response" instance to be returned, but got: ${result}`,

packages/fresh/src/internals.ts

@@ -1,6 +1,6 @@
 import * as path from "@std/path";
 
-export { setBuildCache } from "./app.ts";
+export { setBuildCache, setErrorInterceptor } from "./app.ts";
 export { IslandPreparer, ProdBuildCache } from "./build_cache.ts";
 export { path };
 export { ASSET_CACHE_BUST_KEY } from "./constants.ts";

packages/fresh/src/middlewares/mod.ts

@@ -91,6 +91,7 @@ export type MaybeLazyMiddleware<State> = (
 export async function runMiddlewares<State>(
   middlewares: MaybeLazyMiddleware<State>[],
   ctx: Context<State>,
+  onError?: (err: unknown) => void,
 ): Promise<Response> {
   return await tracer.startActiveSpan("middlewares", {
     attributes: { "fresh.middleware.count": middlewares.length },
@@ -117,7 +118,13 @@ export async function runMiddlewares<State>(
 
             return result;
           } catch (err) {
-            ctx.error = err;
+            if (ctx.error !== err) {
+              ctx.error = err;
+
+              if (onError !== undefined) {
+                onError(err);
+              }
+            }
             throw err;
           } finally {
             internals.app = prevApp;

packages/plugin-vite/demo/routes/_error.tsx

@@ -0,0 +1,9 @@
+import { define } from "../utils.ts";
+
+export default define.page((props) => {
+  if (props.error instanceof Error) {
+    return <pre id="err">{String(props.error?.stack)}</pre>;
+  }
+
+  return <pre id="err">{String(props.error)}</pre>;
+});

packages/plugin-vite/demo/routes/tests/throw.tsx

@@ -0,0 +1,7 @@
+import { define } from "../../utils.ts";
+
+export const handler = define.handlers({
+  GET() {
+    throw new Error("FAIL");
+  },
+});

packages/plugin-vite/demo/utils.ts

@@ -0,0 +1,4 @@
+import { createDefine } from "@fresh/core";
+
+// deno-lint-ignore no-explicit-any
+export const define = createDefine<any>();

packages/plugin-vite/src/mod.ts

@@ -180,6 +180,16 @@ export function fresh(config?: FreshViteConfig): Plugin[] {
                       return;
                     }
 
+                    // Ignore this warnings
+                    if (warning.code === "THIS_IS_UNDEFINED") {
+                      return;
+                    }
+
+                    // Ignore falsy source map errors
+                    if (warning.code === "SOURCEMAP_ERROR") {
+                      return;
+                    }
+
                     return handler(warning);
                   },
                   input: {

packages/plugin-vite/src/plugins/deno.ts

@@ -384,10 +384,10 @@ function babelTransform(
   const result = babel.transformSync(code, {
     filename: id,
     babelrc: false,
-    sourceMaps: "inline",
+    sourceMaps: "both",
     presets: presets,
     plugins: [httpAbsolute(url)],
-    compact: true,
+    compact: false,
   });
 
   if (result !== null && result.code) {

packages/plugin-vite/src/plugins/dev_server.ts

@@ -72,6 +72,12 @@ export function devServer(): Plugin[] {
           try {
             const mod = await server.ssrLoadModule("fresh:server_entry");
             const req = createRequest(nodeReq, nodeRes);
+            mod.setErrorInterceptor((err: unknown) => {
+              if (err instanceof Error) {
+                server.ssrFixStacktrace(err);
+              }
+            });
+
             const res = (await mod.default.fetch(req)) as Response;
 
             // Collect css eagerly to avoid FOUC. This is a workaround for
@@ -101,6 +107,9 @@ export function devServer(): Plugin[] {
 
             await sendResponse(nodeRes, res);
           } catch (err) {
+            if (err instanceof Error) {
+              server.ssrFixStacktrace(err);
+            }
             return next(err);
           }
         });

packages/plugin-vite/src/plugins/patches.ts

@@ -50,9 +50,10 @@ export function patches(): Plugin {
         const res = babel.transformSync(code, {
           filename: id,
           babelrc: false,
-          compact: true,
+          compact: false,
           plugins,
           presets,
+          sourceMaps: "both",
         });
 
         if (res?.code) {