mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 16:09:05 +00:00
Loakesh Indiran
967433fe9e
## Problem
On a new HTTP / API check, picking **POST** (or any method other than
GET/HEAD) makes the entire **HTTP Request** card disappear — method,
timeout, follow-redirects, headers, assertions, all of it. The console
shows only:
```
SyntaxError: 2
at ... nextToken ... parse ...
```
## Cause
The request-body field is the only thing that renders for non-GET/HEAD
methods, and its placeholder message was the literal text `{"key":
"value"}`:
```json
"bodyPlaceholder": "{\"key\": \"value\"}",
```
To vue-i18n `{...}` is an interpolation slot, so its parser hits `"`
where an identifier must be:
```
SyntaxError: Invalid token in placeholder: '"key":'
```
Messages compile lazily (`__INTLIFY_JIT_COMPILATION__: true` in
`vite.config.ts`), so nothing happens until the message is first
rendered. The throw then lands inside render and tears down the whole
`CheckHttpConfig` subtree — which is why the card vanishes, and why it
only vanishes for the methods that show a body.
## Fix
Escape the braces as `{'{'}` / `{'}'}`. Rendered output is
byte-identical — verified through `createI18n().t()`:
```
raw -> "{\"key\": \"value\"}" (logs a compilation error, throws under the app's config)
escaped -> "{\"key\": \"value\"}" (compiles clean)
```
Applied across all 15 locale files, since the crash is
locale-independent.
Two other **en-US** messages carried the same latent crash and are
escaped the same way:
- `pipeline.streamSelectionNameInvalid` — a raw `@`, parsed as
linked-message syntax
- `aiToolset.genericDataPlaceholder` — `{}`, an empty placeholder
## Guard
New `enUsMessages.spec.ts` compiles every en-US message the way vue-i18n
does (`baseCompile` with a rethrowing `onError` — the default collects
errors and returns a best-effort AST, hiding exactly this). The next
such message fails CI instead of silently deleting a form section.
The other locales still have ~250 broken messages, overwhelmingly
placeholder *names* that were translated (`{方向}`, `{秒}`). Those break
interpolation semantics as well as compilation and need per-locale
review — out of scope here, so the guard is en-US only for now.
## Testing
**Before the fix**, driven in a real browser against a local build:
```
card on load: 1 | aria-expanded: true | options: 7
select POST -> card still there: 0 | HTTP Request heading: 0
[console] SyntaxError: 2
```
**After the fix**, every method exercised through the real select:
| method | selected | card | body field | assertions | new console
errors |
|---|---|---|---|---|---|
| POST | POST | 1 | 1 | 1 | 0 |
| PUT | PUT | 1 | 1 | 1 | 0 |
| DELETE | DELETE | 1 | 1 | 1 | 0 |
| PATCH | PATCH | 1 | 1 | 1 | 0 |
| HEAD | HEAD | 1 | 0 | 1 | 0 |
| OPTIONS | OPTIONS | 1 | 1 | 1 | 0 |
| GET | GET | 1 | 0 | 1 | 0 |
Body field visibility is correct in every case (hidden for GET/HEAD
only), zero console errors throughout.
**Full round-trip**, also in the browser — creating a non-GET check was
impossible before this fix:
- Create with POST + body `{"ping": "pong"}` → `POST
/api/default/synthetics` → **200**, redirect to the list, 0 console
errors. Wire payload carries `"method":"POST"` and the body verbatim.
- Reopen for edit → card present, method `POST`, body field populated
with `{"ping": "pong"}`, 0 console errors.
**Unit tests:** 598 passed, 0 failed across `locales`,
`components/synthetics`, `views/synthetics`, `utils/synthetics`,
`composables/synthetics`, including the new `enUsMessages.spec.ts`.
One suite, `views/synthetics/MonitorResults.spec.ts`, fails to load with
`Cannot read properties of undefined (reading 'value')`. That is
pre-existing and unrelated — `useLocalTimezone` gets no localStorage
under Node 26's vitest environment, and it fails identically on a clean
tree.
web
This template should help get you started developing with Vue 3 in Vite.
Recommended IDE Setup
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
Type Support for .vue Imports in TS
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensionsfrom VSCode's command palette - Find
TypeScript and JavaScript Language Features, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Windowfrom the command palette.
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Compile and Hot-Reload for Development
For stand-alone UI development environment, create .env file and which contains below environment variable
VITE_OPENOBSERVE_ENDPOINT=http://localhost:5080/
npm run dev
Type-Check, Compile and Minify for Production
npm run build
Run Unit Tests with Vitest
npm run test:unit
Run End-to-End Tests with Cypress
npm run test:e2e:dev
This runs the end-to-end tests against the Vite development server. It is much faster than the production build.
But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):
npm run build
npm run test:e2e
Lint with ESLint
npm run lint