PostHog
Having a service worker that listens to the "fetch" event causes a network error response to PostHog
Adding the following service worker will cause a The FetchEvent for "https://eu.i.posthog.com/decide" resulted in a network error response: the promise was rejected. in the browser:
self.addEventListener('fetch', (event) => {
return
});
We are using Vercel proxy in our application, does this affect this?
Hey @MathiasWP sorry I totally missed this!
that sounds unexpected and undesirable... I'll see if i can reproduce 👀
Seconding this, we have an Angular app that suffers from a similar issue. We'd need to include ngsw-bypass somehow so that the Angular service worker skips these requests.
hey @ali-kamalizade if you're able to provide a minimal reproducible example that would be amazing... i don't know angular well at all so would be easy to think we'd fixed something or say we can't reproduce it just from unfamiliarity
hey @ali-kamalizade if you're able to provide a minimal reproducible example that would be amazing... i don't know angular well at all so would be easy to think we'd fixed something or say we can't reproduce it just from unfamiliarity
Can't provide a full repo but here are the essential parts imo:
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<base href="/" />
<meta
http-equiv="Content-Security-Policy"
content="
script-src 'self' 'unsafe-eval' https://eu-assets.i.posthog.com;
style-src 'self' 'unsafe-inline' https://eu.posthog.com;
img-src * data: blob: https://eu.posthog.com;
font-src 'self' https://eu.posthog.com;
object-src 'none';
connect-src 'self' data: https://eu.i.posthog.com https://eu-assets.i.posthog.com;
frame-src 'self';
form-action 'self' https://api-iam.eu.intercom.io;
manifest-src 'self';
media-src 'self' https://eu.posthog.com;
worker-src 'self' blob:;
"
/>
</head>
<body>
<app-root>
</app-root>
<!-- bundles are inserted here -->
</body>
</html>
In angular.json we have declared the service worker
{
"serviceWorker": true,
"ngswConfigPath": "path/to/ngsw-config.json",
...
}
In our app module we have registered the service worker
ServiceWorkerModule.register('ngsw-worker.js', { enabled: true}),
See related Angular documentation regarding service workers
This interceptor handles our own HTTP requests against our own API.
@Injectable()
export class ServiceWorkerBypassInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
const newRequest = request.clone({ headers: request.headers.append('ngsw-bypass', 'true') });
return next.handle(newRequest);
}
}
In our effect we initialize Posthog after successful login
posthog.init('theToken', {
api_host: 'https://eu.i.posthog.com',
cookie_expiration: 30,
enable_recording_console_log: false,
ip: false,
person_profiles: 'identified_only'
});
posthog.identify(currentUser.id, {
...userProperties
});
I hope this helps!