@anansi/core 0.21.0 → 0.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/server.js +91 -5
  3. package/lib/laySpouts.d.ts.map +1 -1
  4. package/lib/laySpouts.js +9 -5
  5. package/lib/scripts/laySpouts.js +9 -5
  6. package/lib/scripts/scripts/serve.js +17 -7
  7. package/lib/scripts/scripts/ssrErrorHandler.js +82 -0
  8. package/lib/scripts/scripts/startDevserver.js +18 -4
  9. package/lib/scripts/serve.d.ts.map +1 -1
  10. package/lib/scripts/serve.js +17 -7
  11. package/lib/scripts/ssrErrorHandler.d.ts +26 -0
  12. package/lib/scripts/ssrErrorHandler.d.ts.map +1 -0
  13. package/lib/scripts/ssrErrorHandler.js +82 -0
  14. package/lib/scripts/startDevserver.d.ts.map +1 -1
  15. package/lib/scripts/startDevserver.js +18 -4
  16. package/package.json +3 -3
  17. package/src/laySpouts.tsx +9 -5
  18. package/src/scripts/__tests__/ssrErrorHandler.test.ts +249 -0
  19. package/src/scripts/serve.ts +18 -6
  20. package/src/scripts/ssrErrorHandler.ts +98 -0
  21. package/src/scripts/startDevserver.ts +19 -3
package/src/scripts/ssrErrorHandler.ts ADDED
@@ -0,0 +1,98 @@
1
+ /**
2
+ * Utilities for handling SSR errors gracefully
3
+ */
4
+
5
+ /**
6
+ * Extract HTTP status code from an error object.
7
+ * Looks for a `status` property that is a number or parseable string.
8
+ * Returns 500 if no valid status found.
9
+ */
10
+ export function getErrorStatus(error: unknown): number {
11
+ if (error && typeof error === 'object' && 'status' in error) {
12
+ const status = (error as { status: unknown }).status;
13
+ if (typeof status === 'number' && status >= 100 && status < 600) {
14
+ return status;
15
+ }
16
+ if (typeof status === 'string') {
17
+ const parsed = parseInt(status, 10);
18
+ if (!isNaN(parsed) && parsed >= 100 && parsed < 600) {
19
+ return parsed;
20
+ }
21
+ }
22
+ }
23
+ return 500;
24
+ }
25
+
26
+ /**
27
+ * Escape HTML special characters to prevent XSS
28
+ */
29
+ export function escapeHtml(str: string): string {
30
+ return str
31
+ .replace(/&/g, '&amp;')
32
+ .replace(/</g, '&lt;')
33
+ .replace(/>/g, '&gt;')
34
+ .replace(/"/g, '&quot;')
35
+ .replace(/'/g, '&#039;');
36
+ }
37
+
38
+ export interface RenderErrorPageOptions {
39
+ /** Show stack trace in output */
40
+ showStack?: boolean;
41
+ /** Additional hint message to display */
42
+ hint?: string;
43
+ /** Badge text to display (e.g., "DEV MODE") */
44
+ badge?: string;
45
+ }
46
+
47
+ /**
48
+ * Render an HTML error page for SSR failures
49
+ */
50
+ export function renderErrorPage(
51
+ error: unknown,
52
+ url: string,
53
+ statusCode: number,
54
+ options: RenderErrorPageOptions = {},
55
+ ): string {
56
+ const errorMessage = error instanceof Error ? error.message : String(error);
57
+ const stack = error instanceof Error ? error.stack : undefined;
58
+ const { showStack = false, hint, badge } = options;
59
+
60
+ return `<!DOCTYPE html>
61
+ <html lang="en">
62
+ <head>
63
+ <meta charset="UTF-8">
64
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
65
+ <title>${statusCode} - Server Error</title>
66
+ <style>
67
+ * { box-sizing: border-box; margin: 0; padding: 0; }
68
+ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #eee; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
69
+ .container { max-width: 800px; width: 100%; }
70
+ h1 { color: #ff6b6b; font-size: 2.5rem; margin-bottom: 1rem; }
71
+ .badge { display: inline-block; background: #4ecdc4; color: #1a1a2e; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; margin-bottom: 1rem; }
72
+ .url { color: #888; font-size: 0.9rem; margin-bottom: 1.5rem; word-break: break-all; }
73
+ .message { background: #16213e; border-left: 4px solid #ff6b6b; padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; margin-bottom: 1.5rem; }
74
+ .message code { color: #ff6b6b; font-size: 1.1rem; }
75
+ .stack { background: #0f0f23; border-radius: 8px; padding: 1.5rem; overflow-x: auto; font-family: 'Monaco', 'Menlo', monospace; font-size: 0.85rem; line-height: 1.6; color: #aaa; white-space: pre-wrap; word-break: break-word; }
76
+ .retry { margin-top: 2rem; }
77
+ .retry a { color: #4ecdc4; text-decoration: none; padding: 0.75rem 1.5rem; border: 2px solid #4ecdc4; border-radius: 6px; display: inline-block; transition: all 0.2s; }
78
+ .retry a:hover { background: #4ecdc4; color: #1a1a2e; }
79
+ .hint { margin-top: 1.5rem; color: #888; font-size: 0.9rem; }
80
+ </style>
81
+ </head>
82
+ <body>
83
+ <div class="container">
84
+ ${badge ? `<span class="badge">${escapeHtml(badge)}</span>` : ''}
85
+ <h1>${statusCode} - Server Error</h1>
86
+ <p class="url">Error rendering: ${escapeHtml(url)}</p>
87
+ <div class="message">
88
+ <code>${escapeHtml(errorMessage)}</code>
89
+ </div>
90
+ ${showStack && stack ? `<pre class="stack">${escapeHtml(stack)}</pre>` : ''}
91
+ <div class="retry">
92
+ <a href="${escapeHtml(url)}">Retry</a>
93
+ </div>
94
+ ${hint ? `<p class="hint">${escapeHtml(hint)}</p>` : ''}
95
+ </div>
96
+ </body>
97
+ </html>`;
98
+ }
package/src/scripts/startDevserver.ts CHANGED
@@ -20,6 +20,7 @@ import WebpackDevServer from 'webpack-dev-server';
20
20
  import 'cross-fetch/dist/node-polyfill.js';
21
21
  import { createHybridRequire } from './createHybridRequire.js';
22
22
  import { getWebpackConfig } from './getWebpackConfig.js';
23
+ import { getErrorStatus, renderErrorPage } from './ssrErrorHandler.js';
23
24
  import { BoundRender } from './types.js';
24
25
 
25
26
  // run directly from node
@@ -117,12 +118,27 @@ export default async function startDevServer(
117
118
  return async function (
118
119
  req: Request | IncomingMessage,
119
120
  res: Response | ServerResponse,
120
- next: NextFunction,
121
+ _next: NextFunction,
121
122
  ) {
122
123
  try {
123
124
  return await fn(req, res);
124
- } catch (x) {
125
- next(x);
125
+ } catch (error: unknown) {
126
+ log.error('SSR rendering error:', error);
127
+
128
+ // Return error response with status from error if available
129
+ const expressRes = res as any;
130
+ if (!expressRes.headersSent) {
131
+ const statusCode = getErrorStatus(error);
132
+ expressRes.status(statusCode);
133
+ expressRes.setHeader('Content-Type', 'text/html');
134
+ expressRes.send(
135
+ renderErrorPage(error, req.url ?? '/', statusCode, {
136
+ showStack: true,
137
+ badge: 'DEV MODE',
138
+ hint: 'The dev server is still running. Fix the error and retry, or check the console for more details.',
139
+ }),
140
+ );
141
+ }
126
142
  }
127
143
  };
128
144
  }