Service Worker "import sentry-release-injection" error when loading page

[MaxWeisen]

getsentry/sentry-javascript-bundler-plugins#460

@ArnauKokoro posted this issue in the getsentry/sentry-javascript-bundler-plugins repo.

Within this issue @iforst writes the following:
getsentry/sentry-javascript-bundler-plugins#460 (comment)

Hi, this is probably a bug somewhere in workbox or VitePWA, would you mind opening an issue in their respective repositories?

You can point them to this comment. My suspicion here is that they are trying to resolve or rewrite the virtual module which they should generally not do since it starts with a null bye \0. This is a convention in rollup/vite that everybody building plugins should adhere to.

Ideally you also share your build logs in case there are any warnings or similar!

Here's what my generated service worker looks like:

/**
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// If the loader is already loaded, just stop.
if (!self.define) {
    let registry = {};

    // Used for `eval` and `importScripts` where we can't get script URL by other means.
    // In both cases, it's safe to use a global var because those functions are synchronous.
    let nextDefineUri;

    const singleRequire = (uri,parentUri)=>{
        uri = new URL(uri + ".js",parentUri).href;
        return registry[uri] || (
        new Promise(resolve=>{
            if ("document"in self) {
                const script = document.createElement("script");
                script.src = uri;
                script.onload = resolve;
                document.head.appendChild(script);
            } else {
                nextDefineUri = uri;
                importScripts(uri);
                resolve();
            }
        }
        )
        .then(()=>{
            let promise = registry[uri];
            if (!promise) {
                throw new Error(`Module ${uri} didn’t register its module`);
            }
            return promise;
        }
        ));
    }
    ;

    self.define = (depsNames,factory)=>{
        const uri = nextDefineUri || ("document"in self ? document.currentScript.src : "") || location.href;
        if (registry[uri]) {
            // Module is already loading or loaded.
            return;
        }
        let exports = {};
        const require = depUri=>singleRequire(depUri, uri);
        const specialDeps = {
            module: {
                uri
            },
            exports,
            require
        };
        registry[uri] = Promise.all(depsNames.map(depName=>specialDeps[depName] || require(depName))).then(deps=>{
            factory(...deps);
            return exports;
        }
        );
    }
    ;
}
define(['./workbox-ffaa3760'], (function(workbox) {
    'use strict';

    self.addEventListener('message', event=>{
        if (event.data && event.data.type === 'SKIP_WAITING') {
            self.skipWaiting();
        }
    }
    );

    /**
   * The precacheAndRoute() method efficiently caches and responds to
   * requests for URLs in the manifest.
   * See https://goo.gl/S9QRab
   */
    workbox.precacheAndRoute([{
        "url": "/",
        "revision": "0.ia2na8sk9i"
    }], {});
    workbox.cleanupOutdatedCaches();
    workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/"),{
        allowlist: [/^\/$/]
    }));

}
));
//# sourceMappingURL=sw.js.map

;import "/_nuxt/@id/__x00__sentry-release-injection-file";

The last line ;import "/_nuxt/@id/__x00__sentry-release-injection-file"; is causing the error:

And idea on how we can get vite-pwa to work with Sentry Vite plugin?

[userquin]

who is injecting that import and when? The problem is about sw build, try using injectManifest if you're using generateSW strategy, it seems workbox-build is not able to inline that import.

Using injectManifest strategy, Vite will build the sw inlining dependencies, check https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/vite-build.ts

[MaxWeisen]

@userquin I am trying to use generateSW so I don't need to write a custom SW. Here is a minimal reproduction of the issue I am experiencing.

I have instructions on how to reproduce in readme.

https://github.com/MaxWeisen/vite-pwa-sentry-plugin-issue

Thank you!

[userquin]

So, the problem is only in dev (?), I'm going to check if registering the sw using type module works.

Running build script the sw generated without that import.

[userquin]

Registering the sw using type module, I'll check if we can remove that import:

[MaxWeisen]

So, the problem is only in dev (?), I'm going to check if registering the sw using type module works.

I have not tried this outside of dev.

[userquin]

try building your app and running the preview script or npx serve command in your local

[userquin]

This plugin cannot do anything about this, sentry plugin adding the import, workbox will build the sw using importScripts and we cannot use type: "module" and importScripts

[MaxWeisen]

@userquin So something needs to change within @sentry/vite-plugin?

Or we cannot use @sentry/vite-plugin with vite-pwa/nuxt?

[userquin]

vite-pwa-plugin is not transforming the sw in dev, it just generate it calling workbox-util package, sentry is intercepting that request.

I have no idea why sentry release adding the import, it seems that match this, and so adding it:

Shouldn't be applied only in build? I mean, the unplugin plugin (vite) being added without any apply option, just with enforce pre:

[userquin]

I have no idea why sentry release adding the import, it seems that match this, and so adding it:

upps, using filename (removes the query param):

var idWithoutQueryAndHash = stripQueryAndHashFromPath(id);

[userquin]

Or we cannot use @sentry/vite-plugin with vite-pwa/nuxt?

You can but using injectManifest strategy, Vite will inline the dependency when building it (in dev will just remove ts annotations via esbuild and it should work): I'm going to add a custom sw in your repro.

[userquin]

@MaxWeisen

[MaxWeisen]

@userquin What does your custom SW file look like? How are you handling the "revisions" cache?

[userquin]

I'll send you a PR to your repro and so you can see the changes, I'm finishing some tests like build the sw.

[userquin]

@MaxWeisen in dev there is no offline support, the manifest entries will have only the navigate fallback or / with a random revision, here the build with the sentry import inlined (it just works, but using window checks inside a sw...):

[userquin]

@MaxWeisen MaxWeisen/vite-pwa-sentry-plugin-issue#1

We'll need to prerender the navigate fallback. Since your repo not using pages... update changes properly.

Remove minify: false, from injectManifest in your repo, in the repro just for testing purposes: https://github.com/MaxWeisen/vite-pwa-sentry-plugin-issue/pull/1/files#diff-5977891bf10802cdd3cde62f0355105a1662e65b02ae4fb404a27bb0f5f53a07R46

[userquin]

I forgot to mention I also added the sentry plugin to the build, you can remove it: just remove this entry https://github.com/MaxWeisen/vite-pwa-sentry-plugin-issue/pull/1/files#diff-5977891bf10802cdd3cde62f0355105a1662e65b02ae4fb404a27bb0f5f53a07R47-R55

[userquin]

You can check any custom sw in the vite pwa plugin examples folder or here in nuxt playground: check also a working (production) example with some runtime caching entries and some exclusions like api calls (also with some advanced features like push notifications, push notification clicks and web shared target api):

https://github.com/elk-zone/elk/blob/main/service-worker/sw.ts

[MaxWeisen]

@userquin Thank you for all the resources and help. This is great.