Skip to content

Commit 0f0ed0e

Browse files
hpouillothpouillot
authored
add rollup and webpack plugin documentation (#14211)
* add rollup doc * add rollup documentation * add webpack documentation * add webpack logo
1 parent e2897bc commit 0f0ed0e

File tree

5 files changed

+170
-0
lines changed

5 files changed

+170
-0
lines changed

‎contents/docs/error-tracking/_snippets/upload-symbol-sets-platforms.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,16 @@ const UploadSymbolSetsPlatforms = () => {
4343
url: '/docs/error-tracking/upload-mappings/android',
4444
image: 'https://res.cloudinary.com/dmukukwp6/image/upload/Android_robot_bec2fb7318.svg',
4545
},
46+
{
47+
label: 'Rollup',
48+
url: '/docs/error-tracking/upload-source-maps/rollup',
49+
image: 'https://res.cloudinary.com/dmukukwp6/image/upload/Rollup_js_c306a2fde3.svg',
50+
},
51+
{
52+
label: 'Webpack',
53+
url: '/docs/error-tracking/upload-source-maps/webpack',
54+
image: 'https://res.cloudinary.com/dmukukwp6/image/upload/webpack_3fc774b5a5.svg',
55+
},
4656
{
4757
label: 'CLI',
4858
url: '/docs/error-tracking/upload-source-maps/cli',

‎contents/docs/error-tracking/upload-source-maps/rollup.mdx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
title: Upload source maps for Rollup
3+
showStepsToc: true
4+
---
5+
6+
<Steps>
7+
<Step title="Install the PostHog Rollup plugin" badge="required">
8+
9+
```shell
10+
npm install @posthog/rollup-plugin
11+
```
12+
13+
</Step>
14+
<Step title="Add PostHog plugin to your Rollup config" badge="required">
15+
16+
Add the following to your `rollup.config.js` file:
17+
18+
```js file=rollup.config.js
19+
import posthog from '@posthog/rollup-plugin'
20+
21+
export default {
22+
input: 'src/index.js',
23+
output: {
24+
dir: 'dist',
25+
format: 'es',
26+
},
27+
plugins: [
28+
posthog({
29+
personalApiKey: process.env.POSTHOG_API_KEY, // Personal API Key
30+
envId: process.env.POSTHOG_ENV_ID, // Environment ID
31+
host: process.env.POSTHOG_HOST, // (optional) defaults to https://us.i.posthog.com
32+
sourcemaps: { // (optional)
33+
enabled: true, // (optional) Enable sourcemaps generation and upload, defaults to true
34+
project: 'my-application', // (optional) Project name
35+
version: '1.0.0', // (optional) Release version
36+
deleteAfterUpload: true, // (optional) Delete sourcemaps after upload, defaults to true
37+
},
38+
}),
39+
],
40+
}
41+
```
42+
43+
Where you should set the following environment variables:
44+
45+
<div className="overflow-x-hidden">
46+
47+
| Environment Variable | Description |
48+
| --- | --- |
49+
| `POSTHOG_API_KEY` | [Personal API key](https://app.posthog.com/settings/user-api-keys#variables) with at least `write` access on `error tracking` |
50+
| `POSTHOG_ENV_ID` | Project ID you can find in your [project settings](https://app.posthog.com/settings/environment#variables) |
51+
| `POSTHOG_HOST` | (optional) Your PostHog instance URL. Defaults to `https://us.i.posthog.com` |
52+
53+
</div>
54+
55+
If you are using a CI/CD service, make sure these environment variables are added to your project settings, not just your local setup. This enables source maps to be automatically uploaded on your production build.
56+
</Step>
57+
58+
<Step checkpoint title="Verify source map upload and injection">
59+
60+
1. Confirm that source maps are successfully uploaded to PostHog.
61+
62+
<div className="mt-4 mb-2">
63+
64+
<OSButton variant="secondary" asLink className="mb-2" size="sm" to="https://app.posthog.com/settings/project-error-tracking#error-tracking-symbol-sets" external>
65+
Check symbol sets in PostHog
66+
</OSButton>
67+
68+
</div>
69+
70+
2. Confirm that the served files are injected with the correct source map comment in production in dev tools:
71+
72+
```js
73+
//# chunkId=0197e6db-9a73-7b91-9e80-4e1b7158db5c
74+
```
75+
76+
</Step>
77+
</Steps>

‎contents/docs/error-tracking/upload-source-maps/webpack.mdx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
title: Upload source maps for Webpack
3+
showStepsToc: true
4+
---
5+
6+
<Steps>
7+
<Step title="Install the PostHog Webpack plugin" badge="required">
8+
9+
```shell
10+
npm install @posthog/webpack-plugin
11+
```
12+
13+
</Step>
14+
<Step title="Add PostHog plugin to your Webpack config" badge="required">
15+
16+
Add the following to your `webpack.config.js` file:
17+
18+
```js file=webpack.config.js
19+
const PostHogPlugin = require('@posthog/webpack-plugin')
20+
21+
module.exports = {
22+
// ... your existing config
23+
plugins: [
24+
new PostHogPlugin({
25+
personalApiKey: process.env.POSTHOG_API_KEY, // Personal API Key
26+
envId: process.env.POSTHOG_ENV_ID, // Environment ID
27+
host: process.env.POSTHOG_HOST, // (optional) defaults to https://us.i.posthog.com
28+
sourcemaps: { // (optional)
29+
enabled: true, // (optional) Enable sourcemaps generation and upload, defaults to true
30+
project: 'my-application', // (optional) Project name
31+
version: '1.0.0', // (optional) Release version
32+
deleteAfterUpload: true, // (optional) Delete sourcemaps after upload, defaults to true
33+
},
34+
}),
35+
],
36+
}
37+
```
38+
39+
Where you should set the following environment variables:
40+
41+
<div className="overflow-x-hidden">
42+
43+
| Environment Variable | Description |
44+
| --- | --- |
45+
| `POSTHOG_API_KEY` | [Personal API key](https://app.posthog.com/settings/user-api-keys#variables) with at least `write` access on `error tracking` |
46+
| `POSTHOG_ENV_ID` | Project ID you can find in your [project settings](https://app.posthog.com/settings/environment#variables) |
47+
| `POSTHOG_HOST` | (optional) Your PostHog instance URL. Defaults to `https://us.i.posthog.com` |
48+
49+
</div>
50+
51+
If you are using a CI/CD service, make sure these environment variables are added to your project settings, not just your local setup. This enables source maps to be automatically uploaded on your production build.
52+
</Step>
53+
54+
<Step checkpoint title="Verify source map upload and injection">
55+
56+
1. Confirm that source maps are successfully uploaded to PostHog.
57+
58+
<div className="mt-4 mb-2">
59+
60+
<OSButton variant="secondary" asLink className="mb-2" size="sm" to="https://app.posthog.com/settings/project-error-tracking#error-tracking-symbol-sets" external>
61+
Check symbol sets in PostHog
62+
</OSButton>
63+
64+
</div>
65+
66+
2. Confirm that the served files are injected with the correct source map comment in production in dev tools:
67+
68+
```js
69+
//# chunkId=0197e6db-9a73-7b91-9e80-4e1b7158db5c
70+
```
71+
72+
</Step>
73+
</Steps>

‎src/constants/logos.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export const LOGOS = {
5858
redditAds: 'https://res.cloudinary.com/dmukukwp6/image/upload/reddit_logo_f6d4c5cb0b.svg',
5959
remix: 'https://res.cloudinary.com/dmukukwp6/image/upload/remix_letter_glowing_49183adce2.svg',
6060
revenuecat: 'https://res.cloudinary.com/dmukukwp6/image/upload/logomark_red_background_9ea591e17a.svg',
61+
rollup: 'https://res.cloudinary.com/dmukukwp6/image/upload/Rollup_js_c306a2fde3.svg',
6162
ruby: 'https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/docs/integrate/ruby.svg',
6263
rust: 'https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/docs/integrate/rust.svg',
6364
s3: 'https://res.cloudinary.com/dmukukwp6/image/upload/s3_8f86e011ce.svg',
@@ -74,6 +75,7 @@ export const LOGOS = {
7475
vitally: 'https://res.cloudinary.com/dmukukwp6/image/upload/vitally_a2d87ff23b.svg',
7576
vue: 'https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/docs/integrate/frameworks/vue.svg',
7677
webflow: 'https://res.cloudinary.com/dmukukwp6/image/upload/webflow_63b6678590.svg',
78+
webpack: 'https://res.cloudinary.com/dmukukwp6/image/upload/webpack_3fc774b5a5.svg',
7779
wordpress:
7880
'https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/docs/integrate/frameworks/wordpress.svg',
7981
zendesk: 'https://res.cloudinary.com/dmukukwp6/image/upload/zendesk_icon_f56707bc5c.svg',

‎src/navs/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4020,6 +4020,14 @@ export const docsMenu = {
40204020
name: 'Android',
40214021
url: '/docs/error-tracking/upload-mappings/android',
40224022
},
4023+
{
4024+
name: 'Rollup',
4025+
url: '/docs/error-tracking/upload-source-maps/rollup',
4026+
},
4027+
{
4028+
name: 'Webpack',
4029+
url: '/docs/error-tracking/upload-source-maps/webpack',
4030+
},
40234031
{
40244032
name: 'CLI',
40254033
url: '/docs/error-tracking/upload-source-maps/cli',

0 commit comments

Comments
 (0)