Sentry-javascript: Sentinela ao executar sobre capacitor como stackrace de aplicativo híbrido não está tendo nenhuma informação

Oi @kamilogorek , você poderia ajudar com isso.

O nome do arquivo nos quadros de pilha parece errado

{
              "filename": "[native code]",
              "lineno": null,
              "colno": null,
              "function": "forceError",
              "in_app": true
            }

Mais um console de erro de amostra se parece com isso. Raven.js não obtém nenhuma informação de erro.

Na sentinela fica assim

É responsabilidade do TraceKit extrair informações de quadros apropriadas do próprio erro – https://github.com/getsentry/sentry-javascript/blob/master/packages/raven-js/vendor/TraceKit/tracekit.js

No entanto, fizemos algumas alterações no novo @sentry/browser SDK, portanto, você pode tentar primeiro antes de fazermos mais investigações.

@kamilogorek
Com @sentry/browser é ainda pior, por isso mudei para Raven.

Abaixo está como fica quando o aplicativo está sendo executado como aplicativo híbrido usando capacitor + Ionic 4 + VueJS + @sentry/browser

Abaixo está o link do erro que é registrado quando eu uso @sentry/browser.

https://sentry.io/share/issue/d0c7e9529ac94dba9c4b7b04e16361ba/

É assim que o console se parece

Configuração da Sentinela

Sentry.init({
    release: "WSVue-" + AppConst.application.version + "-" + AppConst.application.bundleVersion,
    dsn: "https://[email protected]/181356",
    transport: Sentry.Transports.FetchTransport,
    integrations: [new Sentry.Integrations.Vue({Vue})],
    environment: "DEVTEST",
    beforeSend: function (exception) {
        return exception;
    }
});

Embora pareça bonito quando o aplicativo em execução está sendo executado como um site

Abaixo está o mesmo erro registrado quando o aplicativo está sendo executado como site
https://sentry.io/share/issue/4133deab3fc240f2bc85c680fae922a0/

Nunca usei Capacitor nem Ionic 4 tbh. Você é capaz de fornecer o menor caso de reprodução possível que eu poderia usar para depurar isso? Eu não tenho tempo suficiente para aprender como configurá-lo.

@kamilogorek Não é um problema, criei um projeto de teste para reproduzir o problema. Capacitor é exatamente semelhante ao cordova. Mesmo processo de depuração.

https://github.com/stripathix/ionic-vue

Para acionar um erro basta clicar no botão Trigger Error

Para executar o aplicativo, adicionei etapas no README.md. É muito fácil. Quase semelhante ao ambiente Cordova.

Para depurar o aplicativo híbrido, é exatamente semelhante à depuração do Cordova. Basta executar o aplicativo no simulador e, em seguida, no safari, abra o Inspector para um aplicativo em execução no simulador.

Abaixo está o link do erro registrado quando o aplicativo estava executando um aplicativo móvel híbrido.
https://sentry.io/share/issue/a19f3ecd72eb4e6fa216e4146ad91038/

oi, @kamilogorek você teve a chance de investigar isso?

Não realmente, eu não tenho muito tempo livre esses dias. Vou tentar investigar isso algum dia, desculpe.

@kamilogorek Eu também estou enfrentando esse problema. Há mais alguém disponível que possa investigar isso?

Desculpe, mas não tenho tempo suficiente para resolver esse problema agora.

Se você quiser investigar, sugiro:

• use beforeSend callback e veja se é o 2º argumento hint , tem um atributo hint.originalException , se sim, investigue sua pilha e veja se a informação está lá
• se não for, então não há muito que possamos fazer
• se for, defina um ponto de interrupção no método computeStackTrace de https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts e passo a passo a partir daí como ele digere error.stack informações

Usamos @sentry/browser em um aplicativo Ionic Angular v4 com Cordova e tivemos problemas semelhantes com rastreamentos de pilha mapeados de origem.

Determinamos que tinha a ver com o Ionic Web View para Cordova e seu uso de esquemas personalizados no iOS ( ionic:// para Cordova, capacitor:// para Capacitor). O esquema personalizado nos nomes de arquivos dos quadros do rastreamento de pilha parece problemático para desminificação.

Escrevemos uma solução para reescrever os esquemas dos nomes dos arquivos de ionic:// para http:// e funcionou conforme o esperado. Aqui está uma versão simplificada dele:

beforeSend = (event: Event) => {
  const exceptionValue = event.exception && event.exception.values && event.exception.values[0];

  // Approach taken from Sentry's React Native SDK.
  // See https://github.com/getsentry/sentry/issues/4719#issuecomment-333836573
  const stacktrace = event.stacktrace || (exceptionValue && exceptionValue.stacktrace);

  if (stacktrace) {
    stacktrace.frames.forEach(frame => {
      if (frame.filename !== "[native code]") {
        // The iOS webview uses a custom URL scheme for serving the web app.
        // See https://github.com/ionic-team/cordova-plugin-ionic-webview#iosscheme
        // The full URL with that scheme will be used for filenames in the stacktrace.
        // The URL begins with "ionic://localhost/".
        // The custom "ionic" scheme in the URL creates issues for source-mapped stacktraces.
        // Replacing "ionic" with "http" in the stackframe filename will enable source-mapped stacktraces.
        frame.filename = frame.filename.replace(/^ionic/, "http");
      }
    });
  }

  return event;
}

Espero que isto ajude!

@KevinKelchen : isso resolve o nome de arquivo incorreto, mas como você lida com o lineno indefinido e colno ? Como @stripathix , os quadros têm aqueles como indefinidos ao serem executados dentro do capacitor em um aplicativo da Web iOS. Exemplo:

vs

Embora para mim pareça que não está faltando informações, mas quadros inteiros que estão faltando.

@kamilogorek : Posso confirmar que originalException tem informações de coluna e linha, veja abaixo:

Não tenho ideia de como começar a depurar o tracekit, mas talvez haja algo óbvio que alguém veja acima.

@silviogutierrez você tem algum pequeno repro que eu possa usar para depurar isso? Idealmente, apenas um aplicativo básico de cordova com quadros que estão faltando col/line

@kamilogorek : Vou tentar montar um, mas na verdade encontrei o problema. É bem simples e exatamente onde você adivinhou:

Aqui mesmo: https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts

As variáveis gecko e chrome voltam vazias para o teste de regex nos quadros do capacitor. Ou seja, ao rodar no iOS, os frames do capacitor possuem capacitor://localhost/foo/bar e no Android http://localhost . Portanto, o Tracekit descarta todos os quadros no iOS, exceto aqueles com [native code] que correspondem ao regex. Imagino que funcione bem no Android.

A simples execução deste comando sed (atroz) para alterar a variável gecko corrige o problema:

sed -i "s/moz-extension/moz-extension|capacitor/" node_modules/@sentry/browser/esm/tracekit.js

Devo abrir um PR contra o Tracekit para adicionar o protocolo do capacitor? Se você notar, o regex chrome é um pouco mais flexível e já parece ter [-a-z] como parte do regex para qualquer número de protocolos. Devemos tentar isso em gecko também?

@silviogutierrez - Você já conseguiu alguma resolução aqui? Se necessário, posso fazer um PR com sua correção ou até mesmo testá-la localmente.

Minha correção funcionou. Infelizmente, nunca tive tempo de fazer um pequeno repo de reprodução com antes/depois. Mas eu tenho usado a correção por um tempo com sucesso.

Restam duas perguntas:

1. Isso pode ser genérico do lado do sentinela? Algo como *:// para um protocolo?
2. Ou, em vez disso, por que o capacitor insiste em seu próprio protocolo (e apenas no iOS)? Por que não usar um dos listados no tracekit.ts já?

Essas são boas perguntas, e eu não tenho uma resposta muito boa para nenhuma delas.

1. Parece que você descobriu isso com seu regex.

2. Eu acho que isso é apenas parte de toda a coisa de esquemas personalizados Cordova / Ionic / Capacitor ou qualquer outra coisa. Sinto que também está vinculado à estratégia de fixação de SSL para evitar a comprovação de CORS do aplicativo, mas não tenho certeza.

@kamilogorek - Não tenho certeza do que você quer para uma reprodução. Aqui está o meu melhor tiro, eu acho:

https://github.com/toddtarsi/cordova-create-react-app

Eu bifurquei este repositório, adicionei Sentry, adicionei um limite de erro React, adicionei um botão de travamento. Tem instruções de execução do Cordova. É o mais básico possível com o Cordova moderno. Deixe-me saber se é isso que você está procurando.

@kamilogorek @silviogutierrez - Ok, cansei de reclamar aqui. Cheguei à conclusão de que o ônus deste problema se resume à implementação de erros brutalmente obtusos por parte do Gecko/safari. Obrigado por ser paciente e útil comigo aqui.

@toddtarsi desculpe por não ter tido tempo suficiente aqui, mas obrigado por me avisar. Deixe-me fechar este problema, mas sinta-se à vontade para me enviar um ping e/ou abrir um novo, se necessário. Obrigado!

@kamilogorek você gostaria que eu criasse um novo problema como sugerido para @toddtarsi , ou apenas envie um PR referente a este?

Conforme apontado no comentário de @silviogutierrez acima (https://github.com/getsentry/sentry-javascript/issues/1863#issuecomment-563364652) este é um problema específico para a versão ajustada do tracekit do sentry-javascript e pode facilmente ser corrigido neste projeto (https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts#L49).

Problema: os aplicativos de capacitor não enviam rastreamentos de pilha mapeáveis ​​no iOS porque o regex gecko não permite o esquema de url capacitor://.
Solução: Adicione o esquema de url do capacitor ao regex gecko.

Estou prestes a fazer o fork do projeto e fazer a alteração para meu próprio uso, se você quiser que eu envie um pull request, me avise!

@kamilogorek @mrlowe alguma atualização para a solicitação de pull https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0? Seria útil para o suporte do capacitor discutido na edição https://github.com/getsentry/sentry/issues/13169.

@seanwu1105 nada de mim. Eu tenho isso funcionando em produção agora e não vi nenhum problema.

@mrlowe você tem planos de fazer um PR para disponibilizar essa mudança para todos no próximo lançamento? Estamos enfrentando o mesmo problema ao usar o Capacitor em um aplicativo híbrido no iOS, e essa correção https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0 funciona para nós. Obrigado!

@albertinad Eu não ouvi nada de @kamilogorek , então vou apenas criar o PR e me referir a esse problema. Se não for pego, podemos criar um novo problema, suponho.

Desculpe a resposta tardia @mrlowe , é muito fácil perder uma menção em uma edição já fechada. Vou ficar de olho no PR, obrigado!