You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Call the JS/Node widget the Patchstack Connector (#96)
The JavaScript/Node install, troubleshooting and Pulse overview pages called
the widget the "disclosure widget" or "Patchstack widget", and used "the
connector" for the @patchstack/connect package. The widget is now the
Patchstack Connector and the package is Connect.
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Copy file name to clipboardExpand all lines: src/content/docs/Getting Started/Installing Patchstack/installing-on-javascript-node-projects.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,15 +9,15 @@ sidebar:
9
9
label: "JavaScript / Node.js projects"
10
10
---
11
11
12
-
Patchstack monitors JavaScript and Node.js applications — not only WordPress sites — through [`@patchstack/connect`](https://www.npmjs.com/package/@patchstack/connect), the official Patchstack connector package, maintained and published by Patchstack on npm under the `@patchstack` organization.
12
+
Patchstack monitors JavaScript and Node.js applications — not only WordPress sites — through [`@patchstack/connect`](https://www.npmjs.com/package/@patchstack/connect), the official Patchstack Connect package, maintained and published by Patchstack on npm under the `@patchstack` organization.
The connector reads the project's dependency lockfile (`package-lock.json`, `pnpm-lock.yaml`, or `yarn.lock`; bun projects are detected via `node_modules/`) and reports package names and versions to Patchstack, which matches them against its vulnerability database and notifies you when a dependency needs patching. It works with any framework — Next.js, Vite, Nuxt, Remix, SvelteKit, TanStack Start, plain Node — and with npm, pnpm, yarn, and bun.
20
+
Connect reads the project's dependency lockfile (`package-lock.json`, `pnpm-lock.yaml`, or `yarn.lock`; bun projects are detected via `node_modules/`) and reports package names and versions to Patchstack, which matches them against its vulnerability database and notifies you when a dependency needs patching. It works with any framework — Next.js, Vite, Nuxt, Remix, SvelteKit, TanStack Start, plain Node — and with npm, pnpm, yarn, and bun.
21
21
22
22
It sends dependency names and versions only: no source code, no environment variable values, no file paths, no git history.
1.**Scans the lockfile and sends the dependency manifest** (package names and versions) to Patchstack.
36
36
2.**Provisions a Patchstack site** on the first run and writes its UUID to `.patchstackrc.json` (commit this file); later runs reuse the existing site instead of creating a duplicate.
37
-
3.**Manages the disclosure-widget tag** in the project's root HTML shell (the first of `index.html`, `public/index.html`, or `src/app.html` that exists) — see the widget section below.
37
+
3.**Manages the Patchstack Connector tag** in the project's root HTML shell (the first of `index.html`, `public/index.html`, or `src/app.html` that exists) — see the widget section below.
38
38
4.**Adds production build integration to `package.json`:**`scan` runs before the build and `mark-build` after it, via `prebuild`/`postbuild` lifecycle hooks (or a direct build chain on bun, which skips npm-style hooks). Existing build commands are preserved, dev scripts are untouched, and `setup` never runs the build itself.
39
39
5.**Prints a status checklist** of anything that still needs a manual step, such as framework-specific widget placement.
40
40
@@ -48,7 +48,7 @@ A site that is scanning but not connected is an anonymous record: it is monitore
48
48
2.**From the dashboard link.** Open the link `setup`, `scan`, or `status` printed in your browser and sign in.
49
49
3.**From the terminal.**`npx @patchstack/connect claim` prints a link to sign in with, then attaches the site to that account.
50
50
51
-
On a **published** build the connect panel is hidden from ordinary visitors (see [the disclosure widget](#the-disclosure-widget) below). As the owner you can still reach the sign-in there by loading any page with `#patchstack` appended to the URL — `?patchstack` works too.
51
+
On a **published** build the connect panel is hidden from ordinary visitors (see [the Patchstack Connector](#the-patchstack-connector) below). As the owner you can still reach the sign-in there by loading any page with `#patchstack` appended to the URL — `?patchstack` works too.
52
52
53
53
Once the site is connected, the panel never appears again, and the widget shows the public report form instead.
54
54
@@ -80,17 +80,17 @@ The same pieces can be applied individually: `npx @patchstack/connect scan` perf
80
80
81
81
Run `npx @patchstack/connect guide` at any time for a project-aware checklist of what is present and what is missing, with commands tailored to the project. `npx @patchstack/connect status` re-prints the site UUID and dashboard link.
82
82
83
-
## The disclosure widget
83
+
## The Patchstack Connector
84
84
85
-
The connector installs Patchstack's **vulnerability disclosure widget** — a floating control that becomes a "Report a vulnerability" button once the site is connected to an account, so anyone who spots an issue can report it straight to you. The widget is a single script tag loading `https://cdn.patchstack.com/patchstack-widget.js`, configured with the site UUID (which is public by design — it ships in client-side HTML and is not a secret). A pre-existing manually placed widget tag is left untouched, and `mark-build` ensures the tag in build output (`dist/`, `build/`, `out/`, `.output/public`) without ever editing source.
85
+
Connect installs the **Patchstack Connector**, Patchstack's vulnerability disclosure widget — a floating control that becomes a "Report a vulnerability" button once the site is connected to an account, so anyone who spots an issue can report it straight to you. The widget is a single script tag loading `https://cdn.patchstack.com/patchstack-widget.js`, configured with the site UUID (which is public by design — it ships in client-side HTML and is not a secret). A pre-existing manually placed widget tag is left untouched, and `mark-build` ensures the tag in build output (`dist/`, `build/`, `out/`, `.output/public`) without ever editing source.
86
86
87
87
Frameworks without a static HTML shell need a one-line placement in the root layout; `guide` prints the exact snippet for the detected framework, and the [widget reference](https://cdn.patchstack.com/llm.html) covers additional patterns.
88
88
89
89
To run without the widget, set `"widget": false` in `.patchstackrc.json` — this disables all widget management; otherwise the next scan re-adds the tag.
90
90
91
91
**What the widget shows depends on whether the site is connected to an account.** While it is unclaimed, the widget serves the one-time "Connect this website" panel *instead of* the report button — so on a fresh install the first thing you see is the sign-in, not the floating button. Connect the site and the panel is replaced by the public **Report a vulnerability** button for good. To skip the onboarding entirely and always show the report form, set `data-build-mode="false"` on the script tag.
92
92
93
-
On a **published** build the connector's `mark-build` hook stamps `window.__PATCHSTACK_PROD__` into the built HTML, which hides the connect panel and the owner "Log in" link from visitors and leaves the report form only. Owners reach the sign-in there with `#patchstack` (or `?patchstack`) appended to any page URL.
93
+
On a **published** build Connect's `mark-build` hook stamps `window.__PATCHSTACK_PROD__` into the built HTML, which hides the connect panel and the owner "Log in" link from visitors and leaves the report form only. Owners reach the sign-in there with `#patchstack` (or `?patchstack`) appended to any page URL.
94
94
95
95
See [Troubleshooting JS / Node.js](/getting-started/installing-patchstack/troubleshooting-javascript-node-projects/) if the widget does not appear at all.
96
96
@@ -121,7 +121,7 @@ Reporting stops immediately. Local removal does not delete the site record on Pa
121
121
122
122
## Troubleshooting
123
123
124
-
A widget that never appears, a published site serving an old build, a broken config file, or a connector stuck on an old version are all covered — with copy-paste prompts for AI site builders — in [Troubleshooting JavaScript / Node.js projects](/getting-started/installing-patchstack/troubleshooting-javascript-node-projects/).
124
+
A widget that never appears, a published site serving an old build, a broken config file, or a Connect install stuck on an old version are all covered — with copy-paste prompts for AI site builders — in [Troubleshooting JavaScript / Node.js projects](/getting-started/installing-patchstack/troubleshooting-javascript-node-projects/).
excerpt: "Fix a disclosure widget that never appears or appears twice, a published build that serves an old integration, a broken config file, or an outdated @patchstack/connect — including prompts to paste into an AI site builder."
3
+
excerpt: "Fix a Patchstack Connector that never appears or appears twice, a published build that serves an old integration, a broken config file, or an outdated @patchstack/connect — including prompts to paste into an AI site builder."
This page covers the problems that come up after connecting a JavaScript or Node.js project with [`@patchstack/connect`](/getting-started/installing-patchstack/installing-on-javascript-node-projects/): a disclosure widget that never appears, a widget that appears twice, a published site still serving an old integration, a build that broke after a config change, a connector stuck on an old version, and an update that will not take because the package manager is holding the release back.
14
+
This page covers the problems that come up after connecting a JavaScript or Node.js project with [`@patchstack/connect`](/getting-started/installing-patchstack/installing-on-javascript-node-projects/): a Patchstack Connector that never appears, a widget that appears twice, a published site still serving an old integration, a build that broke after a config change, a Connect install stuck on an old version, and an update that will not take because the package manager is holding the release back.
15
15
16
16
Every section ends with a **prompt you can paste into your site builder's AI chat**. The prompts are deliberately explicit about proving the result, because builder assistants otherwise tend to report the version they remember, or stop after editing one file.
17
17
@@ -57,7 +57,7 @@ same package manager for every command. Do not create a second lockfile.
57
57
58
58
## The widget is not visible on my site
59
59
60
-
The visitor-facing **Report a vulnerability** button does not appear until the site is connected to a Patchstack account. If you installed the connector and never saw it, that is usually the reason rather than a broken install — work through these in order.
60
+
The visitor-facing **Report a vulnerability** button does not appear until the site is connected to a Patchstack account. If you installed Connect and never saw it, that is usually the reason rather than a broken install — work through these in order.
61
61
62
62
<Steps>
63
63
@@ -101,16 +101,16 @@ The visitor-facing **Report a vulnerability** button does not appear until the s
101
101
Use this when the widget works in the builder preview but is absent from the published site.
102
102
103
103
```text
104
-
Please diagnose why the Patchstack widget works in preview but is missing from
104
+
Please diagnose why the Patchstack Connector works in preview but is missing from
105
105
the published site.
106
106
107
107
1. Use the latest @patchstack/connect release from npm.
108
-
2. Confirm the root page contains exactly one connector-managed script from
108
+
2. Confirm the root page contains exactly one Connect-managed script from
109
109
https://cdn.patchstack.com/patchstack-widget.js with data-site-uuid set from
110
110
the public .patchstackrc.json value.
111
111
3. Do not read the site UUID from VITE_*, NEXT_PUBLIC_*, or another
112
112
environment-only variable.
113
-
4. Run the connector setup/scan flow and the complete production build,
113
+
4. Run the Connect setup/scan flow and the complete production build,
114
114
including mark-build where the project scripts require it.
115
115
5. Inspect the generated production output — not only source files — and verify
116
116
that the widget script and window.__PATCHSTACK_PROD__ marker are present.
@@ -147,7 +147,7 @@ Please do not stop at a source-code check; verify the live deployment.
147
147
Thank you.
148
148
```
149
149
150
-
## Is this the latest connector version?
150
+
## Is this the latest Connect version?
151
151
152
152
Site builders often resolve `@patchstack/connect` from cached package metadata and land on an older release. Check what npm actually has:
153
153
@@ -195,7 +195,7 @@ Patchstack allows for this. The update notice in your dashboard and in the widge
195
195
196
196
## The build broke after a config update
197
197
198
-
The connector uses two config files with different jobs, and mixing them up breaks the build:
198
+
Connect uses two config files with different jobs, and mixing them up breaks the build:
199
199
200
200
| File | Commit it? | Holds |
201
201
|------|-----------|-------|
@@ -225,14 +225,14 @@ Please diagnose and fix the Patchstack build after the config-file update.
225
225
Please complete and verify the fix. Thank you.
226
226
```
227
227
228
-
## I see two Patchstack widgets
228
+
## I see two Patchstack Connectors
229
229
230
230
Two shield buttons stacked in the corner, sometimes one opening the owner log-in and the other the report form, mean the widget script ran twice on that page. They often sit on exactly the same pixel, so the second one only shows when a panel opens or the layout shifts.
231
231
232
232
The widget keeps **one floating launcher per page** on its own:
233
233
234
234
- A second copy loaded by the **same document** is ignored, with a `[PatchstackWidget]` warning in the browser console.
235
-
- A copy inside a page of **your own site that the shell shows in an `<iframe>`** stands down as well, with a console message. The connector's `mark-build` step stamps every built HTML file, so an embedded static page carries the tag too; that copy is harmless and you can leave it.
235
+
- A copy inside a page of **your own site that the shell shows in an `<iframe>`** stands down as well, with a console message. Connect's `mark-build` step stamps every built HTML file, so an embedded static page carries the tag too; that copy is harmless and you can leave it.
236
236
237
237
What still needs your attention is a second tag that you, or the builder's AI, added by hand. It usually lives in a component, a layout, or a runtime `useEffect` that appends the script. Keep exactly one tag, in the root shell.
238
238
@@ -252,12 +252,12 @@ If the page embeds another page of your site in an `<iframe>`, run the same two
252
252
### Prompt: two widgets on the page
253
253
254
254
```text
255
-
Please make sure the Patchstack widget is loaded exactly once on this site.
255
+
Please make sure the Patchstack Connector is loaded exactly once on this site.
256
256
257
257
1. Search the entire project - source files, layouts, components, and static
258
258
HTML under public/ - for "patchstack-widget.js" and list every place that
259
259
loads it.
260
-
2. Keep exactly one <script> tag: the connector-managed one in the root shell
260
+
2. Keep exactly one <script> tag: the Connect-managed one in the root shell
261
261
(index.html, or the root layout for Next.js / TanStack Start / Remix). It
262
262
must carry data-site-uuid with the value from the committed
0 commit comments