@lark-apaas/devtool-kits 0.1.0-alpha.8 → 1.0.0
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.
- package/README.md +6 -0
- package/dist/error.html +285 -0
- package/dist/index.cjs +356 -223
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +43 -1
- package/dist/index.d.ts +43 -1
- package/dist/index.js +348 -216
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,6 +20,11 @@
|
|
|
20
20
|
- 自动替换自定义类型（user_profile、file_attachment）
|
|
21
21
|
- 添加系统字段注释（_created_at、_updated_at 等）
|
|
22
22
|
- 优化 import 语句和代码格式
|
|
23
|
+
- **Proxy Error Handler** - HTTP 代理错误处理器
|
|
24
|
+
- 显示友好的错误页面
|
|
25
|
+
- 自动读取并展示服务端错误日志
|
|
26
|
+
- 智能提取编译/启动错误信息
|
|
27
|
+
- 支持一键复制和修复建议
|
|
23
28
|
|
|
24
29
|
## 安装
|
|
25
30
|
|
|
@@ -83,6 +88,7 @@ import {
|
|
|
83
88
|
import {
|
|
84
89
|
registerMiddlewares, // 统一注册中间件
|
|
85
90
|
postprocessDrizzleSchema, // 后处理 Drizzle Schema 文件
|
|
91
|
+
handleDevProxyError, // HTTP 代理错误处理器
|
|
86
92
|
} from '@apaas/fullstack-toolkits';
|
|
87
93
|
```
|
|
88
94
|
|
package/dist/error.html
ADDED
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>错误页面</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
16
|
+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
17
|
+
sans-serif;
|
|
18
|
+
-webkit-font-smoothing: antialiased;
|
|
19
|
+
-moz-osx-font-smoothing: grayscale;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.container {
|
|
23
|
+
min-height: 100vh;
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
background-color: #F3F4F6; /* bg-gray-100 */
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.content {
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
align-items: center;
|
|
35
|
+
text-align: center;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.error-image {
|
|
39
|
+
margin-bottom: 16px; /* mb-4 */
|
|
40
|
+
width: 120px; /* w-[120px] */
|
|
41
|
+
height: auto;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.title {
|
|
45
|
+
font-size: 18px; /* text-l (推测为 text-lg) */
|
|
46
|
+
line-height: 22px;
|
|
47
|
+
color: #1F2329;
|
|
48
|
+
font-weight: 500; /* font-medium */
|
|
49
|
+
margin-bottom: 8px; /* mb-2 */
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.description {
|
|
53
|
+
font-size: 14px; /* text-sm */
|
|
54
|
+
line-height: 22px;
|
|
55
|
+
color: #646A73;
|
|
56
|
+
font-weight: 400; /* font-normal */
|
|
57
|
+
margin-bottom: 8px; /* mb-2 */
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.button-group {
|
|
61
|
+
display: flex;
|
|
62
|
+
gap: 16px; /* space-x-4 */
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.button {
|
|
66
|
+
height: 32px; /* h-[32px] */
|
|
67
|
+
padding: 0 16px;
|
|
68
|
+
border-radius: 6px; /* rounded-[6px] */
|
|
69
|
+
font-size: 14px; /* text-sm */
|
|
70
|
+
font-weight: 400; /* font-[400] */
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
transition: all 0.2s;
|
|
73
|
+
outline: none; /* focus:outline-hidden */
|
|
74
|
+
border: 1px solid;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.button-copy {
|
|
78
|
+
background-color: white; /* bg-white */
|
|
79
|
+
color: #4B5563; /* text-gray-600 */
|
|
80
|
+
border-color: #D0D3D6; /* border-[#D0D3D6] */
|
|
81
|
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-xs */
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.button-copy:hover {
|
|
85
|
+
background-color: #F3F4F6; /* hover:bg-gray-100 */
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.button-copy:active {
|
|
89
|
+
background-color: #E5E7EB; /* active:bg-gray-200 */
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.button-repair {
|
|
93
|
+
background-color: #2563EB; /* bg-blue-600 */
|
|
94
|
+
color: white; /* text-white */
|
|
95
|
+
border-color: transparent; /* border-transparent */
|
|
96
|
+
font-weight: 500; /* font-medium */
|
|
97
|
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-xs */
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.button-repair:hover {
|
|
101
|
+
background-color: #2563EB; /* hover:bg-blue-600 (保持不变) */
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.button-repair:active {
|
|
105
|
+
background-color: #1E40AF; /* active:bg-blue-700 */
|
|
106
|
+
}
|
|
107
|
+
</style>
|
|
108
|
+
</head>
|
|
109
|
+
<body>
|
|
110
|
+
<div class="container">
|
|
111
|
+
<div class="content">
|
|
112
|
+
<img
|
|
113
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/render_error.svg"
|
|
114
|
+
alt="render error"
|
|
115
|
+
class="error-image"
|
|
116
|
+
/>
|
|
117
|
+
<p class="title">哎呀，写错代码了</p>
|
|
118
|
+
<p class="description">可复制错误信息，或告诉妙搭进行修复</p>
|
|
119
|
+
<div class="button-group">
|
|
120
|
+
<button class="button button-copy" id="copyBtn">
|
|
121
|
+
复制错误信息
|
|
122
|
+
</button>
|
|
123
|
+
<button class="button button-repair" id="repairBtn">
|
|
124
|
+
告诉妙搭修复
|
|
125
|
+
</button>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<script>
|
|
131
|
+
// 全局错误对象
|
|
132
|
+
let errorData = {
|
|
133
|
+
message: `{{.errorData.message}}`,
|
|
134
|
+
};
|
|
135
|
+
let locationData = null;
|
|
136
|
+
|
|
137
|
+
// 初始化页面
|
|
138
|
+
function init() {
|
|
139
|
+
// 绑定事件
|
|
140
|
+
document.getElementById('copyBtn').addEventListener('click', handleCopy);
|
|
141
|
+
document.getElementById('repairBtn').addEventListener('click', handleRepair);
|
|
142
|
+
|
|
143
|
+
// 获取当前位置信息
|
|
144
|
+
locationData = {
|
|
145
|
+
pathname: window.location.pathname,
|
|
146
|
+
search: window.location.search,
|
|
147
|
+
hash: window.location.hash,
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
// 如果有错误对象，发送 postMessage
|
|
151
|
+
if (errorData) {
|
|
152
|
+
sendPostMessage({
|
|
153
|
+
type: 'RenderError',
|
|
154
|
+
data: errorData,
|
|
155
|
+
location: locationData,
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
// 复制错误信息到剪贴板
|
|
161
|
+
async function handleCopy() {
|
|
162
|
+
if (!errorData) {
|
|
163
|
+
console.error('没有错误信息可复制');
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
const { message, logs } = errorData;
|
|
168
|
+
let result = '';
|
|
169
|
+
|
|
170
|
+
if (message) {
|
|
171
|
+
result += message + '\n\n';
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
if (logs) {
|
|
175
|
+
result += '错误日志:\n' + logs;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
if (!result) {
|
|
179
|
+
result = '未找到错误信息';
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
const success = await copyToClipboard(result);
|
|
183
|
+
if (success) {
|
|
184
|
+
console.log('错误信息已复制到剪贴板');
|
|
185
|
+
// 可选：显示复制成功提示
|
|
186
|
+
const btn = document.getElementById('copyBtn');
|
|
187
|
+
const originalText = btn.textContent;
|
|
188
|
+
btn.textContent = '已复制!';
|
|
189
|
+
setTimeout(() => {
|
|
190
|
+
btn.textContent = originalText;
|
|
191
|
+
}, 2000);
|
|
192
|
+
} else {
|
|
193
|
+
console.error('复制失败');
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
// 告诉妙搭修复
|
|
198
|
+
function handleRepair() {
|
|
199
|
+
sendPostMessage({
|
|
200
|
+
type: 'RenderErrorRepair',
|
|
201
|
+
data: errorData,
|
|
202
|
+
});
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
// 发送 postMessage
|
|
206
|
+
function sendPostMessage(message, targetOrigin) {
|
|
207
|
+
const origin = targetOrigin || getPreviewParentOrigin();
|
|
208
|
+
window.parent.postMessage(message, origin);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
// 获取父窗口 origin
|
|
212
|
+
function getPreviewParentOrigin() {
|
|
213
|
+
// 优先使用 document.referrer
|
|
214
|
+
if (document.referrer) {
|
|
215
|
+
try {
|
|
216
|
+
const url = new URL(document.referrer);
|
|
217
|
+
return url.origin;
|
|
218
|
+
} catch (e) {
|
|
219
|
+
console.error('解析 referrer 失败:', e);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
// 降级方案：使用通配符（不安全，仅用于开发环境）
|
|
224
|
+
return '*';
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
// 复制到剪贴板
|
|
228
|
+
async function copyToClipboard(text) {
|
|
229
|
+
try {
|
|
230
|
+
// 优先使用现代的 Clipboard API
|
|
231
|
+
if (navigator.clipboard && window.isSecureContext) {
|
|
232
|
+
await navigator.clipboard.writeText(text);
|
|
233
|
+
return true;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
// 降级方案：使用传统的 execCommand 方法
|
|
237
|
+
return fallbackCopyToClipboard(text);
|
|
238
|
+
} catch (error) {
|
|
239
|
+
console.error('复制到剪切板失败:', error);
|
|
240
|
+
return false;
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
// 降级复制方案（兼容旧浏览器）
|
|
245
|
+
function fallbackCopyToClipboard(text) {
|
|
246
|
+
try {
|
|
247
|
+
// 创建临时的 textarea 元素
|
|
248
|
+
const textArea = document.createElement('textarea');
|
|
249
|
+
textArea.value = text;
|
|
250
|
+
|
|
251
|
+
// 设置样式，使其不可见
|
|
252
|
+
textArea.style.position = 'fixed';
|
|
253
|
+
textArea.style.left = '-999999px';
|
|
254
|
+
textArea.style.top = '-999999px';
|
|
255
|
+
textArea.setAttribute('readonly', '');
|
|
256
|
+
|
|
257
|
+
// 添加到 DOM
|
|
258
|
+
document.body.appendChild(textArea);
|
|
259
|
+
|
|
260
|
+
// 选中文本
|
|
261
|
+
textArea.focus();
|
|
262
|
+
textArea.select();
|
|
263
|
+
|
|
264
|
+
// 执行复制命令
|
|
265
|
+
const successful = document.execCommand('copy');
|
|
266
|
+
|
|
267
|
+
// 清理：移除临时元素
|
|
268
|
+
document.body.removeChild(textArea);
|
|
269
|
+
|
|
270
|
+
return successful;
|
|
271
|
+
} catch (error) {
|
|
272
|
+
console.error('降级复制方案失败:', error);
|
|
273
|
+
return false;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
// 页面加载完成后初始化
|
|
278
|
+
if (document.readyState === 'loading') {
|
|
279
|
+
document.addEventListener('DOMContentLoaded', init);
|
|
280
|
+
} else {
|
|
281
|
+
init();
|
|
282
|
+
}
|
|
283
|
+
</script>
|
|
284
|
+
</body>
|
|
285
|
+
</html>
|